Deploying to Cloudflare Pages

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

Introduction

This document outlines the process for deploying the 1mage (Peinture) application to Cloudflare Pages. 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 like Cloudflare. Cloudflare Pages provides a streamlined workflow for building and deploying static assets directly from a Git repository.

The deployment process involves connecting a GitHub repository to Cloudflare, configuring the build settings, and letting Cloudflare automatically build and deploy the application. The application's structure as an SPA requires specific server configurations to handle client-side routing, which Cloudflare Pages manages automatically when using the correct framework preset.

Sources: README.md:49-51, README.md:65-67, package.json, App.tsx

Prerequisites

Before deploying, ensure your project code is pushed to a GitHub repository. Cloudflare Pages uses a Git-connected workflow to trigger deployments.

Sources: README.md:66

Build Process

The application is built using Vite, a modern frontend build tool. The build process compiles the React/TypeScript source code, bundles all necessary assets (JavaScript, CSS, images), and outputs a set of static files ready for production.

Sources: package.json:3, vite.config.ts:5

Build Command

The build is initiated by running the build script defined in package.json.

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

Sources: package.json:5-9

This command executes vite build, which performs the production build.

Build Output

Upon successful execution of the build command, Vite generates a dist directory in the project root. This directory contains the index.html file and all the static assets required to run the application. The contents of this dist folder are what will be deployed to Cloudflare's edge network.

Sources: README.md:72, README.md:83-85

The following diagram illustrates the local build process.

This diagram shows how running the build script triggers Vite to produce the static dist directory.
Sources: package.json:7, README.md:72, 83-85

Cloudflare Pages Deployment

Cloudflare Pages offers a simple, Git-integrated deployment pipeline. The recommended approach is to connect your Cloudflare account to the project's GitHub repository.

Sources: README.md:65-67

Deployment Steps

1. Log in to the Cloudflare Dashboard.
2. Navigate to Compute (Workers & Pages) > Create Application > Pages > Connect to Git.
3. Select the GitHub repository containing the project.
4. Configure the build settings in the "Build settings" section.
5. Click Save and Deploy.

Sources: README.md:66-73

This flow is visualized in the diagram below.

This diagram shows the automated deployment pipeline from a git push to the live application on Cloudflare.
Sources: README.md:66-74

Build Configuration

When setting up the project on Cloudflare Pages, the following build settings must be configured. Using the Vite framework preset will typically populate these fields correctly.

Setting	Value	Description
Framework preset	Vite	Optimizes the build and deployment for a Vite-based project.
Build command	npm run build	The command Cloudflare executes to build the static files.
Build output directory	dist	The directory containing the static assets that Cloudflare will deploy.

Sources: README.md:70-72

SPA Routing Configuration

A critical aspect of deploying an SPA is ensuring the server correctly handles client-side routing. Any request to a path that is not a static file (like / or /image/123) should be redirected to serve the main index.html file. React Router (or other client-side logic) will then handle the routing. Cloudflare Pages automatically configures this behavior for SPAs when a framework preset like Vite is selected.

Sources: README.md:91-92, index.html

Summary

Deploying the 1mage application to Cloudflare Pages is a straightforward process due to its nature as a static SPA built with Vite. By connecting a GitHub repository and using the correct Vite preset, developers can leverage Cloudflare's automated build and deployment pipeline to host the application on a global edge network with minimal configuration. The key is to ensure the build command is set to npm run build and the output directory is dist.

Sources: README.md:49-51, README.md:65-74