# Prerequisites for Running awesome‑gpt‑image‑2: Complete Setup Guide

> Learn the essential prerequisites for running awesome-gpt-image-2. Discover Node.js, npm, Supabase CLI, and .env file requirements for seamless setup.

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

---

**You need Node.js ≥14, npm, a Supabase project with CLI access, and a configured `.env` file to run awesome‑gpt‑image‑2; optional Alipay credentials enable paid‑community features.**

The `freestylefly/awesome‑gpt‑image‑2` repository is a Vite‑powered React application that generates images using OpenAI or Azure APIs, with backend services hosted on Supabase. Before you can run the dev server or deploy to production, several system‑level and service‑level dependencies must be satisfied. This guide walks through every prerequisite with specific file references and runnable commands.

---

## Core Runtime Requirements

### Node.js and Package Manager

The project requires **Node.js version 14 or higher**. This threshold ensures native **ES‑module support**, which the build pipeline relies on.

In [`package.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/package.json), the engine field explicitly constrains the Node version:

```json
{
  "engines": {
    "node": ">=14"
  }
}

```

All npm scripts—including `predev`, `generate:site-data`, and `generate:style-skill`—execute through Node. You may use **npm**, **Yarn**, or **PNPM** interchangeably.

Install dependencies with:

```bash
npm install

```

---

### Vite (Installed Automatically)

Vite serves as both the **development server** and **production bundler**. It is listed as a dependency in [`package.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/package.json) and does not require global installation.

The configuration in [`vite.config.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/vite.config.js) defines proxy rules for API routes, routing `/api/*` requests to the local backend during development.

---

## Backend Infrastructure: Supabase

### Supabase Project and CLI

The application stores user data, authentication state, credits, and billing records in **Supabase**. You must:

1. Create a Supabase project via the dashboard or CLI.
2. Install the **Supabase CLI** locally.
3. Apply the schema migrations found in `supabase/migrations/`.

The migrations folder contains SQL files defining tables for users, credits, purchases, and related entities. Apply them with:

```bash
supabase db push

# or for a fresh reset

supabase db reset

```

---

### Environment Variables for Supabase

The frontend initializes its Supabase client in [`src/supabaseClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/supabaseClient.js). This file expects two variables at build time:

- `VITE_SUPABASE_URL`
- `VITE_SUPABASE_ANON_KEY`

Copy the template and populate your values:

```bash
cp .env.example .env

```

Edit `.env` with your project URL and anonymous key from the Supabase dashboard.

---

## Optional: Alipay Payment Integration

If you intend to enable **paid‑community features**, you must configure **Alipay credentials**. The integration code resides in `api/community/alipay/`.

Required environment variables (see [`docs/alipay-web-payment.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/alipay-web-payment.md)):

- `ALIPAY_APP_ID`
- `ALIPAY_APP_PRIVATE_PKCS_KEY` — private key without PEM headers
- `ALIPAY_PUBLIC_KEY` — Alipay's public key

For local testing, start the sandbox server:

```bash
node scripts/alipay-webpay-sandbox-server.mjs

```

---

## Quick‑Start Command Sequence

Execute these steps in order after satisfying the prerequisites above:

```bash

# 1. Clone repository

git clone https://github.com/freestylefly/awesome-gpt-image-2.git
cd awesome-gpt-image-2

# 2. Install dependencies

npm install

# 3. Configure environment

cp .env.example .env

# → Edit VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY

# 4. (Optional) Apply database schema

supabase db push

# 5. Generate static data and start dev server

npm run predev   # runs generate:site-data + generate:style-skill

npm run dev      # launches http://localhost:5173

```

---

## Key Configuration Files

| File | Purpose |
|------|---------|
| [`package.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/package.json) | Dependencies, engine constraints, and npm scripts |
| [`vite.config.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/vite.config.js) | Dev server proxy and build configuration |
| `.env.example` | Template for all required environment variables |
| [`src/supabaseClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/supabaseClient.js) | Frontend Supabase client initialization |
| `supabase/migrations/` | Database schema definitions |
| [`docs/alipay-web-payment.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/alipay-web-payment.md) | Alipay integration guide |
| `scripts/generate-site-data.mjs` | Builds static JSON for gallery and prompts |
| `scripts/generate-style-skill.mjs` | Packages style library as installable skill |

---

## Production Build Prerequisites

The same environment applies for production builds. Run:

```bash
npm run prebuild   # regenerates site data and style skill

npm run build      # outputs to ./dist

npm run preview    # verifies the build locally

```

Ensure your production environment supplies the same `.env` variables, or configure them through your hosting platform's secret management.

---

## Summary

- **Node.js ≥14 and npm** are mandatory for all build and runtime operations.
- **Supabase project with applied migrations** provides authentication, storage, and billing data layers.
- **`.env` file** must contain `VITE_SUPABASE_URL` and `VITE_SUPABASE_ANON_KEY` at minimum.
- **Alipay credentials** are only required for enabling paid‑community payment flows.
- **Vite** handles development and bundling automatically after `npm install`.

---

## Frequently Asked Questions

### Do I need a Supabase account to run awesome‑gpt‑image‑2 locally?

Yes. The frontend in [`src/supabaseClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/supabaseClient.js) attempts to connect to Supabase on initialization. Without valid credentials, authentication and credit‑tracking features will fail. You can create a free‑tier Supabase project and apply the migrations in `supabase/migrations/` to satisfy this requirement.

### Can I use Yarn or PNPM instead of npm?

Yes. The [`package.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/package.json) does not lock the package manager. Both Yarn and PNPM are compatible, though the documentation examples use npm commands. Ensure your chosen manager respects the `"node": ">=14"` engine constraint.

### What happens if I skip the Alipay setup?

The application runs fully without Alipay. The payment integration in `api/community/alipay/` is gated by environment variable checks. Omitting `ALIPAY_APP_ID` and related keys simply disables paid‑community features; image generation and core gallery functionality remain available.

### Which port does the development server use?

By default, Vite serves on **port 5173**. This is configured in [`vite.config.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/vite.config.js) and can be overridden with the `--port` flag or `PORT` environment variable.