Squad Front

Appearance

Variáveis de Ambiente (.env) ​

As variáveis de ambiente são fundamentais para configurar o comportamento da aplicação em diferentes contextos ( Desenvolvimento, Staging, Produção) sem alterar o código-fonte.

1. O que é o arquivo .env? ​

O arquivo .env (environment) é um arquivo de texto simples que armazena pares de CHAVE=VALOR. Ele é usado para guardar informações sensíveis ou configurações que mudam de acordo com o ambiente onde o código está rodando.

Por que ele existe? ​

  • Segurança: Protege chaves de API, senhas de banco de dados e segredos.
  • Portabilidade: Permite que o mesmo código funcione em diferentes máquinas com configurações distintas.
  • Praticidade: Centraliza todas as configurações externas em um único lugar.

2. Como configurar ​

No nosso projeto Front-end (Vite/React), as variáveis de ambiente devem seguir um padrão específico para serem expostas ao código.

Passo a passo: ​

  1. Crie um arquivo chamado .env na raiz do projeto.
  2. Adicione as variáveis usando o prefixo VITE_ (obrigatório no Vite):
    env
    VITE_API_URL=https://api.desenvolvimento.com
VITE_SENTRY_DSN=https://chave@sentry.io/123
  3. No código TypeScript, acesse via import.meta.env:
    typescript
    const apiUrl = import.meta.env.VITE_API_URL;

3. Regra de Ouro: NUNCA COMITE O .ENV ​

⚠️ IMPORTANTE: Em hipótese alguma comite o arquivo .env para o Git.

Se você comitar esse arquivo:

  1. Chaves de API e segredos serão expostos publicamente ou para todos com acesso ao repo.
  2. Você pode causar incidentes de segurança graves.
  3. Você sobrescreverá as configurações de outros desenvolvedores.

✅ Como fazer ​

  • Certifique-se de que o .env está no seu .gitignore.
  • Crie um arquivo chamado .env.example com as chaves (sem os valores reais) para que novos desenvolvedores saibam o que configurar.
    env
    # .env.example
VITE_API_URL=
VITE_SENTRY_DSN=

❌ Como não fazer ​

  • Remover o .env do .gitignore.
  • "Hardcodar" chaves de API diretamente no código TypeScript.
  • Compartilhar seu arquivo .env pessoal via Slack ou e-mail (use gerenciadores de senha ou o cofre da equipe).

4. Onde encontrar os valores? ​

Os valores reais para os ambientes de Dev e Staging estão documentados no nosso cofre de senhas ou podem ser solicitados ao Tech Lead da Squad.