Configuration & Environment

Relevant source files

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

• README.md
• VERCEL_DEPLOYMENT.md
• vite.config.ts
• wrangler.toml
• app/lib/persistence/fileSystem.ts
• package.json
• app/root.tsx

Introduction

The Configuration & Environment of this project encompasses the setup required to run, build, and deploy a full-stack AI-powered development tool. It integrates web-based sandboxing via the WebContainer API with cloud-native deployment platforms like Cloudflare Pages and Vercel. The environment is designed to handle sensitive credentials for AI models (e.g., Anthropic Claude) and cross-origin isolation requirements necessary for running Node.js in the browser.

Sources: README.md:1-55, VERCEL_DEPLOYMENT.md:1-20

Environment Variables

The application relies on several critical environment variables for AI service integration, debugging, and cloud deployment. These are typically managed via a .env.local file during local development.

Required AI Configuration

Variable	Description	Source
ANTHROPIC_API_KEY	API key for Claude 3.5 Sonnet integration.	README.md:111
GROQ_API_KEY	Optional API key for Groq integration.	VERCEL_DEPLOYMENT.md:41

Deployment & Runtime Configuration

Variable	Description	Source
CLOUDFLARE_API_TOKEN	Token with Pages permissions for MVP publish feature.	README.md:204
CLOUDFLARE_ACCOUNT_ID	Cloudflare Account ID for deployment operations.	README.md:205
VITE_LOG_LEVEL	Debug level for the Vite development server (e.g., debug).	README.md:115
VERCEL	Used in build scripts to detect Vercel environment.	vite.config.ts:10

Deployment Platforms

The project supports dual-target deployment, primarily focusing on Cloudflare's edge network while providing full compatibility for Vercel.

Cloudflare Pages

The default deployment target is Cloudflare Pages, configured via wrangler.toml. It utilizes nodejs_compat to support Node.js APIs within the worker environment.

Vercel Integration

Vercel deployment is configured through vercel.json, targeting the Remix framework with a Node.js 20.x runtime.

Sources: VERCEL_DEPLOYMENT.md:5-15

Build System & Vite Configuration

The build process uses Vite with specific plugins to handle Node.js polyfills and environment-specific logic. A custom plugin is included to address specific browser issues (Chrome 129) during local development.

Cross-Origin Isolation

WebContainers require specific HTTP headers to enable SharedArrayBuffer via cross-origin isolation. These are configured across multiple layers:

1. Static Headers: public/_headers
2. Server-Side: app/entry.server.tsx and functions/[[path]].ts
3. Development: vite.config.ts

Sources: README.md:214-222

Configuration Logic

The vite.config.ts dynamically adjusts plugins based on the detection of the Vercel environment or test modes.

Persistent Storage & Local Filesystem

The environment utilizes the Browser File System Access API to persist project data. Users must select a local directory, which is then stored in localStorage to maintain state across sessions.

Storage Keys

Key	Usage	Source
selectedDirectoryPath	Stores the name of the directory handle selected via showDirectoryPicker.	app/lib/persistence/fileSystem.ts:74
bolt_theme	Persists the user's theme preference (light/dark).	app/root.tsx:38

File Sync Architecture

The WorkbenchStore initiates a file change check every 30 seconds to synchronize the in-memory FilesStore with the local filesystem selected by the user.

Development Scripts

Standardized scripts are provided via package.json to manage the lifecycle of the environment.

Script	Purpose
pnpm run dev	Starts the Remix Vite development server.
pnpm run typegen	Generates TypeScript types for Wrangler/Cloudflare.
pnpm run start	Local production preview using bindings.sh for env variable mapping.
pnpm run deploy	Triggers the build and deployment to Cloudflare.

Sources: README.md:118-132, package.json:1-15

Conclusion

The Configuration & Environment of Bolt is a hybrid architecture that bridges local browser storage with cloud-based AI services. By utilizing Vite for optimized builds and leveraging browser APIs for filesystem persistence, the system provides a robust local development experience that mirrors its edge-deployed production state.