Deploy Bolt.new Apps

Overview

Take your Bolt.new AI-generated web app from prototype to production on Chita Cloud with full infrastructure support.

What is Bolt.new?

Bolt.new (by StackBlitz) is an AI tool that generates complete web applications from prompts. It creates working React, Vue, or vanilla JavaScript apps instantly.

Why Deploy to Production?

Bolt.new is perfect for prototyping, but production needs:

• Always-on hosting (Bolt.new is preview-only)
• Custom domains with SSL
• Backend services (PostgreSQL, Redis)
• Environment variable management
• Professional infrastructure

Deployment Steps

Step 1: Generate Your App in Bolt.new

1. Go to bolt.new
2. Describe your app in the prompt
3. Bolt AI generates working code
4. Test and refine in the preview
5. Iterate until satisfied

Step 2: Export Your Code

Method A: Download Project

1. Click the menu (≡) in Bolt.new
2. Select "Download Project"
3. Save ZIP file to your computer

Method B: Push to GitHub (Recommended)

1. Click "Connect to GitHub" in Bolt.new
2. Authorize StackBlitz
3. Create repository
4. Bolt pushes code automatically

Step 3: Prepare for Deployment

If you downloaded ZIP:

1. Extract the ZIP
2. Check for package.json or build configuration
3. Create GitHub repository:

   cd your-bolt-project
   git init
   git add .
   git commit -m "Bolt.new generated app"
   git remote add origin git@github.com:yourusername/repo.git
   git push -u origin main

Step 4: Deploy to Chita Cloud

From GitHub:

1. Go to app.chitacloud.com
2. Click "Deploy" button
3. Select "GitHub Repository"
4. Choose your Bolt.new repository
5. Select main branch
6. Framework auto-detected:
   • Vite + React
   • Next.js
   • Vue.js
   • Vanilla JS

From ZIP Upload:

1. Click "Deploy" button
2. Select "Upload ZIP"
3. Upload your Bolt.new ZIP
4. Choose Node.js runtime
5. Click "Deploy"

Step 5: Configure Build

Bolt.new apps typically use:

Vite (React/Vue):

• Build command: npm run build (auto-detected)
• Output directory: dist
• Port: Auto-configured

Next.js:

• Build command: npm run build
• Start command: npm start
• Port: 3000

Step 6: Add Backend Services

Bolt.new generates frontends. Add backend services:

PostgreSQL Database:

1. Go to "Add-ons" tab
2. Add PostgreSQL (100MB free or from €7/month)
3. Use DATABASE_URL environment variable in API calls

Redis Cache:

• Included in all paid plans ✅
• Use REDIS_URL for session management

Database guide: PostgreSQL | Cache setup: Redis

Step 7: Add API Keys

If your Bolt app uses external APIs:

1. Go to "Environment Variables" tab
2. Add API keys:
   • OPENAI_API_KEY
   • SUPABASE_URL
   • STRIPE_PUBLISHABLE_KEY
   • etc.
3. Update your code to use process.env.VARIABLE_NAME

Secure management: Environment Variables

Step 8: Custom Domain

1. Go to "Domains" tab
2. Add your domain
3. Configure DNS
4. SSL issued automatically

Common Bolt.new Frameworks

React + Vite

// package.json (Bolt-generated)
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

Chita Cloud auto-detects and builds correctly.

Next.js App

// Bolt-generated Next.js works as-is
export default function Home() {
  return <div>Hello from Chita Cloud!</div>
}

Server-side rendering supported.

Vue 3 + Vite

Fully supported with auto-detection of Vue framework.

Adding Backend to Frontend

Bolt.new generates frontends. Add backend:

Option 1: Serverless Functions (Node.js)

Create /api directory:

// api/hello.js
export default function handler(req, res) {
  res.json({ message: 'Hello from backend!' });
}

Option 2: Separate Backend Service

Deploy a separate Go/Python backend:

1. Create backend repository
2. Deploy as separate service
3. Connect via environment variables

Pricing Example

Bolt.new App on Chita Cloud:

Compare to Vercel Pro ($20) + Redis ($25) + Database ($25) = Save ~€40/month

Best Practices

Environment Variables

Never hardcode secrets in Bolt-generated code:

// ❌ Bad
const apiKey = "sk-abc123...";
 
// ✅ Good
const apiKey = process.env.OPENAI_API_KEY;

API Routes

For apps needing backend, add API directory:

your-app/
├── src/
├── api/          # Add this
│   └── hello.js
├── package.json
└── vite.config.js

Build Optimization

Ensure Vite config is production-ready:

// vite.config.js
export default {
  build: {
    minify: 'terser',
    sourcemap: false
  }
}

Troubleshooting

Build Fails

Check package.json has all dependencies:

npm install  # Locally to verify

Environment Variables Not Working

Use import.meta.env in Vite apps:

// Vite apps
const apiKey = import.meta.env.VITE_API_KEY;
 
// Next.js apps
const apiKey = process.env.NEXT_PUBLIC_API_KEY;

API Calls Fail

Enable CORS if calling external APIs:

// Add to your API route
res.setHeader('Access-Control-Allow-Origin', '*');

Next Steps

• Environment Variables
• PostgreSQL Database
• Custom Domains
• Monitoring