Table of Contents:
Introduction
@t3-oss/env-core is a library that provides a type-safe way to manage environment variables in your application. It uses zod for schema validation and can be used with any framework like Next.js, Nuxt or Agnostic Core (our case).
Create a new React Router app
If you don’t have a React Router, you can create one using the following command:
pnpm dlx create-react-router@latest my-react-router-appInstall libraries
Install the following dependencies:
pnpm i @t3-oss/env-core zod -EClient-side environment variables
- Create a
.envfile in the root of your project:
# 📄 .env
VITE_HELLO="Hello from env variable"- Create a new file named
env.public.tsin theappdirectory. This file will contain the schema for your public environment variables:
// 📄 env.public.ts
import { z } from 'zod';
import { createEnv } from '@t3-oss/env-core';
export const envPublic = createEnv({
clientPrefix: 'VITE_',
client: {
VITE_HELLO: z.string()
//...
},
runtimeEnv: import.meta.env,
emptyStringAsUndefined: true
});- Usage:
// 📄 routes/_index.tsx
import { envPublic } from '@/env.public';
const Homepage = () => {
return <p>{envPublic.VITE_HELLO}</p>;
};
export default Homepage;Server-side environment variables
- Create a
.envfile in the root of your project:
# 📄 .env
DATABASE_URL=""- Create a new file named
env.server.tsin theappdirectory. This file will contain the schema for your server environment variables:
// 📄 env.server.ts
import { z } from 'zod';
import { createEnv } from '@t3-oss/env-core';
export const envServer = createEnv({
server: {
DATABASE_URL: z.string().url(),
NODE_ENV: z.enum(['development', 'test', 'production']).default('development')
},
runtimeEnv: process.env,
emptyStringAsUndefined: true
});- Usage:
// 📄 routes/api.hello.ts
import { envServer } from '@/env.server';
export const loader = async () => {
return new Response(`Node Env: ${envServer.NODE_ENV}`);
};🚀 Ready.