Frontend Build Scripts for the Awesome-GPT-Image-2 Website: Complete Vite Configuration Guide

The Awesome-GPT-Image-2 repository uses Vite as its build tool and defines seven npm scripts in package.json to automate data generation, development, production builds, and local preview workflows.

The Awesome-GPT-Image-2 website leverages a modern Vite-based build pipeline to streamline frontend development. According to the repository's source code in freestylefly/awesome-gpt-image-2, the project uses npm scripts to orchestrate data preprocessing, hot-module replacement during development, and optimized production bundling. This article examines the specific frontend build scripts and configuration files that power the site's deployment workflow.

Core Development Scripts in package.json

Starting the Development Server

The dev script launches the Vite development server with hot-module replacement enabled. Defined at [line 14 of package.json](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/package.json#L14), this command starts the local development environment accessible at http://localhost:5173.

npm run dev

Building for Production

The build script generates an optimized production bundle in the dist directory. As implemented at [lines 16-17 of package.json](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/package.json#L16), this command executes the prebuild hook before invoking Vite's production build process.

npm run build

Previewing Production Builds

The preview script serves the contents of the dist folder locally to verify the production output before deployment. Located at [line 18 of package.json](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/package.json#L18), this command spins up a temporary static server.

npm run preview

Automated Data Generation Pipeline

Pre-build Lifecycle Hooks

The build system utilizes npm's pre lifecycle hooks to ensure static data is current before executing the main script. The predev hook (lines 13-14) and prebuild hook (lines 16-17) automatically run generate:site-data and generate:style-skill before starting the development server or creating a production bundle.

Site Data Generation

The generate:site-data script (line 7) executes scripts/generate-site-data.mjs to convert markdown content into JSON format consumed by the frontend. This preprocessing step ensures the site's content is baked into the build as static data rather than processed at runtime.

npm run generate:site-data

Style Skill Artifact Generation

The generate:style-skill script (line 8) runs scripts/generate-style-skill.mjs to produce the "style-skill" artifact required by the UI components. This custom build step prepares specialized styling data before the Vite bundling process begins.

npm run generate:style-skill

Vite Configuration Architecture

The vite.config.js file configures the build tool with React support and custom API middleware. According to the source code, this configuration specifies the output directory and plugin stack used across all frontend build scripts.

Plugin Stack and Middleware

Lines 5-6 of vite.config.js import and configure @vitejs/plugin-react for JSX/TSX processing, alongside a custom localVercelApi middleware defined in scripts/vite-local-api.mjs. This middleware provides local API compatibility during development, simulating Vercel serverless functions on the local dev server.

Build Output Configuration

The configuration sets build.outDir to dist (lines 9-10), ensuring all production assets are emitted to this directory. Additionally, publicDir is configured to serve static assets from the data folder (line 7), making generated content available to the application during both development and production.

Production Optimizations

For production builds, the Vite configuration disables source maps to optimize bundle size and prevent source code exposure in the final deployment artifact.

Complete Build Workflow Examples

To run the site locally with fresh data generation:

# Automatically triggers predev hook (generate:site-data and generate:style-skill)

npm run dev

To create and verify a production deployment bundle:

# Generate data, build optimized bundle, and preview locally

npm run build
npm run preview

To manually regenerate site content without starting the server:

npm run generate:site-data
npm run generate:style-skill

Summary

• The Awesome-GPT-Image-2 website uses Vite as its primary build tool, configured in vite.config.js with React support and custom middleware.
• Seven npm scripts in package.json manage the complete build lifecycle: dev, build, preview, predev, prebuild, generate:site-data, and generate:style-skill.
• Automated data generation occurs through predev and prebuild hooks, running scripts/generate-site-data.mjs and scripts/generate-style-skill.mjs to prepare static content before bundling.
• Production output is directed to the dist directory with optimized assets and disabled source maps for security and performance.
• Development workflow combines hot-module replacement via npm run dev with local API middleware for full-stack local development simulation.

Frequently Asked Questions

What build tool does Awesome-GPT-Image-2 use?

The project uses Vite as its frontend build tool, configured via vite.config.js with the @vitejs/plugin-react plugin for React/JSX support and a custom localVercelApi middleware for backend API simulation during development. The configuration specifies dist as the output directory and disables source maps for production.

How do I start the development server for Awesome-GPT-Image-2?

Run npm run dev to start the Vite development server. This command automatically triggers the predev hook first, which executes generate:site-data and generate:style-skill to ensure all static data is current before the server launches at http://localhost:5173 with hot-module replacement enabled.

Where does the production build output go?

The production bundle is generated in the dist directory, as specified by the build.outDir configuration in vite.config.js (lines 9-10). You can verify the build locally by running npm run preview after npm run build, which serves the dist folder on a temporary local server.

What is the purpose of the generate:site-data script?

The generate:site-data script runs scripts/generate-site-data.mjs to preprocess markdown content into JSON format required by the frontend. This script ensures static site data is regenerated before both development (predev) and production builds (prebuild), keeping the UI content synchronized with source files without requiring runtime markdown parsing.

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