Injecting Environment Variables in Webpack Projects

Hi there! I'm Maneshwar. Right now, I’m building LiveAPI, a first-of-its-kind tool that helps you automatically index API endpoints across all your repositories. LiveAPI makes it easier to discover, understand, and interact with APIs in large infrastructures.

---

Injecting Environment Variables in Webpack Projects (The Right Way)

When you're building frontend apps, you often need different configs for development, staging, or production—like API URLs, feature flags, or version info.

Hardcoding them is a mistake. The better way is to inject environment variables into your build using Webpack.

Here’s how to do that properly.

Step 1: Create a .env File

Create a .env file in your project root:

API_URL=https://api.example.com
FEATURE_FLAG=true
VERSION=1.4.2

Option 1: Using dotenv-webpack (Simple and Popular)

This plugin reads your .env file and makes the variables available in your frontend code.

Install:

npm install dotenv-webpack --save-dev

Add to webpack.config.js:

const Dotenv = require('dotenv-webpack');

module.exports = {
  // ...
  plugins: [
    new Dotenv()
  ]
};

Use it in your source code:

console.log("API URL:", process.env.API_URL);
if (process.env.FEATURE_FLAG === "true") {
  enableBetaFeature();
}

Don't destructure process.env. This won’t work:

// ❌ Not supported
const { API_URL } = process.env;

Stick to direct usage: process.env.API_URL.

Option 2: Using DefinePlugin + dotenv (More Control)

If you want to manually control which env variables get injected:

Install dotenv:

npm install dotenv --save-dev

Configure webpack.config.js:

const webpack = require("webpack");
const dotenv = require("dotenv");

const env = dotenv.config().parsed;

const envKeys = Object.entries(env).reduce((acc, [key, val]) => {
  acc[`process.env.${key}`] = JSON.stringify(val);
  return acc;
}, {});

module.exports = {
  // ...
  plugins: [
    new webpack.DefinePlugin(envKeys)
  ]
};

Same usage as before:

const api = process.env.API_URL;

You can also modify envKeys to only expose specific variables if needed.

Important Notes

• These variables are replaced at build time — they're not dynamic at runtime.
• Don’t include secrets like tokens or passwords. These will be readable in your compiled bundle.
• Rebuild your app whenever you change .env.

Bonus: Use Different .env Files Per Environment

You can pass a different .env file during production builds:

new Dotenv({ path: './.env.production' })

Then, in your build scripts:

"scripts": {
  "build": "webpack --mode production --env prod"
}

TL;DR

• Use dotenv-webpack for simplicity.
• Use DefinePlugin if you want custom filtering.
• Don’t put secrets in .env if you're building for the frontend.
• Rebuild your app when env values change.

That’s it. You now have clean, dynamic config injection in your frontend app — the maintainable way.

---

LiveAPI helps you get all your backend APIs documented in a few minutes.

With LiveAPI, you can generate interactive API docs that allow users to search and execute endpoints directly from the browser.

If you're tired of updating Swagger manually or syncing Postman collections, give it a shot.