voltar

Trabalhando com Variáveis de Ambiente no Remix e TypeScript

Neste artigo, explicaremos o que são variáveis de ambiente, sua importância no desenvolvimento web com JavaScript e TypeScript. Também abordaremos como usar variáveis de ambiente no Remix, como melhorar sua experiência de desenvolvimento, garantindo que elas existam em seu projeto e que seus tipos estejam corretos.

O que são Variáveis de Ambiente e por que são Importantes?

Variáveis de ambiente são configurações essenciais que variam dependendo de onde sua aplicação está sendo executada. Por exemplo, você pode usar SQLite para desenvolvimento local, enquanto em produção, pode usar PostgreSQL, MySQL ou MariaDB. Nestes casos, sua aplicação precisa reconhecer o ambiente em que está sendo executada e se conectar ao banco de dados correto.

As variáveis nunca devem ser enviadas para sistemas de controle de versão, como o GitHub. Esta prática se justifica pois normalmente as variáveis de ambiente contém informações privadas, como senhas de acesso a banco de dados, entre outras.

Usando Variáveis de Ambiente no Remix

Uma nova aplicação Remix já vem preparada para utilizar as variáveis de ambiente.

Crie um arquivo .env na pasta raiz do seu projeto.

DB_CONNECTION_STRING="mysql://username:password@hostname:port/database"

TIMEOUT=86400

Sempre que fizer alterações no arquivo .env, você precisará reiniciar seu servidor de desenvolvimento para carregar corretamente os novos valores.

Agora vamos acessar essas variáveis de ambiente dentro de nossa rota principal.

// routes/index.tsx

export const loader = () => {
  console.log(process.env.DB_CONNECTION_STRING, process.env.TIMEOUT);
  return null;
};

Atualize seu servidor de desenvolvimento e você verá os valores das variáveis de ambiente registrados no console.

Digitando Variáveis de Ambiente com TypeScript

Embora nossos valores tenham sido obtidos com sucesso, o TypeScript não reconhece seus tipos. Usaremos a popular biblioteca Zod para validar os valores das variáveis de ambiente, e o TypeScript inferirá seus tipos a partir do esquema Zod.

Instale a biblioteca Zod:

yarn add zod

Crie um arquivo env.server.ts dentro da pasta app:

// app/env.server.ts

import { z } from "zod";

const envSchema = z.object({
  DB_CONNECTION_STRING: z.string(),
  TIMEOUT: z.number().positive(),
});

type Env = z.infer<typeof envSchema>;

declare global {
  var ENV: Env;
  interface Window {
    ENV: Env;
  }
}

export function getEnv() {
  return envSchema.parse(process.env);
}

Agora temos um objeto ENV que pode ser usado em toda a aplicação. Para tornar esse objeto globalmente acessível, precisamos popular a variável global ENV no arquivo entry.server.tsx.

// app/entry.server.tsx

import { getEnv } from "./env.server";

global.env = getEnv();

Quando executamos o método getEnv(), estaremos lendo todas as variáveis de ambiente e as fornecendo ao esquema Zod para validação. Caso alguma variável esteja faltando, a aplicação falhará e um Zod Error será mostrado, lhe dando a possibilidade de ir atrás da informação necessária para o bom funcionamento da aplicação.

Diferente do arquivo app/.env, o arquivo app/env.server.ts é enviado ao controle de versão e um ou mais colegas de equipe, ao executar o código, receberão o Zod Error apontando quais variáveis estão faltando e poderão tomar providências para obte-las.

Atualize a rota principal para usar o objeto ENV criado:

// routes/index.tsx

export const loader = () => {
  console.log(ENV.DB_CONNECTION_STRING, ENV.TIMEOUT);
  return null;
};

Agora ao digitar ENV. o seu editor lhe oferecerá todas as opções disponíveis no esquema.

Expondo Variáveis de Ambiente para o Navegador

Às vezes, é necessário expor variáveis de ambiente específicas para o navegador. Vamos criar um método para expor a variável de ambiente TIMEOUT.

Atualize o root.tsx da aplicação para expor a variável de ambiente:

// app/root.tsx

export const loader = () => {
  return json({
    ENV: {
      TIMEOUT: ENV.TIMEOUT,
    },
  });
};

export default function Index() {
  const { ENV } = useLoaderData<typeof loader>();

  return (
    ...
      <body className="h-full">
        <Outlet />
        <script
          dangerouslySetInnerHTML={{
            __html: `window.ENV = ${JSON.stringify(ENV)}`,
          }}
        />
       ...
      </body>
    ...
  );
}

Agora a informação ENV.TIMOUT estará também disponível para seus componentes React, que são executados sempre no servidor e no browser. Caso você tente acessar, nos componentes React, qualquer outra variável de ambiente, a aplicação mostrará um erro. Isso garante que informações sigilosas jamais vazem para o browser.