Environment Configuration
Relevant source files
The following files were used as context for generating this wiki page:
Environment configuration in the Bolt project encompasses the setup of the local development environment, Cloudflare deployment settings, and runtime variables required for AI integration and browser-based code execution. The system leverages Cloudflare Pages and Workers for hosting, WebContainer API for sandboxing, and Vite for the development server.
Sources: README.md:58-62, CONTRIBUTING.md:58-62, wrangler.toml:1-5
Core Prerequisites and Tooling
The project mandates specific versions of Node.js and the pnpm package manager to ensure consistent behavior across different environments. These requirements are enforced via the package.json configuration and documented in the setup guides.
| Requirement | Version | Description |
|---|---|---|
| Node.js | v20.15.1 (or >=18.18.0) | Runtime environment |
| pnpm | v9.4.0 | Package manager for dependency resolution |
| Cloudflare Account | N/A | Required for deployment via Wrangler |
| Anthropic API Key | N/A | Required for AI assistant functionality |
Sources: CONTRIBUTING.md:68-71, package.json:23-25
Local Development Configuration
Local setup involves the use of environment variables stored in a .env.local file. This file is excluded from version control to protect sensitive credentials.
Environment Variables
The application relies on specific keys to communicate with AI services and control logging verbosity.
ANTHROPIC_API_KEY: Authenticates requests to Anthropic's Claude Sonnet 3.5.VITE_LOG_LEVEL: Sets the granularity of console output during development (e.g.,debug).OPENAI_API_KEY: (Optional/Modified) Referenced in community instructions for extended AI support.GROQ_API_KEY: (Optional/Modified) Referenced in community instructions for extended AI support.
Sources: CONTRIBUTING.md:83-93, README.md:162-171
Vite and Remix Integration
The vite.config.ts file configures the build pipeline and development server. It includes specific logic to handle issues with modern browsers and injects necessary polyfills for Node.js modules used within the browser.
Sources: vite.config.ts:13-35
Cloudflare Infrastructure Settings
The project uses wrangler.toml to define the Cloudflare Pages environment. It specifies the build output directory and enables Node.js compatibility for the worker environment.
Wrangler Configuration Table
| Key | Value | Description |
|---|---|---|
name | "bolt" | Project name in Cloudflare dashboard |
compatibility_flags | ["nodejs_compat"] | Enables Node.js API support in workers |
compatibility_date | "2024-07-01" | Version pinning for Cloudflare features |
pages_build_output_dir | "./build/client" | Directory containing built assets |
Sources: wrangler.toml:1-5
Persistence and Workspace Configuration
Environment configuration also extends to how the application interacts with the user's local filesystem and the virtual WebContainer environment.
Path Constants
The application defines standard paths for the working environment within app/utils/constants.ts:
WORK_DIR_NAME: 'project'WORK_DIR:/home/project
Sources: app/utils/constants.ts:1-3
Browser File System Integration
The system uses the FileSystemDirectoryHandle and window.showDirectoryPicker() to manage local workspace selection. Configuration for the active project is persisted in localStorage under the key selectedDirectoryPath.
Build and Deployment Scripts
The package.json defines the scripts used to transition between environments (development to production).
pnpm run dev: Launches the Remix Vite development server.pnpm run build: Compiles the application usingremix vite:buildfor production.pnpm run start: Local production emulation. It executesbindings.shto inject local variables as Cloudflare bindings before runningwrangler pages dev.pnpm run deploy: Automated build and deployment to Cloudflare Pages.
Sources: package.json:11-21, CONTRIBUTING.md:95-104
Summary
Environment configuration for Bolt is a multi-layered system that synchronizes local development needs with Cloudflare's serverless infrastructure. It relies on wrangler.toml for platform settings, .env.local for sensitive credentials, and Vite plugins to bridge Node.js capabilities into the browser environment. These configurations collectively enable the WebContainer API to operate securely and efficiently within a sandboxed development workspace.