Pular para o conteúdo principal

Environment Variables

O template usa dois arquivos de env em dev local e variáveis do Cloudflare em produção.

Arquivos locais​

ArquivoLido porContexto
.dev.varsWrangler (SSR)Server-side (loaders)
.envViteClient-side (build time)
informação

Em dev local, ambos os arquivos são necessários com as mesmas variáveis.

Variáveis obrigatórias​

# API
API_BASE_URL=https://stage1-api-new.bs2bet.com/v2

# Marca
ORIGIN_DOMAIN=stage1.gli-cactus.com
BRAND_LANGUAGE=pt-br
BRAND_COUNTRY=BRA
BRAND_CURRENCY=BRL
BRAND_TIMEZONE=America/Sao_Paulo

Acesso no código​

Server-side (loaders)​

export async function loader({ context }: Route.LoaderArgs) {
  // Em produção (Cloudflare Workers):
  const env = context.cloudflare?.env;

  // Em dev (fallback para process.env):
  const env = context.cloudflare?.env ?? process.env;
}

Client-side (componentes)​

Variáveis que precisam chegar ao browser são montadas no loader e passadas via EnvProvider:

// No loader:
const clientEnv = {
  API_BASE_URL: env.API_BASE_URL,
  ORIGIN_DOMAIN: env.ORIGIN_DOMAIN,
  BRAND_LANGUAGE: env.BRAND_LANGUAGE,
  BRAND_COUNTRY: env.BRAND_COUNTRY,
  BRAND_CURRENCY: env.BRAND_CURRENCY,
  BRAND_TIMEZONE: env.BRAND_TIMEZONE,
};

// No componente:
import { useClientEnv } from '~/context/env';
const env = useClientEnv();
// env.API_BASE_URL

Cloudflare Workers (produção)​

Em produção, as variáveis são definidas no dashboard do Cloudflare Workers ou via wrangler secret put. O context.cloudflare.env as disponibiliza automaticamente.

Gotchas​

  • .dev.vars não suporta interpolação de variáveis
  • Vite expõe apenas variáveis com prefixo VITE_ ao client — mas nós usamos o padrão clientEnv via loader ao invés de VITE_*
  • O Wrangler lê .dev.vars automaticamente quando roda pnpm dev