How to Configure Vercel Environment Variables for Production in GPT‑Image‑2

To configure Vercel environment variables for the GPT‑Image‑2 production deployment, prefix client‑facing keys with VITE_ in the Vercel dashboard while keeping server‑only secrets un‑prefixed and marked as Sensitive, then redeploy to bake the values into the build.

The GPT‑Image‑2 application is a Vite‑based React project that relies on Vercel Environment Variables for both client‑side configuration and serverless function secrets. Properly distinguishing between browser‑exposed and server‑only variables prevents accidental leakage of API keys while ensuring the frontend can connect to services like Supabase and Google Analytics.

Understanding the VITE_ Prefix Requirement

Vite strictly controls which environment variables reach the browser. Only keys beginning with VITE_ are statically replaced in the client bundle via import.meta.env. This safety mechanism ensures that secret keys used by serverless functions never ship to end users. Serverless functions—such as the Stripe billing webhook at api/billing/webhook.js—read variables at runtime using process.env, which Vercel keeps isolated from the client.

Required Environment Variables

According to the repository’s README.md (lines 30‑46) and .env.example, you must define the following two categories.

Client‑Side Variables (Exposed to Browser)

These values are injected into the frontend bundle and accessed via import.meta.env:

• VITE_SUPABASE_URL – The public Supabase project URL.
• VITE_SUPABASE_ANON_KEY – The anonymous key for Supabase client‑side auth.
• VITE_GA_MEASUREMENT_ID – Google Analytics 4 measurement ID.

In src/supabaseClient.js, the application consumes these variables to initialize the Supabase client:

import { createClient } from '@supabase/supabase-js'

export const supabase = createClient(
  import.meta.env.VITE_SUPABASE_URL,
  import.meta.env.VITE_SUPABASE_ANON_KEY
)

Server‑Side Secrets (Kept Private)

These variables are used exclusively by serverless functions and must never receive the VITE_ prefix:

• SUPABASE_SERVICE_ROLE_KEY – Privileged Supabase key for admin operations.
• STRIPE_SECRET_KEY – Stripe API secret for payment processing.
• STRIPE_WEBHOOK_SECRET – Stripe webhook endpoint secret.
• APIMART_API_KEY – Credential for the APIMart image generation service.
• GOOGLE_ANALYTICS_CLIENT_ID and GOOGLE_ANALYTICS_CLIENT_SECRET – OAuth credentials for GA data access.
• GOOGLE_ANALYTICS_REFRESH_TOKEN – Long‑lived token for GA API calls (generated via scripts/google-analytics-oauth.mjs).
• ALIPAY_APP_ID, ALIPAY_PRIVATE_KEY, ALIPAY_PUBLIC_KEY, ALIPAY_SELLER_ID, and ALIPAY_GATEWAY – Configuration for Alipay payment callbacks.

Optional Administrative Variables

Control admin access and deployment‑specific settings:

• SUPER_ADMIN_EMAILS – Comma‑separated list of email addresses with super‑admin privileges.
• APP_URL – Canonical base URL used for redirect callbacks.
• COMMUNITY_* – Variables governing paid‑community feature flags and pricing.

Step‑by‑Step Vercel Configuration

Follow these steps in the Vercel dashboard to configure your production environment:

1. Open the Vercel dashboard, select the GPT‑Image‑2 project, and navigate to Settings → Environment Variables.

2. Add each variable using its exact, case‑sensitive name from the lists above. Paste the corresponding value into the input field.

3. Select the Production environment checkbox (and optionally Preview/Development) to ensure the variable is available on the live site.

4. Enable “Expose to the browser” only for variables prefixed with VITE_. Vercel will automatically surface these to import.meta.env.

5. Mark server secrets as Sensitive. This masks the value in the Vercel UI and logs, preventing accidental exposure during debugging.

6. Click Save. Vercel triggers a new deployment automatically, baking the environment values into the build artifacts.

Implementation Details in Source Code

The codebase explicitly separates client and server access patterns. In serverless functions like the billing webhook:

// api/billing/webhook.js
export default async function handler(req, res) {
  const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY)
  // Event handling logic...
}

For Google Analytics OAuth setup, the repository includes a helper script that outputs the exact variable name you must paste into Vercel:

// scripts/google-analytics-oauth.mjs
console.log(`
Add this to Vercel Environment Variables as a Sensitive value:
GOOGLE_ANALYTICS_REFRESH_TOKEN=YOUR_REFRESH_TOKEN
`)

The [vercel.json](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/vercel.json) file defines the build pipeline and routing, but does not store sensitive values, ensuring all secrets remain in the encrypted Environment Variables panel.

Summary

• Prefix client variables with VITE_ so Vite injects them into the browser bundle; omit the prefix for server secrets.
• Mark server secrets as Sensitive in the Vercel dashboard to prevent leakage in logs.
• Reference the exact variable names defined in README.md (lines 30‑46) and .env.example to avoid runtime undefined errors.
• Redeploy after saving environment changes to apply them to the production build.

Frequently Asked Questions

Why must client environment variables start with VITE_?

Vite’s build system only exposes variables prefixed with VITE_ to import.meta.env as a security measure. This prevents accidental inclusion of private API keys in the client‑side JavaScript bundle. Variables without this prefix are treated as private and are only accessible to serverless functions via process.env.

How do I generate and add the Google Analytics refresh token?

Run the script at scripts/google-analytics-oauth.mjs locally to complete the OAuth flow. The script will output a GOOGLE_ANALYTICS_REFRESH_TOKEN value. Copy this token into the Vercel dashboard as a Sensitive environment variable; do not commit it to the repository.

What is the difference between Production and Preview environment variables?

Production variables are available only on deployments mapped to your primary domain. Preview variables apply to branch deployments and pull request previews. You can assign different values to each scope, allowing you to use separate Supabase projects or Stripe test keys for staging while keeping production secrets isolated.

How can I verify that environment variables are loaded correctly?

For client variables, open the browser DevTools and check that import.meta.env.VITE_SUPABASE_URL returns the expected string in the console. For server variables, add a temporary console.log(process.env.VARIABLE_NAME) inside a serverless function and check the Vercel Function Logs; sensitive values will be masked, but the presence of the key confirms it is defined.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}