Environment Variables

You will occassionally need to access environment variables in your JavaScript.  This is done using the process.env object like so: process.env.YOUR_KEY_HERE. But your user's browser won't have access to a process object.  How will we handle this?
Webpack's EnvironmentPlugin
Webpack uses the EnvironmentPlugin to do this.  It takes an array of environment variable names to allow in your application.  Then all instances of process.env.YOUR_KEY_HERE will be replaced with the value in your environment. 
Environment
1
NODE_ENV=development
Copied!
webpack.config.js
1
module.exports = {
2
  // ...
3
  plugins: [
4
    // ...
5
    new webpack.EnvironmentPlugin(["NODE_ENV"]),
6
  ]
7
};
Copied!
Source File
1
console.log(process.env.NODE_ENV);
Copied!
Output File
1
console.log("development");
Copied!
If the environment variable allowed is missing, an error will be thrown during compilation, ensuring that you don't accidentally ship code without this value.
In addition to passing an array of key names, you may pass an object with the keys being environment variable names and the values being default values if the keys are not found in the environment.
webpack.config.js
1
module.exports = {
2
  // ...
3
  plugins: [
4
    // ...
5
    new webpack.EnvironmentPlugin({
6
      NODE_ENV: "development"
7
    }),
8
  ]
9
};
Copied!
mix.env
To make this process easier, Elixir has a mix.env method that passes through to EnvironmentPlugin.
webpack.config.js
1
const elixir = require("coldbox-elixir");
2
​
3
module.exports = elixir(mix => {
4
  mix.env(["NODE_ENV"]);  
5
});
Copied!
This is the easiest way to define the environment variables your JavaScript bundle needs.
Automatic NODE_ENV
NODE_ENV is a very common environment variable used by many libraries to output additional debugging information or to enable optimizations.  Since Elixir already knows what environment you are building for, this value is defaulted for you.  If you desire to override that value, just define NODE_ENV in your environment and it will take precendence.

Deleting Files & Directories

BrowserSync

Last modified 9mo ago

Copy link

Contents

Webpack's EnvironmentPlugin

mix.env

Automatic NODE_ENV