Utilizando variáveis de ambiente no ReactJS

Fala clã! Tudo tranquilo? Depois de um tempo sem dar as caras, eu voltei mas sem enrolação vamos ao tema de hoje!

Hoje pretendo falar um pouco sobre variáveis de ambiente e como elas me ajudaram muito durante esta semana.

Porque utilizar variáveis de ambiente em um projeto?

Basicamente, estas variáveis podem guardar informações que não podem serem vazadas para o mundo externo, por exemplo, chaves e senhas de APIs ou banco de dados, como também configurações mais especificas deles também.

Mas ao meu ver, o mais legal é poder definir diferentes conteúdos das variáveis dependendo do ambiente em que você se encontra, por exemplo, ambientes de desenvolvimento, testes e produção.

Para exemplificar melhor, digamos que temos o seguinte cenário:

//REQUISIÇÃO PARA ALGUMA COISA
const response = await fetch(LINK);
const data = await response.json();

Neste cenário estamos requisitando a alguma API local certos dados e esperamos seu retorno. Caso tenhamos diferentes ambientes que executam este trecho de código, o LINK ali usado pode ser diferentes entre eles e como corrigimos isso?

Assim?

//REQUISIÇÃO PARA ALGUMA COISA
//const response = await fetch(LINK_PARA_TESTE);
//const response = await fetch(LINK_PARA_DESENVOLVIMENTO);
const response = await fetch(LINK_PARA_PRODUCAO);
const data = await response.json();

A resposta é NÃO. Ao invés de ficarmos comentando linhas que não devem serem usadas podemos adicionar uma variável de ambiente para nos ajudar nessa ocasião e não ter mais que comentar as linhas incorretas. Nesta variável irá conter o link correto para o ambiente em execução. O processo todo ficará automático dependendo assim do ambiente em execução. O ambiente correto ficaria semelhante a este:

//REQUISIÇÃO PARA ALGUMA COISA
const response = await fetch(VARIAVEL_DE_AMBIENTE_PARA_O_AMBIENTE_EM_EXECUCAO);
const data = await response.json();

Utilizando variáveis de ambiente no ReactJS

Para esta demonstração vamos utilizar um projeto ReactJS criado com o create-react-app, então todas as configurações abaixo são aplicadas para este cenário.

Antes de começarmos tenho uma coisinha a comentar que é muito importante:

• É recomendado que TODA variável de ambiente declarada comece com REACT_APP_.

Definindo variáveis

Para definir nossas variáveis de ambiente precisamos criar um arquivo para agrupar todas elas. Este arquivo deve ser criado na raiz de seu projeto react e deve se chamar .env .

Você vai declarar suas variáveis da seguinte maneira:

REACT_APP_NOME_DA_VARIAVEL=conteudo da variavel

A tipagem de todas as variáveis declaradas são strings. Caso você declare uma variável que tenha o valor false (boolean) quando a sua aplicação precisar dela o valor passado será "false" (string).

Utilizando variáveis de ambiente

Para acessar suas variáveis de ambiente utilizamos process.env.NOME_DA_VARIAVEL. Por padrão sempre terá definida uma variável interna NODE_ENV, está variável é quem diz em que ambiente você está trabalhando e ela não pode ser alterada.

Em process.env.NODE_ENV podemos ter os valores: test | production | development. Estes valores estão ligados aos comandos de execução da aplicação:

• yarn start → development
• yarn test → test
• yarn build → production

Esta variável é utilizada para tomar decisões dependendo o ambiente em execução. Por exemplo, desabilitar o uso do analytics em ambiente de testes ou desenvolvimento.

Portanto podemos voltar ao exemplo passado e modifica-lo. Digamos que declaramos uma variável ambiente chamada REACT_APP_LINK_API contendo a URL da API. Utilizaremos ela da seguinte maneira:

//REQUISIÇÃO PARA ALGUMA COISA
const response = await fetch(process.env.REACT_APP_LINK_API);
const data = await response.json();

Neste ponto pode surgir a dúvida: Mas eu tenho apenas um arquivo .env com a variável REACT_APP_LINK_API que contem apenas um valor, como adiciono as outras URLs?

É nesse ponto que teremos que diferenciar os ambientes com arquivos .env diferentes

Diferenciando ambientes

Digamos que temos dois ambientes: desenvolvimento e produção. Ambos utilizam a mesma variável porém com valores diferentes. Teremos então que ter dois arquivos:

• .env.production: Irá conter valores das variaveis para produção
• .env: Irá conter valores das variaveis para desenvolvimento

É recomendado que ambos tenham as mesmas variáveis para evitar futuros erros. Ou seja, teremos:

//.env
REACT_APP_LINK_API=http://localhost:3333

//.env.production
REACT_APP_LINK_API=https://minha-api.com.br

Show né? 🤔🤔🤔

Agora para ver tudo funcionando temos que instalar um carinha chamado env-cmd como dependência de desenvolvimento e adicionar a seguinte configuração para cada script de execução do package.json.

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

A partir deste momento, quando executado yarn start as variaveis ambiente de desenvolvimento serão carregadas e quando executado yarn build as variaveis de produção serão carregadas.

TOOOOP! 😍

Agora esta tudo automatico, não precisamos mais comentar aquela linha de requisição para a API com a URL de produção quando estamos em desenvolvimento!!!

Curtiu esse post? Ficaria muito feliz em receber o feedback de vocês! Pode deixar um comentario se curtiu ou não curtiu. Dicas construitivas são super bem-vindas! Espero que eu tenha conseguido ajudar alguem. Até o próximo!! 🥰

REFERENCIAS:

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