Cómo conectar GitHub a Lovable y sincronizar cambios de código
Clase 3 de 19 • Curso de Desarrollo Avanzado con Lovable
Resumen
Master code versioning with confidence: connect GitHub to Lovable, clone your repo with Cursor, run it locally with Bun, make a small UI tweak, and push your changes back so they appear in both GitHub and Lovable. You’ll see how commit history, the lovable-dev-bot, and basic Git commands streamline collaboration.
Why connect GitHub to Lovable?
Linking GitHub ensures you own your code and track every change. Lovable syncs with your repository, so edits—by you or the lovable-dev-bot—are visible in the commit history with full diffs. If you don’t have an account, signing up for GitHub is free and quick.
How to link your GitHub repository?
- Click the GitHub icon on the top right in Lovable.
- Connect to your organization. Add the repository to your account.
- Confirm access to files created during the build.
- From Code, copy the repo URL to your clipboard.
What can you see in commits and files?
- View all project files synced to GitHub.
- See auto-commits by lovable-dev-bot when Lovable changes code.
- Open Commit and review a clear list of changes with messages.
- Refresh to see your own commits when you push from local.
How to clone and run locally with Cursor and Bun?
Working locally lets you test quickly. You’ll clone the repository, install dependencies with Bun, and start a local server to preview changes before pushing.
How to clone the repo in Cursor?
- In Lovable, click Code and copy the repo URL.
- Open Cursor. Click Clone Repo.
- Paste the URL. Choose a repository destination on your desktop.
- Cursor downloads and opens the project automatically.
How to install and run with Bun?
- Open a new terminal inside Cursor.
- Install packages with
bun i
. - Start the dev server with
bun dev
. - Open the local link to preview your app.
How to edit code and push to GitHub and Lovable?
A simple example: increase the title size in the Hero component. Preview locally, then use basic Git to publish. Your change will appear in both GitHub and Lovable.
Where to change the UI size in the hero component?
- Open the Components folder and find the Hero component.
- Manually edit the title size. Set it to 5XL.
- Check the local version to confirm the update.
Which Git commands publish your change?
- Stage changes:
git add
. - Commit with a message:
git commit -m "small change"
. - Push to the remote:
git push
. - Refresh GitHub’s commit history to see your author entry.
- In Lovable, scroll to view the new change. Click code to inspect the diff.
Skills you apply here include code versioning (tracking changes over time), cloning (copying the repository to your machine), local development with Bun (bun i
, bun dev
), and Git workflow (add, commit, push). Concepts like commit history, diffs, and the lovable-dev-bot help your team coordinate manual edits with prompt-driven updates.
What would you like to customize next in your app? Share your idea and the change you plan to push.