DEV Community

Cover image for Multiple Environments in Frontend Applications
Ram Goel
Ram Goel

Posted on

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

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

.env.test

REACT_APP_API_URL=http://localhost:4000
Enter fullscreen mode Exit fullscreen mode

.env.production

REACT_APP_API_URL=https://api.production.com
Enter fullscreen mode Exit fullscreen mode

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

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

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

Or to build the application for production:

npm run build:production
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)