The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Environment Variables

Next ►
►

Environment variables are a crucial part of configuring your Webpack setup, especially when you need to manage different settings for development, testing, and production environments. This section will cover how to use environment variables in Webpack to create flexible and maintainable builds.

Key Concepts

  1. Environment Variables: Variables that are set outside of your application code and can be used to configure your application.
  2. DefinePlugin: A Webpack plugin that allows you to create global constants which can be configured at compile time.
  3. dotenv: A module that loads environment variables from a .env file into process.env.

Setting Up Environment Variables

Step 1: Install dotenv

First, you need to install the dotenv package to manage your environment variables.

npm install dotenv --save-dev

Step 2: Create a .env File

Create a .env file in the root of your project. This file will contain your environment-specific variables.

# .env
NODE_ENV=development
API_URL=https://api.example.com

Step 3: Configure Webpack to Use dotenv

Modify your Webpack configuration file to use the dotenv package and the DefinePlugin to inject these variables into your application.

// webpack.config.js
const webpack = require('webpack');
const dotenv = require('dotenv');

dotenv.config();

module.exports = {
  // Other configuration settings...
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
      'process.env.API_URL': JSON.stringify(process.env.API_URL)
    })
  ]
};

Step 4: Access Environment Variables in Your Code

You can now access these environment variables in your application code using process.env.

// src/index.js
if (process.env.NODE_ENV === 'development') {
  console.log('Development mode');
}

console.log(`API URL: ${process.env.API_URL}`);

Practical Example

Let's create a simple example to demonstrate how environment variables can be used in a Webpack project.

Project Structure

my-webpack-project/
├── .env
├── package.json
├── src/
│   └── index.js
└── webpack.config.js

.env File

# .env
NODE_ENV=development
API_URL=https://api.example.com

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const dotenv = require('dotenv');

dotenv.config();

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
      'process.env.API_URL': JSON.stringify(process.env.API_URL)
    })
  ],
  mode: process.env.NODE_ENV
};

src/index.js

if (process.env.NODE_ENV === 'development') {
  console.log('Development mode');
}

console.log(`API URL: ${process.env.API_URL}`);

Running the Build

Run the Webpack build to see the environment variables in action.

npx webpack --config webpack.config.js

Exercises

Exercise 1: Add a New Environment Variable

  1. Add a new environment variable APP_VERSION to your .env file.
  2. Modify the Webpack configuration to include this new variable.
  3. Access and log this variable in your src/index.js file.

Solution

  1. Update .env file:
# .env
NODE_ENV=development
API_URL=https://api.example.com
APP_VERSION=1.0.0
  1. Update webpack.config.js:
const path = require('path');
const webpack = require('webpack');
const dotenv = require('dotenv');

dotenv.config();

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
      'process.env.API_URL': JSON.stringify(process.env.API_URL),
      'process.env.APP_VERSION': JSON.stringify(process.env.APP_VERSION)
    })
  ],
  mode: process.env.NODE_ENV
};
  1. Update src/index.js:
if (process.env.NODE_ENV === 'development') {
  console.log('Development mode');
}

console.log(`API URL: ${process.env.API_URL}`);
console.log(`App Version: ${process.env.APP_VERSION}`);

Exercise 2: Create Different Environment Configurations

  1. Create two new environment files: .env.development and .env.production.
  2. Modify the Webpack configuration to load the appropriate environment file based on the NODE_ENV value.

Solution

  1. Create .env.development:
# .env.development
NODE_ENV=development
API_URL=https://dev.api.example.com
APP_VERSION=1.0.0
  1. Create .env.production:
# .env.production
NODE_ENV=production
API_URL=https://api.example.com
APP_VERSION=1.0.0
  1. Update webpack.config.js:
const path = require('path');
const webpack = require('webpack');
const dotenv = require('dotenv');
const env = process.env.NODE_ENV || 'development';
dotenv.config({ path: `.env.${env}` });

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
      'process.env.API_URL': JSON.stringify(process.env.API_URL),
      'process.env.APP_VERSION': JSON.stringify(process.env.APP_VERSION)
    })
  ],
  mode: process.env.NODE_ENV
};

Common Mistakes and Tips

  • Mistake: Forgetting to stringify the environment variables in DefinePlugin.

    • Tip: Always use JSON.stringify to ensure the values are correctly injected as strings.

  • Mistake: Not reloading the environment variables after changing the .env file.

    • Tip: Restart your Webpack build process to ensure the new environment variables are loaded.

Conclusion

In this section, you learned how to use environment variables in Webpack to create flexible and maintainable builds. You set up environment variables using the dotenv package, configured Webpack to use these variables, and accessed them in your application code. You also practiced adding new environment variables and creating different environment configurations. Understanding and using environment variables effectively can greatly enhance the flexibility and maintainability of your Webpack projects.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved