Deploying to Cloudflare Pages

Relevant source files

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

• wrangler.toml
• package.json
• README.md
• functions/[[path]].ts
• vite.config.ts
• app/entry.server.tsx

Bolt is a full-stack application built with Remix and designed to be deployed using Cloudflare Pages and Cloudflare Workers. The deployment architecture leverages Cloudflare's edge network to run the Remix server-side logic via Cloudflare Functions and serve static assets through the Pages CDN.

Sources: README.md:55-58, package.json:11-13

Deployment Architecture

The application uses a hybrid architecture where the frontend assets are pre-built and the backend logic is handled by Cloudflare Pages Functions. This approach ensures that the AI-powered development tools, powered by the WebContainer API, are delivered efficiently to the browser.

Infrastructure Components

The following diagram illustrates the relationship between the build process and the Cloudflare deployment environment:

This flow shows how the build process splits the application into static client files and server-side functions.
Sources: package.json:12, wrangler.toml:5, functions/[[path]].ts:1-10

Configuration and Tooling

Deployment is managed through a combination of wrangler configuration and package.json scripts.

Wrangler Configuration

The wrangler.toml file defines the core deployment settings for the Cloudflare environment.

Property	Value	Description
name	"bolt"	The name of the Cloudflare project.
compatibility_flags	["nodejs_compat"]	Enables Node.js API compatibility in the Worker environment.
compatibility_date	"2024-07-01"	Specifies the Cloudflare Workers runtime version.
pages_build_output_dir	"./build/client"	The directory containing the static assets for deployment.

Sources: wrangler.toml:1-5

Build and Deploy Scripts

The project provides automated scripts to streamline the transition from local development to production.

{
  "scripts": {
    "build": "remix vite:build",
    "deploy": "npm run build && wrangler pages deploy",
    "preview": "pnpm run build && pnpm run start",
    "start": "bindings=$(./bindings.sh) && wrangler pages dev ./build/client $bindings"
  }
}

• pnpm run build: Triggers remix vite:build to generate the production-ready server and client bundles.
• pnpm run deploy: A composite command that builds the project and then uses wrangler pages deploy to upload the assets and functions to Cloudflare.
• pnpm run start: Uses wrangler pages dev to simulate the production environment locally, incorporating environment bindings via bindings.sh.

Sources: package.json:11-21, README.md:85-95

Server-Side Execution

The server-side logic is integrated into Cloudflare Pages using a catch-all function handler.

Request Handling Logic

The file functions/[[path]].ts acts as the entry point for all server-side requests in the deployed environment. It utilizes createPagesFunctionHandler from @remix-run/cloudflare-pages to map incoming requests to the Remix server build.

import { createPagesFunctionHandler } from '@remix-run/cloudflare-pages';
import * as serverBuild from '../build/server';

export const onRequest = createPagesFunctionHandler({
  build: serverBuild as unknown as ServerBuild,
});

Sources: functions/[[path]].ts:1-10

Response Streaming

The server entry point (app/entry.server.tsx) is configured to support streaming responses, which is critical for the AI SDK integration used by Bolt. It sets specific security headers required for the WebContainer API to function correctly on the client side.

Header	Value	Purpose
Content-Type	text/html	Standard HTML response type.
Cross-Origin-Embedder-Policy	require-corp	Required for WebContainer security isolation.
Cross-Origin-Opener-Policy	same-origin	Required for WebContainer security isolation.

Sources: app/entry.server.tsx:71-74, README.md:16-25

Deployment Process Flow

To deploy the application, a developer follows a sequence of authentication and execution steps:

1. Prerequisites: Ensure Node.js (v20.15.1) and pnpm (v9.4.0) are installed.
2. Authentication: Ensure wrangler is logged into the correct Cloudflare account with appropriate permissions.
3. Execution: Run pnpm run deploy.
4. Verification: The output directory defined in wrangler.toml (./build/client) is uploaded, and the functions in /functions are deployed as Workers.

Sources: README.md:60-63, README.md:104-108, wrangler.toml:5

Summary

Deploying Bolt to Cloudflare Pages involves a specialized build process that targets the esnext environment while providing Node.js polyfills for compatibility. By utilizing Wrangler and the Remix Cloudflare Pages adapter, the application can serve static frontend components and dynamic AI-driven backend logic within a unified global edge network.

Sources: vite.config.ts:11-15, functions/[[path]].ts:1-10