Deployment Overview

Relevant source files

The following files were used as context for generating this wiki page:

• README.md
• vite.config.ts
• package.json
• index.html
• App.tsx
• services/hfService.ts

This document provides a technical overview of the build and deployment process for the Peinture (AI Image Gen) application. The project is a static Single Page Application (SPA) built with React and Vite, designed for easy deployment on any platform that supports static file hosting. Its architecture is client-side heavy, with no required backend for user data, which simplifies the deployment process significantly.

Sources: README.md:29-31, README.md:19-21

Build Process

The application is bundled for production using Vite. The process involves installing dependencies and running a build script, which generates a dist directory containing the optimized, static assets.

Sources: package.json:6-8, README.md:71-75

Build Scripts

The package.json file defines the scripts necessary for development, building, and previewing the application.

Script	Command	Description
dev	vite	Starts the Vite development server with hot-reloading.
build	vite build	Bundles the application for production into the dist directory.
preview	vite preview	Serves the production build from the dist directory locally to preview the final application.

Sources: package.json:5-9

Build Flow

The following diagram illustrates the steps to create a production-ready build.

This diagram shows the standard build process, starting from installing dependencies to generating the final static assets in the dist folder.

Sources: README.md:67-75, package.json:7

Vite Configuration

The build process is controlled by vite.config.ts. It uses @vitejs/plugin-react to handle React (TSX) compilation. The configuration also sets up path aliases and defines how environment variables are handled, although the primary runtime configuration (like the Hugging Face token) is managed on the client-side.

Sources: vite.config.ts:5-19

Application Architecture for Deployment

The application's design as a self-contained SPA is central to its deployment strategy.

Static Site Generation

The npm run build command transpiles all TypeScript/React code into standard JavaScript, HTML, and CSS files. These files are static and do not require a server-side runtime environment like Node.js to be served.

Sources: README.md:29-31, package.json:7

Client-Side Data Persistence

User data, such as image generation history and the optional Hugging Face API token, is stored exclusively in the browser's localStorage. This eliminates the need for a backend database, making the application "privacy-focused" and simplifying hosting.

• History: Generated images and their metadata are saved to the ai_image_gen_history key in localStorage.
• Settings: The Hugging Face token is stored under the huggingFaceToken key.

Sources: README.md:21, App.tsx:93-104, services/hfService.ts:64-67

External Dependencies via CDN

The index.html file uses an importmap to load key dependencies like react, react-dom, and lucide-react directly from a CDN (aistudiocdn.com). This can reduce the local bundle size and leverage browser caching for common libraries.

<script type="importmap">
{
  "imports": {
    "react/": "https://aistudiocdn.com/react@^19.2.0/",
    "react": "https://aistudiocdn.com/react@^19.2.0",
    "react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/",
    "lucide-react": "https://aistudiocdn.com/lucide-react@^0.555.0",
    "react-zoom-pan-pinch": "https://aistudiocdn.com/react-zoom-pan-pinch@^3.7.0"
  }
}
</script>

Sources: index.html:84-96

Deployment Options

The README.md file recommends several platforms for hosting the static application.

Recommended Platforms

The following table summarizes the recommended deployment platforms and their configurations.

Platform	Method	Framework Preset	Build Command	Output Directory
Vercel	Vercel CLI or GitHub Integration	Vite	npm run build	dist
Cloudflare Pages	GitHub Integration	Vite	npm run build	dist
Static CDN	Manual Upload (Nginx, S3, etc.)	N/A	npm run build	dist

Sources: README.md:34-85

Deployment Flow Diagram

This diagram shows the different paths to deploy the application.

This diagram illustrates that the code from the Git repository can be automatically built and deployed by services like Vercel and Cloudflare Pages, or it can be built manually to produce a dist folder for upload to a static server.

Sources: README.md:34-85

SPA Server Configuration

When deploying to a generic static server (like Nginx, Apache, or AWS S3), it is critical to configure the server to handle client-side routing. All requests that would normally result in a 404 Not Found error must be redirected to index.html. This allows the React application to manage the routing logic.

Sources: README.md:83-85