Multiple Environments in Frontend Applications
Tags: react, webdev, javascript, programming
Published: 2024-05-27 13:49:47

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:

```bash
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.

```json
{
  "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:

```javascript
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:

```bash
npm run start:development
```

Or to build the application for production:

```bash
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](https://www.linkedin.com/in/ramgoel/) or [X](https://x.com/theramgoel).