SolidJS•5mo ago

Using zod to validate env vars

Is there a pattern similar to the one recommend in the React world for accessing env vars only after they have been parsed & checked by zod? Something like this: https://creatures.sh/blog/env-type-safety-and-validation/#validating-environment-variables ------------------------------------- What have I tried? I've read: https://docs.solidjs.com/configuration/environment-variables but here the type safety doesn't make it so the server won't start without those variables (which is what I'd prefer). Moreover Zod also enables safety checks like checking that a string is a URL or is a specific set of possible strings that just defining the types doesn't.

12 Replies

TaQuanMinhLong•5mo ago

:Worry_Think: Does putting the envSchema.parse within entry-server file work?

Atila•5mo ago

the instructions in that post are for any JS app, so it works the same way for Solid for TS, you can also extend the global.d.ts like such:

declare namespace NodeJS {
  interface ProcessEnv {
    readonly NODE_ENV: "development" | "production";
    readonly AUTH_URL: string;
    readonly VITE_AUTH_PATH: string;
    readonly GITHUB_CLIENT_ID: string;
    readonly GITHUB_CLIENT_SECRET: string;
    readonly AUTH_SECRET: string;
  }
}

interface ImportMetaEnv {
  readonly VITE_AUTH_PATH: string;
}

declare namespace NodeJS {
  interface ProcessEnv {
    readonly NODE_ENV: "development" | "production";
    readonly AUTH_URL: string;
    readonly VITE_AUTH_PATH: string;
    readonly GITHUB_CLIENT_ID: string;
    readonly GITHUB_CLIENT_SECRET: string;
    readonly AUTH_SECRET: string;
  }
}

interface ImportMetaEnv {
  readonly VITE_AUTH_PATH: string;
}

sh03OP•5mo ago

I have a module like the one described in the post but if I import it in a component then the hydration seems to get blocked or JS somehow can't run anymore and only the SSR page is rendered. Probably because it accesses process.env from the top level or something. No errors, nothing. And put it in a context of some sort? or how were you imagining accessing it from other modules?

TaQuanMinhLong•5mo ago

It's just for the server's modules So in any server context, it should be within process.env It's expected to run once only before everything's ever started :Worry_Think:

sh03OP•5mo ago

Oh you mean just validate it there and then use process.env when you need it? If so, then I was wondering if I could instead of using process.env (which is untyped) use env (a custom variable) which is the result of z.parse So that I both have env validated and type safe

TaQuanMinhLong•5mo ago

As soon as you parsed

envSchema.parse(process.env)

envSchema.parse(process.env)

You're expecting it to have required ENV variables Then after that you can just

declare global {
    namespace NodeJS {
        interface ProcessEnv extends Zod.infer<typeof envSchema> {}
    }
}

declare global {
    namespace NodeJS {
        interface ProcessEnv extends Zod.infer<typeof envSchema> {}
    }
}

Your process.env is now typed

sh03OP•5mo ago

It doesn't seem as ergonomic as just having an export const env = envSchema.parse(process.env) but it will work, thanks 👍

TaQuanMinhLong•5mo ago

:Worry_CoffeeHMM:

sh03OP•5mo ago

Don't 😟 be 🙂

TaQuanMinhLong•5mo ago

:Worry_CoffeeSmile:

MALEV0L3NT•2mo ago

I know this is very late for this thread, but I happened to come across this question and I think https://env.t3.gg/docs/introduction could be something like what you're looking for

Env

Never build your apps with invalid environment variables again. Validate and transform your environment with the full power of Zod.

MALEV0L3NT•2mo ago

Here's an example of how I've used it within a sold-start app (following the t3-env agnostic core documentation):

// ./src/env.ts
import { createEnv } from "@t3-oss/env-core";
import { z } from "zod";

export const env = createEnv({
  server: {
    DB_URL: z.string(),
  },
  runtimeEnv: process.env,
  emptyStringAsUndefined: true,
});

// ./src/env.ts
import { createEnv } from "@t3-oss/env-core";
import { z } from "zod";

export const env = createEnv({
  server: {
    DB_URL: z.string(),
  },
  runtimeEnv: process.env,
  emptyStringAsUndefined: true,
});

// ./src/db/index.ts
import { drizzle } from "drizzle-orm/postgres-js";
import postgres from "postgres";

import { env } from "~/env";

const client = postgres(env.DB_URL);
export const db = drizzle({ client });

// ./src/db/index.ts
import { drizzle } from "drizzle-orm/postgres-js";
import postgres from "postgres";

import { env } from "~/env";

const client = postgres(env.DB_URL);
export const db = drizzle({ client });

This ensures typesafety of env vars using Zod and gives good error messages in case any are invalid or missing

Gaming

Programming

Using zod to validate env vars

Did you find this page helpful?