How to Deploy awesome-gpt-image-2: Complete Guide to Production Setup

Deploy awesome-gpt-image-2 by creating a Supabase project with migrations, setting Vite-prefixed environment variables, and pushing to Vercel, which automatically hosts the React frontend and serverless API functions.

The awesome-gpt-image-2 repository is a Vite-powered React application with serverless API functions designed for AI image generation and community-driven style sharing. This guide walks through the complete production deployment process based on the source code in freestylefly/awesome-gpt-image-2.

Prerequisites and Architecture Overview

Before deploying, understand the three-layer architecture:

• Frontend: React SPA with client-side routing (src/main.jsx, src/community.jsx, src/styles.css)
• Backend API: Vercel serverless functions (api/generate-image.js, api/me.js, api/favorites.js, api/community/*.js)
• Data & Auth: Supabase PostgreSQL database with authentication (supabase/migrations/*.sql, src/supabaseClient.js)

You need accounts at Supabase and Vercel, plus Node.js installed locally.

Step 1: Create and Configure Supabase

The application stores users, credits, payments, and community styles in Supabase.

Create the Project

1. Sign up at supabase.com and create a new project
2. Navigate to the SQL Editor in your Supabase dashboard
3. Execute all migration files from supabase/migrations/ in order:

# Example migration files to run

20260721090000_alipay_webpay.sql
20260721090001_paid_community.sql
20260721090002_case_favorites.sql

These migrations create tables for paid_community, alipay_webpay, case_favorites, and related schemas for the payment and community systems.

Retrieve Connection Credentials

After project creation, copy these values from Project Settings → API:

• SUPABASE_URL (the project URL)
• SUPABASE_ANON_KEY (the public anon key)

You'll inject these into the Vercel deployment in Step 2.

Step 2: Configure Environment Variables

The application uses Vite environment variable injection for both client and server contexts.

Copy the template file and populate your values:

cp .env.example .env.local

Required variables in .env.local or Vercel dashboard:

VITE_SUPABASE_URL=your-supabase-url
VITE_SUPABASE_ANON_KEY=your-supabase-anon-key
VITE_ALIPAY_APP_ID=your-alipay-app-id
VITE_ALIPAY_PRIVATE_KEY=your-alipay-private-key
VITE_OPENAI_API_KEY=your-openai-api-key

Why the VITE_ prefix matters: Vite automatically exposes variables prefixed with VITE_ to the client bundle. The serverless API functions read these same variables at runtime via process.env.

The Supabase client initialization in src/supabaseClient.js relies on these injected values:

// src/supabaseClient.js
import { createClient } from '@supabase/supabase-js'

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

Step 3: Deploy to Vercel

Vercel hosts both the React frontend and the API layer through automatic serverless function detection.

Install Vercel CLI and Authenticate

npm i -g vercel
vercel login

Deploy from Project Root

vercel

Vercel automatically:

• Detects the api/ directory and creates serverless functions for each file
• Builds the Vite React application using vite.config.js
• Applies routing rules from vercel.json

The vercel.json configuration handles SPA routing and API rewrites:

{
  "rewrites": [
    { "source": "/api/(.*)", "destination": "/api/$1" },
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

This ensures React Router handles client-side navigation while API calls reach the serverless functions.

Step 4: Generate Static Site Data (Recommended)

The UI consumes a pre-built JSON file at data/style-library.json containing all community-submitted styles.

To refresh this file after adding new styles or for initial population:

node scripts/generate-site-data.mjs

This script queries the Supabase database and writes data/style-library.json. Commit the updated file to your repository—Vercel rebuilds with the latest data on next deployment.

The api/community/status.js endpoint can also trigger rebuilds dynamically when styles are submitted through the UI.

Step 5: Set Up Alipay Webpay (Optional)

For paid community features, deploy the Alipay sandbox server.

Deploy the Sandbox Server

The repository includes scripts/alipay-webpay-sandbox-server.mjs for payment processing. Deploy to a platform like Render or Railway with these environment variables:

ALIPAY_APP_ID=your-alipay-app-id
ALIPAY_PRIVATE_KEY=your-alipay-private-key
ALIPAY_PUBLIC_KEY=your-alipay-public-key

Update Supabase Configuration

Insert the sandbox endpoint into the alipay_webpay table (created by migration 20260721090000_alipay_webpay.sql) so the frontend can initiate payment flows.

Step 6: Verify Your Deployment

Test the core functionality at your Vercel-provided URL:

1. Authentication: Sign in with Supabase magic link or OAuth
2. Image generation: Use the Generate button, which calls api/generate-image.js:

// src/main.jsx - client-side call
async function generateImage(prompt) {
  const response = await fetch('/api/generate-image', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ prompt })
  })
  const { imageUrl } = await response.json()
  return imageUrl
}

The serverless function at api/generate-image.js forwards the prompt to OpenAI's image API using VITE_OPENAI_API_KEY.

3. Community features: Submit a style via api/community/* endpoints and verify it appears in the style library

Debugging Failed Requests

If API calls fail:

• Check Vercel Function Logs in your Vercel dashboard
• Verify all VITE_ prefixed environment variables are set in Project Settings → Environment Variables
• Confirm Supabase Row Level Security (RLS) policies allow your operations

Key Configuration Files Reference

File	Purpose	Critical For
vercel.json	Routing and build configuration	SPA behavior, API rewrites
vite.config.js	Vite build setup	React + CSS processing
src/supabaseClient.js	Database client initialization	Auth and data operations
api/generate-image.js	OpenAI image generation	Core image generation feature
scripts/generate-site-data.mjs	Static JSON regeneration	Up-to-date style library
supabase/migrations/*.sql	Database schema	All data persistence

Summary

• Supabase setup is required first—run all migrations and capture connection credentials
• Environment variables must use the VITE_ prefix for Vite injection; copy from .env.example
• Vercel deployment is one-command after CLI setup; the api/ directory becomes serverless functions automatically
• Static data generation keeps the style library current via scripts/generate-site-data.mjs
• Alipay integration deploys separately for paid community features

Frequently Asked Questions

What infrastructure does awesome-gpt-image-2 require?

The application requires Supabase for PostgreSQL database, authentication, and real-time subscriptions, plus Vercel for hosting the React frontend and serverless API functions. These are the only two required services. Optional Alipay payment features need an additional Node.js server deployment.

Why must environment variables use the VITE_ prefix?

Vite's build process only exposes environment variables prefixed with VITE_ to the client-side code. This security measure prevents accidental exposure of server secrets. Both the frontend (src/supabaseClient.js) and API functions (api/*.js) read these variables, so the prefix is mandatory for cross-layer configuration.

How do I update the style library after community submissions?

Run node scripts/generate-site-data.mjs from the project root. This queries Supabase and regenerates data/style-library.json. Commit the changes and redeploy to Vercel, or trigger an automatic rebuild via the api/community/status.js?rebuild=true endpoint configured in your deployment.

Can I deploy awesome-gpt-image-2 without paid features?

Yes. Omit the Alipay configuration entirely. The core image generation, community submission, and user authentication flows function without payment integration. Remove or leave blank VITE_ALIPAY_APP_ID and VITE_ALIPAY_PRIVATE_KEY—the code handles missing payment configuration gracefully.

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