Multiple Environments in Frontend Applications

In this blog, we'll explore how to set up and manage multiple environments in a frontend application using env-cmd.

What is env-cmd?

env-cmd is a utility that allows you to easily load environment variables from a file into your Node.js application. It supports loading multiple environment files, making it an excellent choice for managing different configurations for various environments.

Step-by-Step Guide to Setting Up Multiple Environments with env-cmd

1. Install env-cmd

First, you need to install env-cmd as a development dependency in your project:

npm install env-cmd --save-dev

2. Create Environment Files

Create separate environment files for each environment you want to manage. These files typically reside in the root of your project. For example, you can create the following files:

• .env.development
• .env.test
• .env.production

Each file should contain the environment-specific variables:

.env.development

REACT_APP_API_URL=http://localhost:3000

.env.test

REACT_APP_API_URL=http://localhost:4000

.env.production

REACT_APP_API_URL=https://api.production.com

3. Configure Scripts in package.json

Modify the scripts section of your package.json to use env-cmd for running commands in different environments. This allows you to specify which environment file to load when starting your application or running build processes.

{
  "scripts": {
    "start:development": "env-cmd -f .env.development react-scripts start",
    "start:test": "env-cmd -f .env.test react-scripts start",
    "start:production": "env-cmd -f .env.production react-scripts start",
    "build:development": "env-cmd -f .env.development react-scripts build",
    "build:test": "env-cmd -f .env.test react-scripts build",
    "build:production": "env-cmd -f .env.production react-scripts build"
  }
}

4. Access Environment Variables in Your Code

In your application code, you can access these environment variables using process.env. For example, in a React component:

const apiUrl = process.env.REACT_APP_API_URL;

console.log(`API URL: ${apiUrl}`);

5. Running the Application

You can now start your application in the desired environment by running the corresponding script. For example, to start the application in the development environment:

npm run start:development

Or to build the application for production:

npm run build:production

Using env-cmd to manage multiple environments in your frontend application simplifies the process of handling different configurations. It allows you to maintain clean and organized environment variables, making your development, testing, and deployment processes more efficient. By following the steps outlined in this guide, you can set up and manage multiple environments effectively, ensuring your application performs consistently across all stages of development.

If you've liked this blog, connect with me on LinkedIn or X.