I am trying to get an environment variable in my JS file.
In my .env file:
IMAGE_PROXY_URL=https://images.weserv.nl/
MIX_IMAGE_PROXY_URL="${IMAGE_PROXY_URL}"
In webpack.mix.js I am using mix.scripts() to compile different JS files together.
Inside one of the files I am trying to access the environment variable using process.env.MIX_IMAGE_PROXY_URL but after running npm the variable isn't set. It stays process.env.MIX_IMAGE_PROXY_URL.
Any suggestions on how to do this? I am trying to use 1 global variable for multiple scripts to make it flexible in the long run.
@Glennmen I’ve not dug into the guts of Mix, but the documentation says:
you may also combine and minify any number of JavaScript files with the scripts() method
I’m guessing it just combines the scripts as is and will not do any of the Node-based compilation (which is how the environment variables get replaced with values) that using the js() method would.
@martinbean That is what I was starting to think, but when I use mix.js() my JS code doesn't work anymore.
If anyone has a suggestion on how I could use an environment variable in a vanilla javascript file that would help me out a lot.
how I could use an environment variable in a vanilla javascript file that would help me out a lot.
@Glennmen You can’t. JavaScript files are just static files, so can’t access server-side things like environment variables.
You can use environment variables when using js() as it runs within a Node process. But don’t insert any sensitive data, such as secret keys, as they will be inserted into your scripts as plain text, so any one who inspects your JavaScript files will be able to grab them.
Please or to participate in this conversation.