Environment Variables in React application

Question

I want to add a .env file in my React application. The project wasn't created using Create React APP. And without Webpack. I'm struggling to find a proper solution for this

Answer 1

For a easy solution you could try to use react-app-env.

You could folllow this simple guide. In brief:

1. install it:

   yarn add --dev react-app-env (or npm install --save-dev react-app-env)
   

2. change the start and build scripts:

   "scripts": {
     "start": "react-app-env start'",
     "build": "react-app-env build'",
     "test": "react-app-env test'",
     ...
   }
   

3. finally add at least two configuration files (on project root folder): development.env and production.env. By default development.env is used imported on npm start and npm test, and production.env on npm build.