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

NODE_ENV=development

webpack.config.js

module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.EnvironmentPlugin(["NODE_ENV"]),
  ]
};

Source File

console.log(process.env.NODE_ENV);

Output File

console.log("development");

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

module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.EnvironmentPlugin({
      NODE_ENV: "development"
    }),
  ]
};

mix.env

To make this process easier, Elixir has a mix.env method that passes through to EnvironmentPlugin.

webpack.config.js

const elixir = require("coldbox-elixir");

module.exports = elixir(mix => {
  mix.env(["NODE_ENV"]);  
});

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.