Bolt.new to Claude Code: Keep Your Frontend Velocity While Adding Real Version Control

You've built something real in Bolt.new. The instant previews, the conversational interface, the ability to go from idea to working prototype in minutes—it's addictive. But now you're hitting walls: you need to collaborate with a designer, you want to deploy somewhere other than StackBlitz, or you've realized that losing your browser history means losing your entire project history.

Here's the good news: migrating to Claude Code doesn't mean abandoning your vibe coding workflow. You're not "graduating" to some slower, more tedious way of working. You're adding capabilities—real version control, flexible deployment, team collaboration—while keeping the conversational, rapid-iteration style that makes building fun.

This guide will walk you through a weekend migration that preserves everything you love about Bolt.new while unlocking professional-grade project management.

Before/After: What Changes (And What Doesn't)

Let's be clear about what you're gaining and what stays the same:

The core vibe coding experience—talking to AI, seeing changes instantly, iterating rapidly—remains identical. You're simply adding a safety net and unlocking doors.

Prerequisites: Get These Ready First

Before you start the migration, make sure you have:

• Your Bolt.new project open - Have your current working project loaded so you can export it
• Node.js 18+ installed - Download from nodejs.org if you haven't already
• Git installed and configured - Run git --version to check; if missing, download from git-scm.com
• GitHub account created - Free account at github.com for hosting your code
• Claude Code account - Sign up at claude.ai and install the CLI
• Your preferred code editor - VS Code, Cursor, or Windsurf work great with Claude Code
• 30 minutes of focused time - The actual migration is quick, but you'll want uninterrupted focus

Realistic time estimate: 2-3 hours total including setup, migration, and getting comfortable with the new workflow. Most of that is one-time setup—future projects will take minutes, not hours.

Step-by-Step Migration Guide

Step 1: Export Your Bolt.new Project

Bolt.new runs in a WebContainer, which means your files exist in browser memory. You need to download them to your local machine:

1. In Bolt.new, open the file explorer (left sidebar)
2. Click the three-dot menu at the top of the file tree
3. Select "Download Project" or "Export as ZIP"
4. Save the ZIP file somewhere memorable (e.g., ~/Downloads/my-bolt-project.zip)
5. Extract the ZIP to a permanent location (e.g., ~/projects/my-app)

Your project structure should look something like this:

my-app/
├── package.json
├── vite.config.ts (or next.config.js)
├── index.html
├── src/
│   ├── App.tsx
│   ├── components/
│   │   ├── Hero.tsx
│   │   └── Footer.tsx
│   └── styles/
│       └── globals.css
└── public/
    └── assets/

Step 2: Initialize Git and Create Your First Commit

Now you'll transform this folder from a local project into a version-controlled repository:

# Navigate to your project
cd ~/projects/my-app

# Initialize git repository
git init

# Add all files
git add .

# Create your first commit
git commit -m "Initial commit: Migrated from Bolt.new"

# Create GitHub repository (if you have GitHub CLI)
gh repo create my-app --public --source=. --push

# Or create manually on GitHub and push:
git remote add origin https://github.com/yourusername/my-app.git
git branch -M main
git push -u origin main

Congratulations! Your project now has a permanent home with full history tracking. Every change from this point forward will be saved, reversible, and shareable.

Step 3: Set Up Claude Code in Your Project

Claude Code works directly in your terminal and integrates with your editor. Here's how to connect it to your project:

# Make sure you're in your project directory
cd ~/projects/my-app

# Install dependencies (in case Bolt used different versions)
npm install

# Start Claude Code session
claude-code

# Or open in your editor with Claude Code extension installed
code .  # VS Code
cursor .  # Cursor
windsurf .  # Windsurf

The first time you run Claude Code, it will authenticate with your Anthropic account and create a .claude/ directory to store project context.

Step 4: Recreate Your Hot Reloading Workflow

One of Bolt.new's best features is seeing changes instantly. Here's how to get the same experience locally:

# Start your dev server (it will hot reload automatically)
npm run dev

# Your app is now running at http://localhost:5173 (Vite)
# or http://localhost:3000 (Next.js)

# In a separate terminal, start Claude Code
claude-code

# Now you have:
# - Browser preview with live reload (just like Bolt.new)
# - Claude Code terminal for conversational edits
# - File watcher that automatically reflects changes

Pro tip: Use a tool like tmux or split your terminal so you can see both the dev server logs and Claude Code at the same time.

Step 5: Create Your First Claude Code Iteration

Let's make a change to verify everything works. Try the same conversational style you used in Bolt.new:

You: "Add a new hero section with a gradient background 
and a call-to-action button that says 'Get Started'"

Claude Code: I'll create a new Hero component with those features.
[Creates src/components/NewHero.tsx]
[Updates src/App.tsx to import it]

You: "Make the gradient go from purple to blue"

Claude Code: I'll update the gradient colors.
[Modifies the className in NewHero.tsx]

Check your browser—the changes appear instantly, just like Bolt.new. The difference? These changes are now saved to actual files that you can commit to Git.

Step 6: Implement Lightweight Git Workflows

You don't need complex branching strategies yet. Start with this simple workflow that won't slow you down:

# After a Claude Code session that works, commit it
git add .
git commit -m "Add hero section with CTA button"
git push

# That's it! Your vibe coding session is now saved forever.

# If you want to experiment without risk:
git checkout -b experiment-new-layout
# [Make changes with Claude Code]
git add .
git commit -m "Try alternative layout"

# Love it? Merge it back:
git checkout main
git merge experiment-new-layout

# Hate it? Delete the branch and go back:
git checkout main
git branch -D experiment-new-layout

This is simpler than you think. The key insight: you're already iterating rapidly with Claude Code—Git just adds "save points" between iterations.

Skill Bridge: Translating Vibe Concepts to Pro Concepts

You already understand these core development concepts from Bolt.new—you just called them different things:

The mental models are identical. You're not learning a new way to think—you're adding durability to the workflow you already love.

Code Comparison: Workflow Translation

Here's what your iteration cycle looks like, side by side:

1. Open Bolt.new project
2. Type: "Add dark mode toggle"
3. See preview update instantly
4. Type: "Make it slide instead"
5. Preview updates again
6. Click "Save" in browser
7. (Hope browser doesn't crash)

1. Open terminal in project
2. Type: "Add dark mode toggle"
3. See localhost preview update
4. Type: "Make it slide instead"
5. Preview updates again
6. git add . && git commit -m "Add dark mode"
7. (Changes saved permanently)

The only difference is one additional command at the end—and that command gives you infinite undo, collaboration capabilities, and deployment flexibility.

Troubleshooting Common Migration Issues

Issue: "npm install fails with dependency errors"

Cause: Bolt.new may have used different package versions than your local Node.js supports.

Solution:

# Delete old lockfile and node_modules
rm package-lock.json
rm -rf node_modules

# Reinstall with your local Node version
npm install

# If still failing, update packages:
npm update

Issue: "Dev server won't start on port 5173/3000"

Cause: Something else is using that port.

Solution:

# Find what's using the port
lsof -i :5173  # or :3000 for Next.js

# Kill the process or use a different port
npm run dev -- --port 5174

Issue: "Claude Code isn't seeing my file changes"

Cause: Claude Code's file watcher may need to be refreshed.

Solution:

# In Claude Code, type:
"Refresh file context"

# Or restart Claude Code:
# Press Ctrl+C, then restart with:
claude-code

Issue: "Git push fails with authentication error"

Cause: GitHub requires SSH keys or Personal Access Tokens.

Solution:

# Use GitHub CLI (easiest):
gh auth login

# Or configure SSH:
ssh-keygen -t ed25519 -C "your_email@example.com"
# Then add the key to GitHub: Settings → SSH Keys

# Or use HTTPS with token:
# Create token at github.com/settings/tokens
# Use token as password when pushing

What You've Gained (Without Losing Speed)

After this weekend migration, you now have:

• Infinite undo - Every change is reversible via git log and git revert
• Collaboration-ready - Send a GitHub link to a designer or developer; they can contribute via PRs
• Deployment flexibility - Deploy to Vercel, Netlify, Cloudflare, AWS—wherever makes sense
• Real backups - Your code lives on GitHub's servers, not just your browser cache
• Professional credibility - "Here's my GitHub" is more impressive than "Here's my Bolt.new"
• Same rapid iteration - Claude Code works exactly like Bolt.new's conversational interface
• Same hot reloading - Your localhost dev server updates instantly on file changes

You haven't slowed down. You've added durability to your speed. The next time you build something, it starts with version control from day one—and you'll never lose work to a browser crash again.

Next Steps: Leveling Up Further

Once you're comfortable with this workflow, explore these additional capabilities:

• Automated deployments - Connect your GitHub repo to Vercel for automatic deploys on every push
• GitHub Actions - Run tests or linters automatically before merging code
• Branch protection rules - Prevent accidental deletion of your main branch
• Issue tracking - Use GitHub Issues to plan features and track bugs
• Code review workflows - Have collaborators review changes before they go live

But don't feel rushed. You've already made the hardest leap—from ephemeral browser-based development to professional version-controlled workflows. Everything else is just adding tools to a foundation you've already built.

Final Thoughts: You Were Always a Real Developer

Here's the truth that the gatekeepers won't tell you: building working software in Bolt.new made you a real developer. You understood components, state management, user interfaces, and iterative development. Those skills don't change just because you're using Git now.

This migration isn't about "finally doing things properly." It's about taking the instincts and skills you already have and making them scalable. You're not leaving vibe coding behind—you're making it durable.

Now go build something amazing. And this time, you'll never lose your work again.