Variáveis de Ambiente no ReactJS (.env)

Variáveis de Ambiente no ReactJS (.env)

Um dos assuntos muitas vezes esquecidos (e até mesmo ignorados) pelos portais que ensinam ReactJS, é o uso de variáveis de ambiente em suas aplicações feitas com ReactJS.

Uma variável de ambiente é um arquivo que armazena um valor dinâmico, usualmente empregado na sua aplicação para fornecer informações valiosas (também confidênciais) que deverão estar longe dos olhares indiscretos do seu usuário.

O Framework do ReactJS, por padrão, já possui um mecanismo integrado de acesso a essas variáveis de ambiente. 

O que nos ajuda a garantir uma segurança a mais na nossa aplicação, permitindo que ela se comporte de maneiras diferentes com base no ambiente que a sua aplicação está rodando, seja ele:

Dito isto, vamos mergulhar nessas variáveis de ambiente aprendendo a utilizá-las de maneira eficaz em nossos projetos 😊

O que são variáveis de ambiente?

Variáveis de ambiente nada mais são do que um arquivo chamado .env que geralmente fica localizado na pasta raiz da sua aplicação em ReactJS.

Caso a sua aplicação, por padrão, ela não conte com um arquivo .env, você pode criá-lo sem muitos problemas, que o próprio framework já será capaz de localizá-lo.

Essa variável acaba se tornando uma peça chave fundamental durante o desenvolvimento das suas aplicações em ReactJS.

Pois elas sao variáveis que definimos fora do seu escopo do aplicativo, ao mesmo tempo que podem ser usadas dentro dele.

Ficou confuso? Considere essas variáveis como mãos invisíveis que te ajudam entregando informações essenciais para um bom funcionamento da sua aplicação, de forma totalmente segura e organizada.

Observação: Comece criando um arquivo chamado .env na pasta raiz do seu projeto em ReactJS. Nesse primeiro momento, iremos deixar este arquivo vazio.

Por que usar variáveis de ambiente?

Vamos supor que você tenha uma chave de acesso que será usada por uma API durante a sua aplicação:

Vamos supor também, que em diferentes componentes, você precisa acessar essa chave de acesso. Então vamos imaginar que temos 5 componentes dentro da nossa aplicação:

Cada qual faz uma chamada em um endpoint diferente de uma mesma API, como por exemplo:

Como em cada endpoint você precisa passar a sua chave de acesso (Autorization Key) no header da sua requisição, talvez você faça isso de duas formas:

Método 1) Você pode definir uma constante em cada um dos services ou componentes que realizam as chamadas de API:

const Dashboard = () => {
 const authKey = "FF908-98UIO-KK97";

 //Restante do código...
}

export default Dashboard;

Método 2) Você pode criar um contexto de modo a definir a chave de acesso apenas única vez:

const Dashboard = () => {
 const { authKey } = useContext(MyPreferencesContext);

 //Restante do código...
}

export default Dashboard;

Método 3) Você pode usar o service HttpService que criamos nesta lição de modo a definir a sua chave apenas uma vez.

Ambos os métodos funcionam perfeitamente, maaaas, com alguns poréns:

No método 1, se a chave de acesso mudar, você vai precisar fazer alterações manuais em cada um dos 5 componentes. Já no método 2 e 3, caso a chave mude, você também vai precisar fazer alterações manuais no arquivo que representa o seu contexto/Serviço;

Enquanto é você quem faz essas alterações, até vai, o problema é que nem sempre será você quem vai fazer isso.

Imagina o time de arquitetura que não sabe bulhufas sobre ReactJS e Javascript, tendo que localizar o arquivo de contexto ou o arquivo de serviço, precisando alterar o valor da sua chave de acesso diretamentre no código, simplesmente não dá né?

Ou pior... o seu cliente final na qual você entregou o projeto, e que não sabe nada de programação tendo que editar a lógica do seu código...

Foi pensando nisso que as variáveis de ambiente surgiram, pois com elas nós temos uma estrutura super simples de chave e valor, feita exclusivamente para armazenar tais informações:

AUTORIZATION_KEY=FF908-98UIO-KK97

Essa estrutura é tão simples que até um leigo na área consegue entender que a chave AUTORIZATION_KEY está armazenando o valor FF908-98UIO-KK97.

Além disso, quando colocamos essas informações dentro de um arquivo .env, estamos garantindo que tais informações ali existentes não sejam visíveis para todos, o que garante uma confidencialidade maior.

Portanto, graças às variáveis de ambiente, temos então o método 4, na qual criamos um arquivo para dispor as informações que nossa aplicação necessita, onde qualquer um possa fazer alterações de maneira simples, sem precisar abrir a lógica do nosso código.

Tipos de variáveis de ambiente

Variáveis de ambiente não só se limitam ao ReactJS, como também são amplamente usadas em outras linguagens de programação!

Elas, por sua vez, podem ser divididas em duas grandes categorias:

Variáveis de Ambiente definidas pelo sistema

Esses tipos de variáveis são predefinidas pela sua aplicação em questão, como as variáveis PATH, HOME, PORT, que são mais comuns em sistemas operacionais Unix/Linux, e geralmente não são acessíveis diretamente pelo JavaScript em um ambiente de navegador, ou mesmo em um ambiente NodeJS padrão.

Elas nada mais são que "configurações padrão" do seu sistema, ajudando a orientar suas aplicações sobre como procurar determinadas coisas ou caminhos.

Variáveis de Ambiente definidas pelo usuário

Quando me refiro ao usuário, estou me referindo a você DESENVOLVEDOR, responsável por dar a vida a sua aplicação.

É aqui que entra o famoso arquivo .env, onde podemos declarar qualquer tipo de informação desde uma número de porta, um segredo e até mesmo uma chave de API.

Elas serverm como post-its pessoais que nos ajudam a armazenar dados de forma global por toda a sua aplicação.

4 motivos de se usar variáveis de ambiente em seus projetos

No mundo do ReactJS, aplicações consideradas de alta complexidade ou profissionais, essencialmente contam com variáveis de ambiente.

Logo, é bom que também façamos a sua utilização 😇

Guardam segredos como ninguém

As variáveis de ambiente atuam como agentes confidenciais em aplicações para web.

Quando você está lidando com dados sensíveis, como chaves de API ou credenciais de banco de dados, é necessário manter essas informações seguras, e a única forma de se fazer isso é por meio de variáveis de ambiente.

Elas permitem que você proteja essas "informações vitais", permitindo que você às utilize dentro de sua aplicação, sem expô-las dentro do seu código fonte.

Faz parte de um dos conceitos da arquitetura limpa

Às variáveis de ambiente ajudam a manter uma clara demarcação entre configuração e lógica da aplicação, levando a um código que é mais fácil de gerenciar, ler e depurar.

Essa limpeza contribui para um processo de desenvolvimento eficiente, pois todas as informações ditas confidênciais estão dentro de um só lugar.

Seu código não cria dependências em ambientes diferentes

Um dos aspectos é a facilitadade em que ocorre as transições entre diferentes ambientes, como desenvolvimento, teste e produção.

Onde cada ambiente pode ter suas próprias configurações únicas, gerenciadas convenientemente através dos arquivos .env específicos para cada um.

Por exemplo, você pode ter um arquivo .env que contém configurações que deverão ser usadas em um ambiente local (localhost), e outro dedicado a configurações que devem ser usadas em um ambiente de produção (dentro do servidor).

Mais personalização

Variáveis de ambiente permitem um nível de personalização que realmente personaliza sua aplicação.

Você pode definir essas variáveis de acordo com suas necessidades, tornando-as o ajuste perfeito para sua aplicação, assim como um terno feito sobn medida para você.

Agora chega de papo, e vamos correndo criar essas variáveis de ambiente 😝

Criando seu projeto de testes

Antes de começarmos, vamos criar um novo projeto em ReactJS dedicado a esta lição. No meu caso criei um novo projeto chamado de variaveis-de-ambiente:  

npx create-react-app variaveis-de-ambiente

Após isso, não se esqueça de fazer aquela limpeza do código, e também aquela organizada nas pastas do src (organização por funcionalidade) 😁

Trabalhando com arquivos .env

A primeira etapa consiste em criar um arquivo chamado de .env dentro da pasta raiz do seu projeto em ReactJS.

E não, atualmente o ReactJS não cria de forma padrão esse tipo de arquivo pra gente, repassando tal função para nós, meros desenvolvedores.

Feito isso, se liga nessa informação abaixo:

TODA E QUALQUER CHAVE DEFINIDA NO ARQUIVO .ENV EM UMA APLICAÇÃO EM REACTJS DEVE SEMPRE COMEÇAR COM REACT_APP_

TODA E QUALQUER CHAVE DEFINIDA NO ARQUIVO .ENV EM UMA APLICAÇÃO EM REACTJS DEVE SEMPRE COMEÇAR COM REACT_APP_

TODA E QUALQUER CHAVE DEFINIDA NO ARQUIVO .ENV EM UMA APLICAÇÃO EM REACTJS DEVE SEMPRE COMEÇAR COM REACT_APP_

Sim, precisei repetir isso 3 vezes para que você não se esqueça dessa pequena regra!

Por exemplo:

Percebe que todas essas chaves sempre começam com REACT_APP_?

Isso é obrigatório (pelo menos no ReactJS), pois é uma convenção recomendada, uma vez que facilita a distinção entre as variáveis de ambiente específicas do ReactJS e outras variáveis de ambiente que podem estar presentes no sistema operacional, ou em outros contextos de desenvolvimento.

Entretanto, se declarmos uma variável sem essa convênção... bem, o ReactJS simplesmente não encontra a chave 🤣

//Essas chaves nunca serão identificadas pelo ReactJS

API
SECRET
AUTH_KEY

Definindo suas variáveis de ambiente

Agora que você já sabe o que fazer, basta abrir o arquivo .env e começar a criar suas chaves, no meu caso eu criei 5:

REACT_APP_NOME=micilini
REACT_APP_RANK=100
REACT_APP_SECRET="Micilini é DEZ!"
REACT_APP_KEY="@090OALK''JJ3"
REACT_APP_SITE=https://micilini.com/

Note que todas as chaves estão usando o operador de atribuição (=) e definindo seus valores, onde cada um deles estão sendo separados por uma quebra de linha.

Note também que podemos podemos definir nossas chaves dentro de aspas duplas, o que representa uma string de fato (Observação: isso não é recomendado, mas funciona!)

Usando suas variáveis de ambiente

O uso dessas variáveis é tão simples quando chamar um objeto em Javascript, por exemplo:

const nome = process.env.REACT_APP_NOME

Usando a variável global chamada process, podemos acessar a chave env que contém todas as configurações definidas no arquivo .env.

Abaixo eu criei um exemplo diretamente no App.js para vermos o seu funcionamento:

function App(){

 function mostraVariaveisDeAmbiente(){
 //Mostra todas as variáveis de ambiente
 console.log("Variáveis de ambiente: ", process.env);

 //Mostra variáveis de ambiente específicas
 console.log("Variável de ambiente REACT_APP_NOME: ", process.env.REACT_APP_NOME);
 console.log("Variável de ambiente REACT_APP_RANK: ", process.env.REACT_APP_RANK);
 console.log("Variável de ambiente REACT_APP_SECRET: ", process.env.REACT_APP_SECRET);
 console.log("Variável de ambiente REACT_APP_KEY: ", process.env.REACT_APP_KEY);
 console.log("Variável de ambiente REACT_APP_SITE: ", process.env.REACT_APP_SITE);

 }
 return(
 <>
 <h1>Variáveis de ambiente</h1>
 <button onClick={mostraVariaveisDeAmbiente}>Mostrar variáveis de ambiente no console</button>
 </>
 );
}

export default App;

Veja um outro exemplo de uso de uma variável de ambiente dentro de uma requisição via Axios:

useEffect(() => {

 const fetchData = async () => {

 const response = await axios.get(`https://micilini.com/data?api_key=${process.env.REACT_APP_API_KEY}`);

 setData(response.data);

 };

 fetchData();

 }, []);

Trabalhando com variáveis de ambiente em diferentes ambientes

Em tópicos anteriores foi dito que nós podemos definir diversas variáveis de ambiente em diferentes tipos de ambiente, como ambiente de desenvolvimento, de testes e produção.

Mas como isso funciona na prática? Simples, você pode criar diversos arquivos .env com nomes especificos, por exemplo:

É importante ressaltar que o ReactJS segue a hierarquia acima (de baixo pra cima), nesse caso, se ele não encontra o arquivo .env.production, ele parte para o .env.test até chegar no modelo padrão que é o .env. 

Vamos ver um exemplo prático entre algumas diferenças dos arquivos .env:

.env.production:

REACT_APP_API_BASE_URL=https://api.producao.com/

.env.development:

REACT_APP_API_BASE_URL=https://api.desenvolvimento.com/

Quando sua aplicação estiver em modo de desenvolvimento ou produção o ReactJS irá escolher automaticamente qual arquivo que será usado.

Existem ainda aquelas aplicações que possuem um arquivo chamado de .env.example, que representa um exemplo de quais chaves deverão ser setadas dentro de um arquivo .env:

REACT_APP_NOME=
REACT_APP_RANK=
REACT_APP_SECRET=
REACT_APP_KEY=
REACT_APP_SITE=

Note que as chaves estão atreladas a valores vazios, pois o objetivo desse arquivo é apenas instruir o desenvolvedor sobre quais variáveis o sistema precisa para rodar.

Criando variáveis de ambiente de uma maneira saudável

Para criar uma aplicação organizada, saudável e de fácil manutenção, você precisa mapear suas variáveis de ambiente com nomes legíveis e sempre em letras maiúsculas.

Dê nomes descritivos às suas variáveis de ambiente e que fazem sentido não só pra você, quanto também para outros desenvolvedores que irão trabalhar em cima do seu código.

Por exemplo, se você estiver usando uma API voltada para uma aplicação de restaurante, em vez de mapear a sua váriavel como REACT_APP_API_KEY, opte por um nome mais especifico e legível como: REACT_APP_RESTAURENT_API_KEY.

Uma outra boa prática está relacionado ao não adiconamento de strings ou caracteres que possuam espaço em seus valores, como por exemplo:

// Evite isso

REACT_APP_API_KEY="12345"
REACT_APP_SECRET="oim 92m3d 29nd2 nd9d"

// Faça isso em vez disso

REACT_APP_API_KEY=12345
REACT_APP_SECRET=oim92m3d29nd2nd9d

É importante ressaltar que os valores existentes dentro dos arquivos .env são tratados como strings, portanto, se você colocar seus valores entre aspas (sejam elas duplas ou simples) ou quem saber inserir espaços em branco, tais valores podem gerar resultados inesperados e bugs difíceis de rastrear.

Vai por mim, experiência própria...

Importante: Não faça o upload de arquivos .env para repositórios online

Sim, é isso mesmo que você leu!

Arquivos .env costumam ter informações sensíveis, tanto é que no arquivo .gitignore do Git, por padrão tais arquivos NÃO devem ser upados para repositorios públicos ou privados.

Sendo assim, antes de realizar um GIT PUSH ou um PULL REQUEST, certifique-se de que o arquivo .env não está sendo enviado também.

Beleza... então como eu faço para enviar o arquivo .env, uma vez que a minha aplicação depende dele?

Se você trabalha com um time de desenvolvimento, sempre passe esses arquivos de maneira segura (e-mail, slack ou qualquer outro canal de segurança) entre vocês.

Se é você quem coloca sua aplicação online, evite incluir o envio desse arquivo diretamente em técnicas de CI/CD, opte por fazer o upload na pasta raiz do seu projeto de maneira manual.

Como alternativa você pode enviar o arquivo .env.example em reposirórios online, para que os futuros devs ou arquitetos que forem clonar o seu repositorio, tenham uma ideia de quais variáveis de ambiente a sua aplicação necessite para rodar.

Arquivos da lição

Os arquivos dessa lição podem ser encontrados neste repositório do GitHub.

Conclusão

Nesta lição você aprendeu a grande importância de se usar variáveis de ambiente em sua aplicação em ReactJS.

Te aguardo na próxima aula 😆