DEV Community

Athreya aka Maneshwar
Athreya aka Maneshwar

Posted on • Edited on

Injecting Environment Variables in Webpack Projects

Hello, I'm Maneshwar. I'm building git-lrc, an AI code reviewer that runs on every commit. It is free, unlimited, and source-available on Github. Star Us to help devs discover the project. Do give it a try and share your feedback for improving the product.

## 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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Add to webpack.config.js: 

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

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

Use it in your source code: 

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

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

// ❌ Not supported
const { API_URL } = process.env;
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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)
  ]
};
Enter fullscreen mode Exit fullscreen mode

Same usage as before:

const api = process.env.API_URL;
Enter fullscreen mode Exit fullscreen mode

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' })
Enter fullscreen mode Exit fullscreen mode

Then, in your build scripts:

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

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.

git-lrc
*AI agents write code fast. They also silently remove logic, change behavior, and introduce bugs -- without telling you. You often find out in production.

git-lrc fixes this. It hooks into git commit and reviews every diff before it lands. 60-second setup. Completely free.*

Any feedback or contributors are welcome! It's online, source-available, and ready for anyone to use.

⭐ Star it on GitHub:

GitHub logo HexmosTech / git-lrc

Free, Unlimited AI Code Reviews That Run on Commit



AI agents write code fast. They also silently remove logic, change behavior, and introduce bugs -- without telling you. You often find out in production.

git-lrc fixes this. It hooks into git commit and reviews every diff before it lands. 60-second setup. Completely free.

See It In Action

See git-lrc catch serious security issues such as leaked credentials, expensive cloud operations, and sensitive material in log statements

git-lrc-intro-60s.mp4

Why

  • 🤖 AI agents silently break things. Code removed. Logic changed. Edge cases gone. You won't notice until production.
  • 🔍 Catch it before it ships. AI-powered inline comments show you exactly what changed and what looks wrong.
  • 🔁 Build a…
View on GitHub

Top comments (0)