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

> Deploy awesome-gpt-image-2 with Supabase, Vite, and Vercel. Follow our complete guide for a seamless production setup of the React frontend and serverless API.

- Repository: [苍何/awesome-gpt-image-2](https://github.com/freestylefly/awesome-gpt-image-2)
- Tags: how-to-guide
- Published: 2026-08-27

---

**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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx), [`src/community.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/community.jsx), [`src/styles.css`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/styles.css))
- **Backend API**: Vercel serverless functions ([`api/generate-image.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/generate-image.js), [`api/me.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/me.js), [`api/favorites.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/favorites.js), `api/community/*.js`)
- **Data & Auth**: Supabase PostgreSQL database with authentication (`supabase/migrations/*.sql`, [`src/supabaseClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/supabaseClient.js))

You need accounts at [Supabase](https://supabase.com) and [Vercel](https://vercel.com), 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:

```bash

# 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:

```bash
cp .env.example .env.local

```

Required variables in `.env.local` or Vercel dashboard:

```text
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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/supabaseClient.js) relies on these injected values:

```javascript
// 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

```bash
npm i -g vercel
vercel login

```

### Deploy from Project Root

```bash
vercel

```

Vercel automatically:

- Detects the `api/` directory and creates serverless functions for each file
- Builds the Vite React application using [`vite.config.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/vite.config.js)
- Applies routing rules from [`vercel.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/vercel.json)

The [`vercel.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/vercel.json) configuration handles SPA routing and API rewrites:

```json
{
  "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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json) containing all community-submitted styles.

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

```bash
node scripts/generate-site-data.mjs

```

This script queries the Supabase database and writes [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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:

```text
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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/generate-image.js):

```javascript
// 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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/vercel.json) | Routing and build configuration | SPA behavior, API rewrites |
| [`vite.config.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/vite.config.js) | Vite build setup | React + CSS processing |
| [`src/supabaseClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/supabaseClient.js) | Database client initialization | Auth and data operations |
| [`api/generate-image.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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.