Deploying Bolt.new Apps

Building an app in Bolt.new is only half the journey. To share your creation with the world, you need to deploy it. This lesson covers your deployment options and how to get your app live.

Deployment Overview

When deploying from Bolt.new, you have several paths:

1. Export to GitHub → Deploy from repo
2. Download and deploy manually
3. Direct integration (when available)

Most deployment platforms connect to GitHub, making that the recommended first step.

Exporting to GitHub

Step 1: Connect GitHub

1. Click the Export button in Bolt's toolbar
2. Select GitHub
3. Authorize StackBlitz to access your GitHub account
4. Choose repository settings:
   • New repository: Creates fresh repo
   • Existing repository: Pushes to existing repo

Step 2: Configure Repository

When creating a new repository:

• Name: my-bolt-app (no spaces, lowercase)
• Visibility: Public or Private
• Description: Optional project description

Step 3: Push Code

Click Export and wait for:

• Repository creation
• Code upload
• Initial commit

Your complete project is now on GitHub.

Deploying to Vercel

Vercel is ideal for Next.js apps (and works with other frameworks).

Method 1: Import from GitHub

1. Go to vercel.com
2. Sign in with GitHub
3. Click Add New → Project
4. Select your repository
5. Configure settings:
   • Framework: Auto-detected (Next.js, Vite, etc.)
   • Build Command: Usually npm run build
   • Output Directory: Usually dist or .next
6. Click Deploy

Method 2: Vercel CLI

After downloading your project:

# Install Vercel CLI
npm install -g vercel

# Navigate to project
cd my-bolt-app

# Deploy
vercel

Follow the prompts:

• Link to existing project or create new
• Confirm settings
• Wait for deployment

Environment Variables

If your app needs secrets:

1. Go to Project Settings → Environment Variables
2. Add your variables:
   • DATABASE_URL
   • API_KEY
   • etc.
3. Redeploy for changes to take effect

Custom Domains

1. Go to Project Settings → Domains
2. Add your domain: myapp.com
3. Configure DNS as instructed
4. Wait for SSL certificate

Deploying to Netlify

Netlify works great for static sites and serverless functions.

From GitHub

1. Go to netlify.com
2. Sign in with GitHub
3. Click Add new site → Import an existing project
4. Choose your repository
5. Configure build settings:
   • Build command: npm run build
   • Publish directory: dist (or build, .next, etc.)
6. Click Deploy site

Netlify CLI

# Install Netlify CLI
npm install -g netlify-cli

# Login
netlify login

# Deploy from project directory
netlify deploy

# Deploy to production
netlify deploy --prod

Netlify Functions

If your app uses API routes:

Configure the app to use Netlify Functions instead of
API routes for serverless deployment.

Create netlify.toml:

[build]
  command = "npm run build"
  publish = "dist"
  functions = "netlify/functions"

[[redirects]]
  from = "/api/*"
  to = "/.netlify/functions/:splat"
  status = 200

Deploying to Railway

Railway handles full-stack apps with databases.

Setup

1. Go to railway.app
2. Sign in with GitHub
3. Click New Project → Deploy from GitHub repo
4. Select your repository

Database Integration

Railway can provision databases:

1. Click New → Database
2. Choose PostgreSQL, MySQL, or MongoDB
3. Copy connection string to environment variables

Configuration

Railway auto-detects most settings. Override if needed:

# Set in Railway dashboard or railway.json
{
  "build": {
    "builder": "NIXPACKS"
  },
  "deploy": {
    "startCommand": "npm start",
    "healthcheckPath": "/api/health"
  }
}

Deploying to Cloudflare Pages

Fast, global CDN for static and edge-rendered apps.

From GitHub

1. Go to Cloudflare Dashboard
2. Select Pages → Create a project
3. Connect GitHub and select repository
4. Configure build:
   • Framework preset: Select your framework
   • Build command: npm run build
   • Build output: dist
5. Deploy

Workers for Server-Side

For Next.js or full-stack apps:

Configure the app for Cloudflare Workers deployment
using @cloudflare/next-on-pages.

Downloading for Local Deployment

Export as ZIP

1. Click Export → Download
2. Extract the ZIP file
3. Open in terminal

Local Setup

# Navigate to project
cd my-bolt-app

# Install dependencies
npm install

# Build for production
npm run build

# Preview production build
npm run preview

Deploy to Any Host

With the built files, deploy anywhere:

Traditional Hosting (cPanel, etc.)

• Upload dist folder contents to public_html

Docker

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

VPS (DigitalOcean, AWS EC2)

# SSH to server
ssh user@server

# Clone repo
git clone https://github.com/user/my-app.git

# Install and run
cd my-app
npm install
npm run build
npm start

Framework-Specific Considerations

Next.js

Static Export (no server required):

// next.config.js
module.exports = {
  output: 'export'
}

Server Required:

• Use Vercel, Railway, or platforms with Node.js

Vite/React

Always static—deploy anywhere:

• Vercel, Netlify, Cloudflare Pages
• S3 + CloudFront
• GitHub Pages

Express Backend

Requires Node.js hosting:

• Railway, Render, Fly.io
• Heroku, DigitalOcean Apps
• Self-hosted VPS

Database Considerations

SQLite Limitations

SQLite databases created in Bolt don't persist in most serverless environments:

Convert the app to use PostgreSQL instead of SQLite
for production deployment.

Database Options

Serverless-Friendly:

• Supabase (PostgreSQL)
• PlanetScale (MySQL)
• Turso (SQLite edge)
• MongoDB Atlas

Traditional:

• Railway PostgreSQL
• AWS RDS
• Self-hosted

Migration Example

Update the database code to use Supabase instead of SQLite:
1. Remove better-sqlite3
2. Add @supabase/supabase-js
3. Update all database queries to use Supabase client
4. Add environment variables for Supabase URL and key

Post-Deployment Checklist

Environment Variables

Verify all secrets are configured:

• Database connection string
• API keys
• Authentication secrets
• Third-party service credentials

Domain Configuration

• Custom domain connected
• SSL certificate active
• www redirect configured
• DNS propagated

Performance

• Build output is optimized
• Images are compressed
• Caching headers set
• CDN configured (if applicable)

Monitoring

• Error tracking (Sentry, etc.)
• Analytics (Plausible, etc.)
• Uptime monitoring
• Log access configured

Common Deployment Issues

Build Failures

Missing dependencies:

# Ensure package.json is complete
npm install
npm run build

Node version mismatch:

// package.json
{
  "engines": {
    "node": ">=18.0.0"
  }
}

Runtime Errors

Environment variables missing:

• Check the deployment platform's env var settings
• Ensure variable names match exactly

Database connection failed:

• Verify connection string
• Check network/firewall rules
• Confirm database is running

404 Errors on Routes

SPA routing issues:

# netlify.toml
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

# vercel.json
{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

Continuous Deployment

Once connected to GitHub, most platforms auto-deploy on push:

1. Make changes locally
2. Commit and push to GitHub
3. Platform detects changes
4. Automatic rebuild and deploy

Preview Deployments

Many platforms create preview URLs for pull requests:

• Vercel: Automatic preview for each PR
• Netlify: Deploy previews
• Cloudflare: Preview deployments

Summary

• Export to GitHub first—most platforms integrate with it
• Choose your platform based on your app type:
  • Static sites: Vercel, Netlify, Cloudflare Pages
  • Full-stack: Vercel, Railway, Render
  • With database: Railway, Render, or any + Supabase
• Configure environment variables on your deployment platform
• Set up custom domains for professional URLs
• Enable continuous deployment for automatic updates

Next Steps

Now that you can build and deploy with Bolt.new, let's compare it with other AI builders to understand when each tool is the best choice.