Client Setup

Layerfig was originally designed to work on the server side. This is because it relies on configuration files that you commit (which use Node.js APIs) or on environment variables accessed via process.env.

If all you need is a couple of public values, a schema validation library on its own is enough — reach for Layerfig on the client when you want the layering, not just the validation:

// client-config.ts
import { z } from "zod/mini";

const schema = z.object({
  appURL: z.url(),
});

export const config = schema.parse({
  appURL: import.meta.env.PUBLIC_APP_URL,
});

However, if you are already using Layerfig and want to leverage your existing setup, you can achieve a similar result by using ObjectSource and the slots feature.

The advantage of this approach is that you can have separate server-config.ts, client-config.ts, and schema.ts files. The client schema can then be derived from the main schema to include only client-specific properties:

The following example uses z.pick. In Zod Mini this is a top-level function, not a method on the schema.

// client-config.ts
import { ConfigBuilder, ObjectSource, z } from "@layerfig/config/client";
import { configSchema } from "./schema";

const ClientSchema = z.pick(configSchema, {
  appURL: true,
});
type ClientSchema = z.output<typeof ClientSchema>;

export const config = new ConfigBuilder({
  validate: (finalConfig) => ClientSchema.parse(finalConfig),
  runtimeEnv: import.meta.env,
})
  .addSource(
    new ObjectSource<ClientSchema>({
      appURL: "${PUBLIC_APP_URL}",
    })
  )
  .build();