Environment Configuration

Relevant source files

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

• CONTRIBUTING.md
• package.json
• wrangler.toml
• vite.config.ts
• app/utils/logger.ts
• app/root.tsx

Environment configuration in the Bolt project manages the settings required to run the AI-powered development agent across different execution contexts, including local development, testing, and production deployment on Cloudflare. The system relies on a combination of environment variables, build-tool configurations (Vite), and platform-specific settings (Wrangler for Cloudflare Workers/Pages).

The configuration ensures that the Remix-based application can communicate with external AI services like Anthropic, manage local development proxies, and maintain consistent logging and theme states across the user's browser and the server environment.

Core Infrastructure Configuration

The project is built using Remix and is designed to be deployed on the Cloudflare ecosystem. This requires specific configuration for both the Vite build tool and the Wrangler CLI.

Platform and Build Settings

The infrastructure is defined by the interaction between the Node.js environment and Cloudflare's runtime. The project requires Node.js v20.15.1 and pnpm v9.4.0 for development.

Sources: CONTRIBUTING.md:61-63, package.json:28-30

Configuration File	Primary Purpose	Key Elements
wrangler.toml	Cloudflare Pages deployment settings	nodejs_compat, pages_build_output_dir
vite.config.ts	Build pipeline and development server	remixCloudflareDevProxy, nodePolyfills
.env.local	Local secret management	ANTHROPIC_API_KEY

Sources: wrangler.toml:1-5, vite.config.ts:10-25, CONTRIBUTING.md:76-78

Build Pipeline Flow

The following diagram illustrates how configuration flows from source files through the build tools to the final deployment target.

This diagram represents the build and deployment pipeline where environment secrets and platform configurations converge.
Sources: package.json:9-11, wrangler.toml:5, vite.config.ts:12-25

Environment Variables

The application utilizes environment variables to manage sensitive API keys and adjust runtime behavior such as logging levels.

Secret Management

For local development, secrets are stored in a .env.local file. This file is explicitly ignored by version control to prevent credential leaks.

• ANTHROPIC_API_KEY: Required for the AI SDK to communicate with Claude Sonnet 3.5.
• VITE_LOG_LEVEL: Optional variable to set the granularity of application logs.

Sources: CONTRIBUTING.md:74-82, app/utils/logger.ts:13

Logging Configuration

The logging system determines its verbosity based on the VITE_LOG_LEVEL environment variable and the current build mode (Development vs. Production).

The logic used to initialize the global logger level.
Sources: app/utils/logger.ts:13

Local Development Configuration

The development environment includes specific plugins and proxies to emulate the Cloudflare environment and handle browser-specific issues.

Vite Plugins and Middlewares

The vite.config.ts file configures several essential plugins:

1. remixCloudflareDevProxy: Provides a proxy for Cloudflare-specific bindings during local development.
2. nodePolyfills: Includes polyfills for path and buffer to ensure compatibility in the browser-based environment.
3. chrome129IssuePlugin: A custom middleware that detects Chrome version 129 and prompts users to use Chrome Canary due to specific JavaScript module issues in that version.

Sources: vite.config.ts:12-20, vite.config.ts:33-45

Development Scripts

The package.json defines scripts that use environment configurations to run the app:

• pnpm run dev: Starts the Remix Vite development server.
• pnpm run start: Executes bindings.sh to inject environment variables into the local Wrangler Pages development server.

Sources: package.json:11-17, CONTRIBUTING.md:86-90

Client-Side Environment Initialization

Certain configurations are applied directly in the browser during the initial page load to ensure UI consistency.

Theme Persistence

The application initializes the UI theme (Light/Dark) using an inline script in the Head component. This prevents "flash of unstyled content" (FOUC) by reading from localStorage or system preferences before the React app fully hydrates.

// Initial theme setup logic
function setTutorialKitTheme() {
  let theme = localStorage.getItem('bolt_theme');

  if (!theme) {
    theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
  }

  document.querySelector('html')?.setAttribute('data-theme', theme);
}

Sources: app/root.tsx:37-47

Deployment Configuration

Deployment is targeted at Cloudflare Pages, configured via the wrangler.toml file.

Parameter	Value	Description
name	"bolt"	The project name on Cloudflare.
compatibility_flags	["nodejs_compat"]	Enables Node.js compatibility for Workers.
compatibility_date	"2024-07-01"	Pins the Cloudflare runtime version.
pages_build_output_dir	"./build/client"	The directory containing the static assets and worker script.

Sources: wrangler.toml:1-5

Summary: The environment configuration of Bolt is a multi-layered system that bridges local development with Cloudflare's serverless platform. It leverages Vite for build-time optimizations and plugin management, while utilizing Wrangler for runtime environment compatibility and deployment. Security is handled through local environment files, while user experience is maintained through client-side theme and logging initialization.