Quando estamos trabalhando em um grande projeto, normalmente é feito a separação das API's em ambientes. Temos o ambiente de desenvolvimento (DEV), homologação (HMG) e produção (PRD).

No ambiente de DEV e HMG apenas vai ser disponibilizado as API's que estão em desenvolvimento. Já em PRD, vai ser disponibilizado as API's que já estão prontas e validadas para uso.

Mas, como o nosso Front-End vai saber quais API's carregar para cada tipo de ambiente ?

Variáveis de ambientes

Com as variáveis de ambientes conseguimos carregar as API's de acordo com o ambiente que o nosso Front-End está sendo executado.

Para usá-las basta criar na pasta raíz do seu projeto o arquivo .env.development e incluir todos os endpoints das API's e chaves do ambiente de DEV e outro arquivo .env.production e incluir todos os endpoints das API's e chaves de PRD.

Por exemplo:

// .env.development
REACT_APP_API_KEY='Sua API Key de DEV'
REACT_APP_API_CLIENT_ID='Seu Client_ID de DEV'
REACT_APP_ENDPOINT_NOME='Seu endpoint de DEV'
REACT_APP_ENDPOINT_NOME2='Outro endpoint de DEV'

Agora preencha o .env.production com os mesmos nomes das variáveis, mas com os valores de produção:

// .env.production
REACT_APP_API_KEY='Sua API Key de PRD'
REACT_APP_API_CLIENT_ID='Seu Client_ID de PRD'
REACT_APP_ENDPOINT_NOME='Seu endpoint de PRD'
REACT_APP_ENDPOINT_NOME2='Outro endpoint de PRD'

Lembre-se também de criar um arquivo .env.example para servir como exemplo de todas as possíveis variáveis que a aplicação possui:

// .env.example
REACT_APP_API_KEY=''
REACT_APP_API_CLIENT_ID=''
REACT_APP_ENDPOINT_NOME=''
REACT_APP_ENDPOINT_NOME2=''

Note que, as variáveis estão com o prefixo REACT_APP_, pois nesses exemplos usei o CRA, caso esteja usando o NextJS altere os prefixos das variáveis para NEXT_PUBLIC_

Agora, basta apenas importar a variável ou as variáveis que queremos usar em nossa aplicação:

const fetchData = async () => {
  const endpointUrl = process.env.REACT_APP_ENDPOINT_NOME
  const response = await fetch(endpointUrl)
  const data = await response.json()
  return data
}

Com isso, quando rodarmos a nossa aplicação em DEV será carregado os dados do arquivo .env.development, e no ambiente de PRD será carregado os dados do arquivo .env.production.

No entanto, toda vez que buildarmos a nossa aplicação sempre será carregado os dados do arquivo .env.production.

Mas, como fazer um build separado e carregar os dados de DEV ?

Nesse caso, podemos instalar o pacote env-cmd e fazer uma pequena alteração no package.json para fazer um build de DEV separado:

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

Basta agora rodarmos yarn build:dev ou npm run build:dev para fazer o build da aplicação no ambiente de desenvolvimento.

Conclusão

E chegamos ao fim desse post.😁

Vimos uma forma legal de trabalhar com as variáveis de ambientes no React.

Aqui abordei apenas DEV, HMG e PRD, mas poderíamos ter mais outros ambientes ou também poderíamos ter mais variáveis com mais configurações.

Até mais!👋