Working with environment variables in Reactjs

Question

Hello!

I’m starting now with Reacjs.

Usually in Nodejs I create a folder environments and put the index.ts or index.example.ts, with values there

DB=nome_banco
HOST=localhost
USER=username

When I started using Reactjs I tried to use the same logic, creating the folder and the files to use the api

dev

HOST=http://localhost:3000

prod

HOST=http::/dominio.com.br:1234

Every time, before I give the build I have to go on Environments to change the host.

I tried to use that tutorial, even worked for localhost, I created two env.Development and env.Production files with the following sample content:

Development

REACT_APP_HOST=http://localhost:3001

Production

REACT_APP_HOST=http://dominio.com.br:1234

And I put in package.json the following:

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

But when you build it, it only takes the localhost data

Where can I be missing?

Answer 1

Create React App accepts the following files by default, without having to install the env-cmd:

• .env: pattern.
• .env.local: Local overlays. This file is uploaded to all environments except test.
• .env.development, .env.test, .env.production: Settings specific to each environment.
• .env.development.local, .env.test.local, .env.production.local: Local configuration overlays for each specific environment.

What I tested and worked:

• create CRA project:

  npx create-react-app my-app
  cd my-app
  

• create the archive .env.development with the content

  REACT_APP_HOST=http://localhost:3001

• create the archive .env.production with the content

  REACT_APP_HOST=http://dominio.com.br:1234

• in the app code, use the variable process.env.REACT_APP_HOST.

• Without changing the start and build commands and running npm start, to variable appears as defined in the Development environment. When running npm run build, the variable appears as defined in the Production environment.

Do not forget that when changing the production file, you need to recompile the project to take effect.

Official documentation: https://create-react-app.dev/docs/adding-custom-environment-variables/