Capa por FLY:D no Unsplash

J deixou vazar alguma chave de segurana porque subiu alguma alterao e esqueceu de apagar o contedo sensvel? Usar variveis de ambiente evita que coisas assim aconteam. Mas, como elas funcionam no React? Vem comigo!

Sumrio

• O que so Variveis de ambiente
• Como funcionam
• Como utilizar

O que so Variveis de Ambiente

Variveis de ambiente so um conjunto de valores que geralmente so definidos para configuraes de uma aplicao. Exemplos: Dados de conexo com um banco, a URL de uma API e etc.

O termo "Ambientes" se refere diferentes cenrios em que uma aplicao pode estar sendo executada. Os mais comuns so: desenvolvimento, teste, homologao, e produo. Cada um deles pode exigir diferentes configuraes, e por isso feita essa diviso. Voc uma varivel na aplicao que, em diferentes ambientes, ter valores especficos para aquele cenrio.

Como funcionam

Para configurar variveis de ambiente em uma aplicao React voc precisa criar um arquivo na raiz da aplicao com o nome .env. Primeiro, certifique-se de que est na pasta-raiz do seu projeto, onde ficam os arquivos package.json, .gitignore e etc. Se preferir criar por linha de comando, utilize um dos comandos abaixo, de acordo com seu sistema operacional:

# MacOS ou Linuxtouch .env# Windowstype NUL > .env

Agora, voc ver o arquivo vazio na pasta-raiz do seu projeto. Para criar uma varivel de ambiente, voc deve utilizar o prefixo REACT_APP_. Por exemplo: Se voc deseja criar uma varivel API_URL, ela deve ser nomeada como REACT_APP_API_URL, pois a react-scripts s faz a leitura das variveis que usam esse prefixo.

Como utilizar

Vamos supor uma aplicao que precise de variveis de ambiente para usar uma API para usar com o Axios. No se preocupe com o que axios e o que API, foque em entender a parte das variveis. Ser preciso configurar a porta, a url base e a verso de uma API. Logo, nosso arquivo .env ficaria da seguinte forma:

# Arquivo .envREACT_APP_API_BASEURL = https://mydomain.comREACT_APP_API_PORT = 8888REACT_APP_API_VERSION = v2

E agora, para configurar nossa instncia do Axios, podemos utilizar nossas variveis de ambiente:

// Arquivo axios.js, apenas um exemploconst url = process.env.REACT_APP_API_BASEURLconst port = process.env.REACT_APP_API_PORTconst version = process.env.REACT_APP_API_VERSIONconst api = axios.create({    baseURL: `${url}:${port}/${version}/`})export default api;

E pronto. Nossas variveis de ambiente esto configuradas e prontas para serem utilizadas em toda a aplicao. Porm, ainda temos dois pontos importantes:

Para evitar que seu arquivo .env seja enviado para um repositrio remoto, importante adicion-lo ao .gitignore,dessa forma:

# Arquivo .gitignore# ... outros valores.env

E, para garantir que outras pessoas sabero configurar as variveis de ambiente, crie um arquivo .env.example, com as variveis sem valor definido, dessa forma:

# Arquivo .env.exampleREACT_APP_API_BASEURL = https://mydomain.comREACT_APP_API_PORT = 8888REACT_APP_API_VERSION = v2

Consideraes

importante lembrar que variveis de ambiente configuradas em containers e ambientes cloud(Heroku, Vercel, Netlify, etc) tambm so reconhecidas, em tempo de build. Agora que voc j sabe disso, no vai mais precisar se preocupar em apagar valore sensveis toda vez que for fazer algum commit.

Gostou deste artigo? Me siga para mais contedos como esse!

Minhas redes sociais:

Twitter | Instagram | Youtube.

At o prximo artigo!