Quickstart

Init CLI (recommended)

npm init fatima

Manual Setup, takes 2 minutes.

Installation

npm install fatima

Configuration file

Let's load some stuff from .env, declare a publicPrefix and then validate everything with zod.

First create your file env.config.ts file:

env.config.ts

import { config, adapters } from "fatima";
 
type Environment = "development" | "staging" | "production";
 
export default config<Environment>({
  client: {
    publicPrefix: "NEXT_PUBLIC_",
  },
  load: {
    development: [adapters.local.load(".env")],
  },
  environment: () => process.env.NODE_ENV ?? "development",
});

For more information about the environment function, check Environment Mixing.

Generate

pnpm fatima generate

Path Alias

Make sure you can import env from anywhere in your project without big relative imports:

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "env": ["./env.ts"]
    }
  }
}

Add validation

env.config.ts

import { config, adapters, validators } from "fatima";
import { z, ZodType } from "zod";
import { EnvRecord } from "env";
 
// This will make sure that your constraint is typesafe
type Constraint = Partial<EnvRecord<ZodType>>;
 
const constraint = z.object<Constraint>({
  NEXT_PUBLIC_URL: z.string().url(),
  NODE_ENV: z.enum(["development", "preview", "production"]),
  TZ: z.string(),
});
 
export default config({
  load: {
    development: [adapters.local.load(".env")],
  },
  validate: validators.zod(constraint),
});

Validate

pnpm fatima validate

Go on and use it

route.ts

import { env } from "env";
import { Response } from "server";
 
export async function GET() {
  // Full intellisense 👇
  const port = env.PORT;
 
  return Response(port);
}

Run your app with fatima

This will load, generate and inject the environment variables into your app.

package.json

{
  "scripts": {
    "dev": "fatima dev -- node index"
  }
}

Add env to your `.gitignore`

You should gitignore your env and always generate it before building/installing.

gitignore

env.ts

Overview

At the end of the setup, your project should look like something around this:

env.config.ts

env.ts

package.json

tsconfig.json

On this page