Deploying to Vercel

Relevant source files

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

• README.md
• package.json
• vite.config.ts
• index.html
• App.tsx
• tsconfig.json

This document provides a technical overview of deploying the 1mage (Peinture) application to Vercel. The project is a static Single Page Application (SPA) built with React and Vite, which makes it highly suitable for deployment on static hosting platforms. Vercel is the recommended deployment option due to its zero-configuration support for Vite projects.

The application is structured as a client-side only application. All logic, including state management, API calls to Hugging Face, and history storage (via localStorage), is handled within the browser. This architecture simplifies deployment, as there is no backend to manage.

Sources: README.md:48-53, App.tsx

Build Process

The project uses Vite as its build tool. The build process is initiated by the npm run build command, which is defined in the package.json file. Vite compiles the React and TypeScript source code, bundles all modules, and outputs a set of optimized, static assets into a dist directory. This directory contains the index.html file and all necessary JavaScript and CSS bundles, ready for hosting.

Sources: package.json:7, vite.config.ts, README.md:85-87

The following diagram illustrates the local build process.

Build Configuration

The build process is managed by Vite and configured in vite.config.ts and package.json.

File	Configuration	Description
package.json	"build": "vite build"	Defines the script alias to run the Vite production build.
vite.config.ts	plugins: [react()]	Enables the official Vite plugin for React, which handles JSX transformation and Fast Refresh.
README.md	Output Directory: dist	Specifies that the build output is located in the dist folder.

Sources: package.json:7, vite.config.ts:10, README.md:62, 87

Deployment Methods

The README.md outlines two primary methods for deploying to Vercel, both of which leverage Vercel's automatic detection of the Vite framework.

Sources: README.md:52-53

Method 1: Vercel CLI

This method involves using the Vercel command-line interface to deploy directly from the local project directory.

1. Install the Vercel CLI globally:

   npm i -g vercel
   

2. From the project's root directory, run the deploy command:

   vercel
   

3. Follow the interactive prompts. Vercel will automatically detect that it is a Vite project and configure the build settings accordingly.

Sources: README.md:55-63

Method 2: Vercel Dashboard with Git Integration

This is the recommended continuous deployment method. It connects a Git repository (e.g., on GitHub) to a Vercel project.

The deployment flow is as follows:

The steps for this method are:

1. Push the project code to a GitHub repository.
2. In the Vercel Dashboard, import the repository.
3. Vercel will automatically identify the "Framework Preset" as Vite.
4. Click Deploy. Vercel will then build and deploy the application.

Sources: README.md:66-70

Vercel Automatic Configuration

When Vercel detects a Vite project, it applies a default configuration preset that aligns with the project's structure. This zero-configuration approach simplifies the deployment process significantly.

Setting	Value	Source
Framework Preset	Vite	README.md:69
Build Command	npm run build	README.md:62, package.json:7
Output Directory	dist	README.md:62, README.md:87
SPA Route Handling	All routes rewrite to index.html	README.md:90-92

This automatic handling of SPA routing is critical. Vercel configures its servers to redirect all requests for non-existent paths to the root index.html file, allowing the client-side React application to manage the routing logic.

Sources: README.md:62, 69, 87, 90-92, package.json:7

Summary

Deploying the 1mage application to Vercel is a straightforward process because it is a static SPA built with standard tools that Vercel natively supports. Vercel's "Vite" framework preset automatically configures the build command, output directory, and server rewrites needed for a SPA to function correctly. Both the Vercel CLI and the Git-integrated dashboard provide simple pathways to get the application live, with the Git integration being the recommended approach for continuous deployment.

Sources: README.md:52-53, 65-70