ReactJS + Variáveis de ambiente | Valchan
Home

23 de fevereiro de 2021 • 4 min de leitura

ReactJS + Variáveis de ambiente

Utilizando variáveis de ambiente customizáveis e default no React

Você pode adicionar várias configurações de desenvolvimento e produção definindo variáveis de ambiente em seu shell ou utilizando um arquivo .env. Informações tiradas da própria documentação do Create React App.

Padrão:

Por padrão, estas são as variáveis já existentes do React:
✅ = Usado
🚫 = Ignorado
CRA = Create React App

Variável Dev Prod Uso
BROWSER ✅ 🚫 Por padrão, o CRA abrirá o navegador padrão do sistema, favorecendo o Chrome no macOS. É possível especificar um navegador para substituir esse comportamento ou defini-lo como none para desativá-lo completamente. Se você precisar personalizar a forma como o navegador é iniciado, pode especificar em um script. Quaisquer argumentos passados para o npm start também serão passados para este script, e a url onde seu aplicativo é servido será o último argumento. O seu arquivo de script deve conter a extensão .js.
BROWSER_ARGS ✅ 🚫 Quando a variável de ambiente BROWSER é especificada, quaisquer argumentos que você definir para esta variável de ambiente serão passados para a instância do navegador. Vários argumentos são suportados como uma lista separada por espaço. Por padrão, nenhum argumento é passado para os navegadores.
HOST ✅ 🚫 Por padrão, o CRA se liga a todos os nomes de host no dispositivo (localhost, endereço de rede LAN, etc.). Você pode usar esta variável para especificar um host diferente.
PORT ✅ 🚫 Por padrão, o CRA tentará escutar na porta 3000 ou solicitará que você tente a próxima porta disponível. Você pode usar esta variável para especificar uma porta diferente.
HTTPS ✅ 🚫 Quando definido como true, o CRA executará no modo https.
WDS_SOCKET_HOST ✅ 🚫 Ao ser setado, o CRA executará com o websocket hostname que foi configurado. Normalmente, o webpack-dev-server padrão do hostname SockJS é window.location.hostname. Além disso você pode utilizar esta variável em dev local em mais de um projeto CRA ao mesmo tempo.
WDS_SOCKET_PATH ✅ 🚫 Ao ser setado, o CRA executará com o websocket path que foi configurado para o módulo de hot reloading. Normalmente, o webpack-dev-server padrão do pathname SockJS é /sockjs-node. Além disso você pode utilizar esta variável em dev local em mais de um projeto CRA ao mesmo tempo.
WDS_SOCKET_PORT ✅ 🚫 Ao ser setado, o CRA executará com o websocket port que foi configurado para o módulo de hot reloading. Normalmente, o webpack-dev-server padrão do port SockJS é window.location.port. Além disso você pode utilizar esta variável em dev local em mais de um projeto CRA ao mesmo tempo.
PUBLIC_URL ✅ ✅ CRA assume que seu app está hospedado na raiz ou em um subpath especificado no package.json. Normalmente, o CRA ignora o hostname. Você pode usar esta variável para forçar os recursos a serem referenciados literalmente a url que você fornecer(hostname incluído). Isto pode ser particularmente útil ao usar um CDN para hospedar seu app.
BUILD_PATH 🚫 ✅ Por padrão, o CRA vai compilar o projeto em um diretório /build adjacente ao seu /src. Você pode utilizar esta variável para especificar um novo caminho para o CRA. O BUILD_PATH deve ser especificado como um caminho relativo à raiz do seu projeto.
CI ✅ ✅ Quando setado para true, o CRA trata os avisos como falhas na compilação. Isso também faz com que o executor de testes não fique ativo inspecionando. Maioria dos CIs setam esta flag por default.
REACT_EDITOR ✅ 🚫 Quando o app quebra em desenvolvimento, você pode ver o erro com um stack trace clicável. Ao clicar nele, o CRA tentará determinar o editor que você está utilizando com base nos processos em execução atuais, e abrirá o arquivo de origem. Se você nunca fez isso, certifique-se de que a variável de ambiente PATH do seu sistema aponta para a pasta bin do seu editor. Você também pode definir como none para desativá-lo.
CHOKIDAR_USEPOLLING ✅ 🚫 Quando setado para true, o inspetor é executado em modo de pesquisa, conforme necessário dentro de uma VM. Use esta opção se o npm start não estiver detectando alterações.
GENERATE_SOURCEMAP 🚫 ✅ Quando setador para false, os sources maps não são gerados no build de produção. Isto resolve os problemas de falta de memória(OOM - Out of Memory) de algumas máquinas menores.
INLINE_RUNTIME_CHUNK 🚫 ✅ Por padrão, o CRA irá incorporar o script de tempo de execução no index.html durante o build de produção. Quando setado como false, o script não será incorporado e será importado como sempre. Normalmente isso é necessário quando se lida com CSP(Content Security Policy).
IMAGE_INLINE_SIZE_LIMIT 🚫 ✅ Por padrão, imagens menores que 10.000 bytes são codificadas como URI de dados em base64 e embutidas no CSS ou no build do artefato do JS. Você pode utilizar esta variável para controlar o tamanho limite em bytes das imagens. Para desativar é só definir a variável como 0.
FAST_REFRESH ✅ 🚫 Quando setado para false, o suporte experimental do Fast Refresh(atualização rápida) é desativando, permitindo assim que você possa ajustar seus componentes em tempo real sem recarregar a página.
TSC_COMPILE_ON_ERROR ✅ ✅ Quando setado para true, você pode executar e compilar projetos em TypeScript normalmente, mesmo se houver erros de verificação de tipo do TypeScript. Estes erros são exibidos como avisos no terminal e/ou no console do navegador.
ESLINT_NO_DEV_ERRORS ✅ 🚫 Quando setado para true, erros do ESLint são convertidos para avisos durante o desenvolvimento. Como resultado, na saída do ESLint não aparecerá mais a sobreposição de erro.
DISABLE_ESLINT_PLUGIN ✅ ✅ Quando setado para true, o eslint-webpack-plugin será completamente desabilitado.
DISABLE_NEW_JSX_TRANSFORM ✅ ✅ Quando setado para true, o JSX transform é desabilitado. Projetos novos utilizam uma versão do React que suporta isto por padrão, mas você pode desativá-lo em projetos existentes se não puder atualizar o React.

Customizáveis:

Quando você deseja adicionar uma váriável customizada, é necessário utilizar na frente:

  REACT_APP_

Exemplo:

  • Setando variaveis via .env:

Antes de tudo é necessário instalar o pacote: dotenv.
E adicionar o código no início de suas configurações:

require('dotenv').config()

Então crie o arquivo .env na raiz do projeto.
Dentro do arquivo adicione as variáveis assim:

  REACT_APP_EXEMPLO=abcdef.

E para utilizar:

  process.env.REACT_APP_EXEMPLO // irá retornar: abcdef
  • Setando variaveis via shell:
# Windows (cmd.exe)
set "REACT_APP_EXEMPLO=abcdef" && npm start

# Windows (Powershell)
($env:REACT_APP_EXEMPLO = "abcdef") -and (npm start)

# Linux, macOS (Bash)
REACT_APP_EXEMPLO=abcdef npm start

Fontes: