Deploy Your Bolt App to Netlify
Publish an app you built in Bolt.new to Netlify, either with Bolt’s one-click Netlify integration or by connecting your repository for continuous deploys.
Bolt.new turns a prompt into a working web app inside your browser. Once you have something you want to share, you need a place to host it. Netlify runs Bolt apps natively: you can publish straight from the Bolt editor without downloading a single file. Developers built and deployed more than one million Bolt sites on Netlify in the five months after the integration launched (Netlify press release).
This guide covers three paths, from the fastest to the most flexible:
- Publish from inside Bolt with the built-in Netlify integration. One click, no files to move.
- Drag the built files to Netlify Drop if you exported the project and want a quick manual deploy.
- Connect the GitHub repository for automatic deploys every time you change the code.
Prerequisites
- A Bolt.new project that runs (Bolt often scaffolds a Vite + React + TypeScript app, though it can also generate Next.js and other frameworks).
- A Netlify account. The free plan hosts production sites within a monthly usage allowance.
- For the Git path: a GitHub, GitLab, Bitbucket, or Azure DevOps account.
Option 1: Publish from inside Bolt
Bolt ships a first-party Netlify integration, which is the easiest way to run a Bolt project on Netlify.
- Connect Bolt to your Netlify account first. Open your Bolt account settings, find Applications, and authorize Netlify. Bolt documents this step in its Netlify integration guide.
- In your project, open project settings (the gear icon, then All project settings).
- Go to Domains & Hosting and select Netlify as the hosting provider.
- Close settings and click Publish in the top right.
- Click the second Publish button that appears to confirm.
Bolt builds the project and returns a live netlify.app URL in the chat, usually within a minute. On a Bolt Teams plan, you can rename the subdomain with the pencil icon next to the URL.
One caveat worth knowing before you start: Bolt also offers its own hosting, and once you publish a project to Bolt hosting you cannot move that same project to Netlify (you would start a fresh copy). Choose Netlify in Domains & Hosting before you first publish.
Option 2: Drag the built files to Netlify Drop
Use this when you have exported a project and want a one-off deploy with no account linking.
- In Bolt, click the project title in the top left, then Export, then Download. You get a
.zipof the full project. - Unzip it and open a terminal in the project folder.
- Install and build:
A Vite project writes the finished site to anpm installnpm run build
dist/folder. Create React App writes tobuild/instead, so check which one your project produced. - Go to app.netlify.com/drop and drag the
dist/folder onto the page. Netlify uploads the files and returns a live URL.
Netlify Drop deploys the finished static files, so you drag the build output (dist/), not the raw project. You run the build step yourself before dropping.
Option 3: Connect the repository for continuous deploys
This path is the best fit for any Bolt app you plan to keep editing. Every push redeploys the site automatically, and every pull request gets its own preview URL.
- In Bolt, push the project to a GitHub repository. Bolt runs on StackBlitz, which can create a repo directly from your project (Bolt project files docs).
- In Netlify, choose Add new site, then Import an existing project, and select your repository.
- Confirm the build settings. For a Vite + React app:
- Build command:
npm run build - Publish directory:
distNetlify detects these automatically for common frameworks. See the Vite setup guide for the specifics.
- Build command:
- Add a redirect rule so client-side routes survive a page refresh. Create a
public/_redirectsfile (Vite copies it intodist/) with:/* /index.html 200 - Deploy. Netlify builds the site and gives you a URL. From now on, every commit triggers a new deploy.
Add environment variables
If your Bolt app calls an API or a backend, it depends on environment variables (for example a Supabase URL and key). Bolt stores these in its own environment; Netlify does not see them until you add them. Client-side frameworks only expose variables with the right prefix (VITE_ for Vite, NEXT_PUBLIC_ for Next.js), so name them the way your framework expects.
- In the Netlify UI: Site configuration, then Environment variables, then add each key and value.
- With the Netlify CLI:
netlify env:set MY_KEY value.
Rebuild the site after adding variables so the new values reach your app.
Set up a database
Bolt creates a database automatically when your app needs one — its built-in managed cloud database (Postgres) provisions with no signup or configuration, so a Bolt app with data persistence already has one, though Bolt may pause an unused database after a period of inactivity (Bolt database docs). That zero-config setup is a genuine convenience. Netlify has a close counterpart: Netlify Database, a fully managed Postgres database built into the platform. It takes one explicit setup step rather than appearing automatically, but in return every deploy preview — and every AI agent run — gets its own isolated database branch of the data.
Provision it with an Agent Runner
One low-effort way to stand up a database on Netlify is to let an Agent Runner do it. In your Netlify project dashboard, choose Build with an AI Agent, pick an agent (Claude Code, Codex, or Gemini), and give it a prompt like:
Add a Netlify Database to this project. Recreate the tables my Bolt app used — for example a
todostable withid,title,completed, andcreated_atcolumns — generate the migrations undernetlify/database/migrations/, and update my data-access code to read and write from Netlify Database.
The agent provisions the database, scaffolds the schema as migrations, and wires up the queries. Every agent run gets its own database branch based on production data, so it can iterate on the schema in isolation before you publish to production (Netlify Database). Note that Agent Runners run on credits, and your plan sets quotas for databases and branches, so heavy use draws from your credit pool.
Prefer to set it up yourself? Run netlify database init in your project. It’s an interactive guide that installs @netlify/database, lets you pick Drizzle ORM or direct SQL, and scaffolds a starter migration under netlify/database/migrations/. Netlify provisions the database and applies your migrations on deploy (getting started).
Bring your existing data over
If you already have data in Bolt’s cloud database, export it before you switch. To export from Bolt:
- Log into your Bolt project.
- Click the database/table icon in the top center of your screen.
- Select the table you want to export.
- Select one or more rows of data.
- Click the Export button that appears above the top-right corner of your data view.
- Choose CSV or JSON to download the file.
Then load those rows into Netlify Database. For a small dataset, add them as seed data in a SQL migration under netlify/database/migrations/ and deploy — Netlify applies the migration. For a larger export, a one-off import script or function is more robust than baking data into a migration. Either way, check that column types line up between Bolt’s tables and your new schema before importing, so the data lands cleanly.
Troubleshooting
The build fails on Netlify but worked in Bolt. Bolt runs on Node inside a StackBlitz WebContainer, which can differ from Netlify’s build image. Set the Node version explicitly with a .nvmrc file or a NODE_VERSION environment variable to match what Bolt used.
The site loads but routes 404 on refresh. Your app uses client-side routing without the SPA redirect. Add the /* /index.html 200 rule from Option 3.
The page is blank. Check the publish directory. Vite outputs dist; Create React App outputs build. Pointing Netlify at the wrong folder serves an empty page.
A feature that worked in Bolt is broken live. Look for a missing environment variable or an API that only accepted requests from Bolt’s preview domain. Add the variable in Netlify and update any allowed-origin lists on your backend.
Keep building
Once your Bolt app lives on Netlify, the Bolt builder’s guide to Netlify walks through what to do next: custom domains, forms, and functions. If you connected a repository, you already have deploy previews on every pull request, so you can review changes before they reach production.