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.