ConfigGenerator

React Environment Generator

Generate safe environment variables and Zod runtime validation logic for React, Next.js, and Vite apps.

The base URL for your frontend to make API requests.

The canonical URL of your frontend application.

- Add a boolean flag to easily switch between real APIs and MSW (Mock Service Worker).
- Validates your environment variables at runtime and provides a type-safe `env` object.

WARNING: Do NOT paste real production secrets here. Use placeholder values.

env.ts
1

Overview

How React Environment Variables Work

In frontend development, environment variables are fundamentally different from backend Node.js scripts. Because frontend code is sent to the user's browser, you must explicitly choose which environment variables are safe to expose.

Frameworks solve this by using public prefixes. Any environment variable that starts with a specific prefix (e.g. NEXT_PUBLIC_ for Next.js, VITE_ for Vite) will be bundled into the compiled JavaScript.

Best Practices

  • Zod Runtime Validation: If an environment variable is missing, your app might crash deep within a component. By generating a Zod `env.ts` validator, you can parse `process.env` immediately upon boot. If a required variable is missing, the app refuses to start, preventing silent failures.
  • Vite TypeScript IntelliSense: In Vite, environment variables are accessed via `import.meta.env`. Because Vite doesn't know your custom variables, TypeScript will complain. You must create a `vite-env.d.ts` file that extends `ImportMetaEnv` to get type safety.

Security Recommendations

  • The Public Prefix Danger: Any variable starting with a public prefix is injected into your minified JavaScript bundle. Do NOT prefix private secrets like `NEXT_PUBLIC_DATABASE_URL` or `VITE_STRIPE_SECRET_KEY`.
  • Never commit `.env`, `.env.local`, or `.env.production`. You should only commit `.env.example` so other developers know which keys they need to supply locally.
  • You cannot securely use a private API key in a React client component. You must build a backend API route (like Next.js Route Handlers or a separate Node server), keep the secret on the server, and have your React component fetch from your own API route.

Frequently Asked Questions

Why does the generator ask for private variables?
The generator creates a template for your server-side `.env` file (if you are using a full-stack framework like Next.js). Our validation engine specifically checks to ensure you haven't accidentally pasted a real secret or exposed a private key using a public prefix. No data is sent to our servers.
What is the difference between process.env and import.meta.env?
`process.env` is the standard Node.js way to access environment variables, used by Next.js and Create React App. `import.meta.env` is the standard used by Vite to expose variables to the browser.
Can users see my NEXT_PUBLIC_ variables?
Yes. Any variable prefixed with `NEXT_PUBLIC_` (or `VITE_`, `REACT_APP_`) can be found by anyone inspecting your minified JavaScript bundle in their browser's developer tools. Only store public IDs and URLs here.