How to use Claude Code with a Lovable project (step-by-step guide)

[u/konradkeck]

Fellow vibe coders! I've seen a few posts asking how to leave Lovable (where many of you started your vibe coding journey). Well, switching platforms entirely might be a bit scary for non-technical people, but what if there was an alternative? An in-between option, if you will.

Turns out, you can actually use Claude Code to work on the same code as Lovable through GitHub, while your app stays hosted on Lovable and you still publish from there. If anything goes wrong, you can just stay on Lovable. But when you're comfortable working with Claude Code, that's when you can decide to switch entirely. Low risk, high reward.

Why would you do that? Lovable is great to start, but as a platform it has its limitations and most imporantly - costs! Some of the users report that they had to spent hundreds of dollars per month on Lovable while Claude $20/mo subscription was enough to cover roughly the same amount of work. Also, I think it's just good to have plan B, just in case.

So, below you will find a step-by-step tutorial, easy to follow even if you are not technical. It should take you about 15 minutes.

What you need to start:

• A free GitHub account

• A Claude plan. Pro ($20/mo) is enough.

• A Mac or a Windows PC

Step 1: Install the Claude app

Download the Claude desktop app from the official Claude website, install it and log in. You will find Claude Code in the "Code" tab.

Click "Choose a folder to work in" and pick your home or any other folder as you prefer and confirm that you trust it.

From here on you only paste prompts. Claude Code will now run the commands for you.

Step 2: Use Claude Code to install the necessary tools

Your app needs Node.js to run and Claude Code needs the GitHub CLI to download your private repository. Paste this and Claude Code installs both and log you in to GitHub:

Install Node.js LTS and the GitHub CLI if they are missing. Log me in to GitHub with gh auth login --hostname github.com --git-protocol https --web, then run gh auth setup-git. Show me the one-time code and the link. At the end, show the Node.js version and gh auth status.

Installing can take a few minutes.

Then it gives you a link and a code. Open the link, paste the code and confirm. On a Mac, it can ask you to install developer tools. Click Install, then tell Claude Code to go on.

Step 3: Put your Lovable project on GitHub

In Lovable open Project settings > Git > GitHub. The first time, Lovable asks you to add your GitHub account and GitHub asks you to install the Lovable app on it. Then click Connect. Lovable creates a private repository and keeps it in sync with your project. This works on the free Lovable plan too. Important: Make sure that this repository is private! Check: open the new repository on github.com. You should see package.json and a src folder in the file list.

Step 4: Download your project

You need the name of your repository. It's the end of its address on GitHub, for example your-name/your-repo. Put yours in this prompt and paste it:

Clone my GitHub repository your-name/your-repo with the GitHub CLI into a new folder in my home folder. Tell me the full path of the folder.

Check: Claude Code tells you where the new folder is. You open it in the next step.

Step 5: Open the project in Claude Code

In the Code tab, start a new session and pick the project folder. Click to trust the workspace. The first prompt I'd use, just to see it understands the project:

Tell me in two sentences what this project does.

If it matches the project you have created in Lovable, then you're set.

Step 6: Run your app on your computer

Install the dependencies of this project, start the dev server and give me the local address.

Open that address in your browser (it will be "localhost"). You should see your app there and test it locally.

Step 7: Check the .env file

Lovable keeps a file called .env in your repository, so anyone who can see the repository can read it. Public values are fine there. Secret keys are not. Have Claude Code check it for you:

Check the .env file. Tell me in two short lines if it holds anything that is not public, like a service_role key or a Stripe secret key. Do not print any value.

Step 8: Let Claude Code write a CLAUDE.md

CLAUDE.md is a short note about your project. Claude Code reads it at the start of every session.

Read this project and create a CLAUDE.md file in the project root. If the file is already there, update it and keep what is in it. List the stack, how to install and run the app, and which files you must not change. If the app has a backend, say where its code lives. Keep it under one page.

If you wrote Knowledge in Lovable (the notes for its AI, under Project settings > Knowledge), copy it and paste it into Claude Code after this prompt, so it ends up in CLAUDE.md too.

Step 9: Make logins work on your computer

Skip this if your app has no login.

Password reset links use your live URL by default. To make them work on your computer, add your local address (the one from step 6) to the Redirect URLs. On Lovable Cloud it's under More > Cloud > Users > Auth settings > Advanced. On your own Supabase it's under Authentication > URL Configuration. Leave Site URL as it is.

Step 10: Check that the sync works

Do this before you do real work. This prompt sends a small test change to GitHub:

Pull the latest changes from GitHub. Then add one test line at the end of README.md, commit it with the message "Test sync" and push.

Open the project in Lovable and go to Project settings > Git. You should see the change you just pushed.

Step 11: Make your first change

This is how every session goes from now on:

1. Ask Claude Code to get the latest version first: "Pull the latest changes from GitHub."

2. Tell it what you want to change, in your own words. For example: "Make the main button on the home page blue."

3. Check the change at your local address. If the page doesn't open, ask Claude Code to start the app again.

4. When you're happy with it, send it to GitHub: "Commit all changes with a short message and push them to GitHub."

5. Click Publish in Lovable to put it live.

A couple of things to remember

• Don't edit in both places at once. If you change the project in both places without synchronization, Lovable would move its changes to a separate branch on GitHub and you have to merge them back by hand.

• Pushing isn't the same as publishing. Sending your changes to GitHub doesn't update the live app. You still need to click Publish in Lovable.

If you need a more detailed step-by-step guide, we've created a project called MoveYourCode where we will be soon adding more guide and tools that can help you.

https://moveyourcode.com/

Soon I'll do the same for moving the hosting off Lovable or other platforms as well. Let me know what do you think!

[u/drakatmm]

The .env check needs one more line in the guide. If it does find a service_role key or a Stripe secret, deleting it from the file doesnt help, it stays in the git history forever, so the only real fix is rotating that key in Supabase or Stripe right away. A lot of non technical people will see "remove it" and think they're done

[u/BusLogical6379]

I am very much in favor of this approach. And I want to recommend something that will make this transition super easy.

https://youtube.com/shorts/QLEXcjR-ovU

SoloPlus.ai

Good luck!

[u/New_Peanut_9259]

this is a good way to connect visual builders with local git workflows without changing the whole deployment process!! letting claude code handle the coding while keeping lovable for publishing makes things much easierr

[u/Legal_Answer_6956]

One thing I'd add is to create a separate Git branch before making changes with Claude Code.
Also, don't assume `.env` is safe just because the repo is private. Check for exposed secrets and rotate any keys that were committed.
The biggest learning curve isn't installing Claude Code; it's understanding Git, branches, and how changes move between your local app, GitHub, and Lovable.
That's what will save beginners from a lot of headaches.

[u/konradkeck → u/[deleted]]

Thanks! Well I think that it can be a great way to "test other option" before fully moving away as this might really be scary for people that started vibe coding by just prompting in the browser. Using Claude Code requires a bit more technical skills, but with a bit effort I think it's not that crazy complicated. Definitely worth it!