How to Migrate Your Lovable or Bolt App Into a Real Codebase

There's a predictable moment in every vibe-coding project: the app builder that got you started suddenly can't go further. You run out of tokens, or you need a feature the builder won't do, or the same prompt that worked yesterday now breaks something else. That's the signal it's time to move your app into a real codebase — where an AI agent like Cursor or Claude Code can do things the builder never could.

Here's the step-by-step, written for someone who's never done it.

When It's Time to Migrate

You don't move off a builder for fun — you move when you hit one of these:

• You're burning through the builder's credits or token limit faster than you can build.
• You need something specific (a background job, a complex integration, custom logic) the builder keeps fumbling.
• Edits are getting riskier — fixing one thing breaks another, and you can't see why.
• You want to actually own and host the app yourself instead of renting a platform.

If none of those apply yet, stay in the builder — it's faster for early work. When they do, read on.

Step 1: Get Your Code Out

Both major builders export a standard React project. The cleanest path is GitHub, because it gives you version history for free.

Lovable

Lovable has native GitHub sync on every plan, including free. In your project, open the GitHub integration (under settings/connectors), click Connect to GitHub, and authorize it. Lovable creates a repository and pushes your code, then keeps it in sync. Your app comes out as a real React + Supabase project.

Bolt.new

Bolt gives you two options, both on the free plan:

• Download a ZIP: click the project title, then Export → Download, and you get the full project folder.
• Push to GitHub: connect your GitHub account and export the project into a new repo.

GitHub is the better choice if you can — it's your safety net. For how the builders compare on export quality, see Lovable vs Bolt vs Replit.

Step 2: Open It Locally in Cursor or Claude Code

Now bring the AI with you. Install Node.js if you haven't, then:

1. Get the project on your machine. If you used GitHub, clone the repo (in Cursor: Clone Repo from the start screen; with Claude Code, git clone <your-repo-url>). If you downloaded a ZIP, unzip it and open the folder.
2. Install the dependencies. In the project folder's terminal:

npm install

3. Run it locally:

npm run dev

You'll get a local URL (usually http://localhost:5173). Open it — and don't panic if something's broken. It almost certainly is, for one specific reason covered next.

Step 3: Re-Add Your Secret Keys (the #1 Gotcha)

App builders hide your secret keys — your Supabase URL and keys, any API keys — behind their own interface. When you export, those don't come with the code (and they shouldn't, for security). So a freshly exported app runs but can't connect to its database, and looks broken.

The fix: create a .env file in the project root and add the keys yourself. You'll find them in your Supabase project dashboard (or whatever services your app uses). The variable names are usually already referenced in the code — look for something like:

VITE_SUPABASE_URL=your-project-url
VITE_SUPABASE_ANON_KEY=your-anon-key

Restart npm run dev and the app should come to life. (Never commit .env to GitHub — see keeping secrets safe in AI code for why and how.) If your app uses Supabase, our Supabase guide covers where each key lives.

Step 4: Add What the Builder Couldn't

This is the payoff. With the project open in Cursor or Claude Code, you prompt the same way you did in the builder — except now the AI can see and change every file, run the app, and check its own work. Ask it to add the feature that was stuck:

"Add a background job that emails users a weekly summary."

Because you're in a real codebase, the AI can install packages, wire up new files, and run things — the moves a sandboxed builder couldn't make. Work in small steps and review each change (you have git history now, so mistakes are cheap to undo).

Step 5: Deploy It Yourself

You no longer need the builder's hosting. A React app deploys free on Vercel or Netlify:

1. Connect your GitHub repo to Vercel (or Netlify).
2. Add your environment variables in the host's dashboard (the same keys from your .env).
3. Deploy — and every future git push auto-deploys.

Our deploy-your-first-app guide walks through it click by click.

The Honest Reality Check

Migrating gives you control, lower costs, and no more builder ceiling. It also hands you responsibilities the builder was quietly covering: managing your own keys, reviewing AI changes, and owning deploys. And the exported code is AI-generated — it runs, but it'll have rough edges you may want the AI to clean up over time.

The trade is almost always worth it once you've outgrown the sandbox. You're not exporting perfect code — you're exporting the ability to fix and extend it, with an AI agent that's no longer boxed in. New to the version-control side of this? Start with our git survival guide for vibe coders.