mcpField
E
environment-variables

environment-variables

github.com/elie222Development12.8k39 installsUpdated today
Repository

About environment-variables

A development skill documenting how to add environment variables to a project. It covers example values, server and client schemas, and build configuration.

Key features

  1. 01Add variables to .env.example
  2. 02Define server and client schemas in env.ts
  3. 03Configure client runtime environment values
  4. 04Register build environment dependencies in turbo.json

Use cases

  1. 01Adding a server-side API key
  2. 02Adding a client-side feature flag

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/elie222/inbox-zero --skill environment-variables

After installing, type/environment-variablesin Claude Code to confirm it loaded.

Details

From the project README

Environment Variables

This is how we add environment variables to the project:

  1. Add to .env.example:

    NEW_VARIABLE=value_example

  2. Add to apps/web/env.ts:

    // For server-only variables
server: {
  NEW_VARIABLE: z.string(),
}
// For client-side variables
client: {
  NEXT_PUBLIC_NEW_VARIABLE: z.string(),
}
experimental__runtimeEnv: {
  NEXT_PUBLIC_NEW_VARIABLE: process.env.NEXT_PUBLIC_NEW_VARIABLE,
}

  3. For client-side variables:

    • Must be prefixed with NEXT_PUBLIC_
    • Add to both client and experimental__runtimeEnv sections

  4. Add to turbo.json under globalDependencies:

    {
  "tasks": {
    "build": {
      "env": [
        "NEW_VARIABLE"
      ]
    }
  }
}

examples:

  • input: |

    Adding a server-side API key

    .env.example

    API_KEY=your_api_key_here

    env.ts

    server: { API_KEY: z.string(), }

    turbo.json

    "build": { "env": ["API_KEY"] } output: "Server-side environment variable properly added"

  • input: |

    Adding a client-side feature flag

    .env.example

    NEXT_PUBLIC_FEATURE_ENABLED=false

    env.ts

    client: { NEXT_PUBLIC_FEATURE_ENABLED: z.coerce.boolean().default(false), }, experimental__runtimeEnv: { NEXT_PUBLIC_FEATURE_ENABLED: process.env.NEXT_PUBLIC_FEATURE_ENABLED, }

    turbo.json

    "build": { "env": ["NEXT_PUBLIC_FEATURE_ENABLED"] } output: "Client-side environment variable properly added"

references:

  • apps/web/env.ts
  • apps/web/.env.example
  • turbo.json

Comments

Markdown supported