• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Passing Environment Variables Into Your Code With Webpack

Front End Development · October 7, 2022

In some use cases, it can be beneficial to pass environment variables into your code. In my case, at build time I pass an environment variable to Webpack in the form of --env production and so forth. I wanted to get this in my code so I could load different configuration files depending on the built environment.

I have three environments I build for:

  • Production
  • Staging
  • Development

While there are code solutions you can implement such as checking the URL, I wanted something handled in the build itself.

In my Npm scripts in package.json I have the following:

"scripts": {
  "build": "rimraf dist && webpack --env production",
  "build:dev": "rimraf dist && webpack --env development",
  "build:stage": "rimraf dist && webpack --env staging",
}

Using the DefinePlugin which comes with Webpack, we can then add this to our code at build time like this. I’ve omitted all of the other stuff you would have in your Webpack configuration file so we can focus on the parts that matter.

const { DefinePlugin } = require('webpack');

module.exports = function(env, { analyze }) {
  return {
    plugins: [
      new DefinePlugin({
        'ENV': JSON.stringify(env),
      }),
    ]
  }
}

Now, inside your code ENV is a global variable you can access. I can then perform checks like this:

if (ENV?.development) {
}

If you use TypeScript as I do, then you will want to add a declaration for our magic variable.

declare const ENV: { development?: boolean; production?: boolean; staging?: boolean; };

Now you can pass in values to your code from your Webpack configuration. It’s great for build environment variables or you can even pass through the configuration itself from the build step. I just choose to use if checks and do that myself.

Dwayne

Leave a Reply Cancel reply

0 Comments
Inline Feedbacks
View all comments

Primary Sidebar

Popular

  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • Thoughts on the Flipper Zero
  • Waiting for an Element to Exist With JavaScript
  • How To Paginate An Array In Javascript
  • How to Use Neural DSP Archetype Plugins With the Quad Cortex
  • How To Mock uuid In Jest
  • How To Get Last 4 Digits of A Credit Card Number in Javascript
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?
  • How To Decompile And Compile Android APK's On A Mac Using Apktool

Recent Comments

  • Kevmeister68 on Start-Ups and Companies That Embrace Work From Anywhere Will Be More Likely to Survive the Coming Recession in 2023
  • kevmeister68 on What Would Get People Back Into the Office?
  • Dwayne on PHP Will Not Die
  • Dwayne on How to Create a Blockchain With TypeScript
  • kevmeister68 on PHP Will Not Die

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz