Neste artigo você aprenderá a como incluir o arquivo .env em projeto de React, e utilizar as variáveis de ambiente no seu código
Fala programador(a), beleza? Bora aprender mais sobre React JS!
Quando estamos desenvolvendo aplicações web modernas, muitas vezes nos deparamos com a necessidade de utilizar variáveis de ambiente para gerenciar configurações que não devem ser hardcoded ou expostas publicamente.
No React JS, essa gestão pode ser feita com a ajuda de arquivos .env. Neste artigo, abordaremos como implementar e utilizar esse recurso em seu projeto.
O que são Variáveis de Ambiente?
Variáveis de ambiente são essencialmente valores externos que seu código pode consultar para executar uma tarefa específica.
Elas são particularmente úteis para:
- Separar configurações de desenvolvimento, teste e produção;
- Armazenar chaves de API sem expô-las no código-fonte;
- Definir configurações de conexão com banco de dados.
Iniciando com .env no React
O Create React App (CRA) já tem suporte embutido para a leitura de arquivos .env, facilitando o processo.
1. Criando seu arquivo .env
Na raiz do seu projeto React, crie um arquivo chamado .env. Dentro deste arquivo, você pode definir suas variáveis de ambiente usando a seguinte convenção:
REACT_APP_NOME_DA_VARIAVEL=valor_da_variavel
Por exemplo:
REACT_APP_API_URL=https://api.meusite.com.br
Nota: É crucial prefixar suas variáveis com REACT_APP_ para que elas sejam incorporadas em sua aplicação React.
2. Utilizando a variável no seu componente
Para acessar a variável de ambiente no seu código, você pode usar process.env seguido do nome da sua variável.
import React from 'react';
const App = () => {
return (
<div>
<h1>URL da API: {process.env.REACT_APP_API_URL}</h1>
</div>
);
}
export default App;
Variáveis .env para Diferentes Ambientes
Para ambientes distintos, como desenvolvimento, teste e produção, é comum ter diferentes configurações. O React permite que você tenha arquivos .env específicos para cada situação:
.env: Padrão.env.local: Configurações locais.env.development: Desenvolvimento.env.test: Testes.env.production: Produção
Quando você executa o comando npm start, por exemplo, o React irá utilizar as variáveis definidas em .env.development.
Boas Práticas e Cuidados
Nunca exponha informações sensíveis:
Mesmo que o prefixo REACT_APP_ faça com que a variável esteja disponível em sua aplicação React, lembre-se de que tudo que é construído no front-end pode ser visto por usuários.
Portanto, nunca coloque informações sensíveis, como senhas ou chaves privadas, em arquivos .env que serão usados no cliente.
Utilize .gitignore:
Para evitar que suas configurações sejam enviadas para o repositório git, adicione qualquer arquivo .env (exceto o .env.example, se você tiver um) ao seu arquivo .gitignore.
Variáveis padrão com .env.example:
É uma boa prática ter um arquivo .env.example que descreva todas as variáveis necessárias sem fornecer os valores reais.
Isso ajuda outros desenvolvedores a entenderem quais configurações são necessárias.
Utilizando .env no Vite
Se o seu projeto React utiliza o Vite, a maneira de lidar com variáveis de ambiente é um pouco diferente.
No Vite, para expor variáveis de ambiente ao código frontend, você deve prefixar suas variáveis com VITE_.
Essa prática é uma salvaguarda do Vite para garantir que as variáveis de ambiente que não deveriam ser expostas no frontend não sejam incluídas acidentalmente.
Passo 1: No diretório raiz do seu projeto, crie um arquivo chamado .env. Dentro deste arquivo, defina suas variáveis de ambiente, prefixando-as com VITE_. Por exemplo:
VITE_API_URL=https://api.meusite.com.br VITE_CHAVE_SECRETA=12345678
Passo 2: No seu código, você pode acessar estas variáveis através de process.env.NOME_DA_VARIAVEL. Por exemplo:
const apiUrl = process.env.VITE_API_URL; console.log(apiUrl); // Output: https://api.meusite.com.br
Nota Importante: Apenas as variáveis prefixadas com VITE_ estarão disponíveis no código frontend. Qualquer outra variável definida no .env, mas sem este prefixo, não estará acessível.
Passo 3: Sempre que adicionar novas variáveis ou fizer alterações, é uma boa prática reiniciar o servidor de desenvolvimento do Vite para garantir que as novas variáveis sejam reconhecidas.
Quer aprender mais sobre programação? Conheça nosso canal no YouTube:
Conclusão
Chegamos ao fim do artigo sobre o arquivo .env em projeto de React!
Tanto o Create React App quanto o Vite oferecem maneiras robustas de gerenciar variáveis de ambiente em projetos React JS.
O Vite, com sua abordagem de construção mais rápida, é certamente uma opção atraente para muitos desenvolvedores.
Ao seguir este guia, você pode facilmente integrar e gerenciar suas configurações usando arquivos .env em qualquer uma dessas ferramentas.
Está buscando em evoluir como Programador? Confira o nossos cursos de programação.