Develop Reference

How to access environment variables with vanilla javascript

I have an index.html and I need to pass some sensitive information to some JavaScript variables. This index.html contains plain javascript with jquery
so I am settning environmental variable like this:
USERNAME="123"
PASSWORD="password"
And I need to access this using javascript
<script>
var username = process.env.USERNAME;
var pw = process.env.PASSWORD;
</script>
but this gives the error
Uncaught ReferenceError: process is not defined
Maybe this is because I am using vanilla javascript. And I can't use any other framework other than jquery
Can someone help me how to do this?

I had this exact issue to deal with and I was able to create a working solution using this article. For this answer, I'll summarise the steps I took for a project deployed to Netlify and already modified to fit your question, but you can check out the article to see the base example and also learn more.
Note: This solution is ideal for small personal projects where the information is not exactly sensitive but you just don't want them
displayed so visibly in your code. Do not use for larger projects that require a reasonable level of security measures.
If your project is already deployed to Netlify, or a similar platform where you can add build/deploy commands:
Go to the build settings
If the script file you want to use the variables for is in a folder, set the build command to this: cd DIRECTORY-FOR-THE-SCRIPT-FILE && echo -e "export const USERNAME="123";\nexport const PASSWORD="password";" > config.js
If the script is in your root folder, set the command to this echo -e "export const USERNAME="123";\nexport const PASSWORD="password"; > config.js
In your index.html file where you import the script, set your script tag to include this attribute type="module" i.e <script src="./index.js" type="module"></script>
In your script file, import the variables by adding this line to the file: import {USERNAME, PASSWORD} from "./config.js"
Trigger a redeploy manually on Netlify, or it will be deployed automatically if you already set automatic deploys for the repo.
That's all!
This solved mine and I hope it helps anyone else✨.

So what is your environment? javascript runs in the frontend, where are you setting the env variable?
You may be able to use something like fs - https://www.npmjs.com/package/file-system to read from a file on the operating system, but I would not imagine most browsers would allow this

Unexpected syntax error unexpected string when referencing JS from HTML?

Alright, I downloaded this off Github trying to run it locally/modify it. https://tympanus.net/Tutorials/InteractiveRepulsionEffect/interactive-repulsive-effect.zip
The main index.html calls the JS in with: <script type="text/javascript" src="app.0ffbaba978f8a0c5e2d0.js"></script> which seems to be a minified version of app.js which I want to modify.
File structure looks like:
I changed the html to: <script type="text/javascript" src="../src/scripts/app.js"></script> which is the correct filepath to the JS that makes the scene, but I then get
Uncaught SyntaxError: Unexpected string
on line 1 of app.js which is:
import 'styles/index.scss';
import Cone from './elements/cone';
import Box from './elements/box';
import Tourus from './elements/tourus';
I tried changing this path, it doesn't matter. It just doesn't "like" the line. What is going on here? How can I reference the editable JS file?

You can't. The JavaScript code you've got isn't ready to be run in a browser.
Those public/app.xxxxxxxxxx.js files are what's ready to run in a browser, and they're likely compiled by Webpack (or something similar). Your repository has some sort of "build" process in place - chances are you can look at the scripts section of package.json to see the available build commands.

Exactly, you have to place yourself in the first-demo folder and modify your app js. Then run
npm install
to install webpack and any missing packages (just once). Then you can run
npm run build
and it will rebuild your public folder with your changes. Better yet, you can just
npm run start
and you will see a hot reload of your changes when you modify app.js in
http://localhost:9000

Require is not working for node-opcua

I want to load a local version of node-opcua with 'require' inside a HTML file, but it does not really work. The code snippet is the following:
<script type="text/javascript" src="path_to_require.js"></script>
<script>
var opcua = require(["path_to_node-opcua"]); <!-- Yes, the path is correct >
var client = new opcua.OPCUAClient();
...
When I execute the script I get the following error in the console:
Uncaught TypeError: opcua.OPCUAClient is not a constructor
Hence, var opcua is loaded correctly, but OPCUACluent is not, although the class is declared in a file that is present in the node-opcua folder called opcua_client.js under node-opcua\lib\client\
Sources:
The 'require' script from http://requirejs.org/docs/download.html#requirejs.
The node-opcua folder with the console command
npm install node-opcua.

node-opcua is not intended to run inside a browser as it relies on nodejs specific features such as filesystem access, crypto and so on.

You need to use browserify if you want to use that module in client. You will also need to look at how to use browserify with file system access (it can be done if paths are known ahead of time).

How to export a require assigned to a variable?

I'm doing the following to make this require to become visible in <app></app>
index.html:
<script>
var electron = require('electron')
</script>
<app></app>
<script src="bundle.js"></script>
App.vue:
const ipc = electron.ipcRenderer
console.log(ipc)
But I get un-used and un-defined var errors with ESLint, so I decided to do this:
requires.js:
var electron = require('electron')
exports.electron = electron
index.html:
<script src="requires.js"></script>
</head>
<body>
<app></app>
<script src="bundle.js"></script>
But now I get this error: requires.js:3 Uncaught ReferenceError: exports is not defined.
What the correct way to export and import the electron require?
Note: requiring electron directly in App.vue doesn't work. You can only require electron in index.html
Full example: https://github.com/alexcheninfo/vue-electron-simple

What you seem to be trying to do here is define electron as a global variable; for that to work you can set window.electron = require('electron') in your index.html in the first example. (It will be available in you bundle.js)
However, using globals for this bad practice and not necessary. What you should do, is just use require in your code. You say this doesn't work: the reason why it doesn't is probably that you're using webpack or something similar to create bundle.js. Furthermore, you probably run the bundling process in Node and not in Electron, therefore require('electron') does not work as expected. Note that it works in your index.html which is not part of the bundle.
If you want to continue to use this setup, you could rename Electron's require to distinguish between the require resolved during bundling and the require resolved at runtime. In other words, window.electronRequire = require in the script tag of index.html and then use electronRequire('electron') in your code.
Having said that, why bundle everything in the first place? Electron has full Node integration so you can use regular Node modules; the files are not sent via HTTP either so there is little to gain from bundling everything into one file.

Electron File Structure and Building An App

I've recently learned about Electron and it seems like a nifty way to create desktop applications. I've created a simple Twitter Aggregator that works once I run nodemon app.js and I want to package it up with Atom to run in it's own window on my computer.
I understand that an electron app must have a package.json and a main.js file in the root directory to run electron. So for organizational purposes, I created a folder called /app where my twitter aggregator files live.
When I run npm start it launches electron and opens a browser window that loads my index.html file. However I have two issues:
1) It gives me an error in console - Reference Error: $ is undefined
2) How do get it to run /app/app.js (which is what uses the Twitter API on the backend)?
This is my github repo: https://github.com/OneHunnid/dimmiDesktopApp

The error with $ is undefined is something that I ran into as well. The problem is with the nodeintegration features in the BrowserWindow. So, you can either turn nodeintegration off by passing nodeintegration: false with your options in your BrowserWindow constructor. OR you can add the following script tag in between the jquery script tag and your moment script tag on the index.html
<script type="text/javascript">
if(window && !window.$ && !window.jQuery && module && module.exports && module.exports){
window.$ = window.jQuery = module.exports;
}
</script>
This is caused because when jQuery bootstraps, it checks to see if it can detect a module. Normally in the browser you don't have one. So, if module exists, then jQuery attaches as module.exports. So, you just need to include this script that will set window.$ and window.jQuery equal to module.exports, which is where jQuery bootstrapped to.
That should fix your first issues.
As for your second issues, you should put the following in your index.html to make it work.
<script src="app.js"></script> //if not app.js, app/app.js
Let me know if this helps.