How to Import an Existing GitHub Repository into Lovable (2026 Guide)

Why Import Instead of Rebuild?

If you already have a working frontend in React, Vite, or TanStack Start, rebuilding it from a prompt is wasted work. Importing lets you keep your commit history, existing components, and integrations while gaining Lovable's AI agent, live preview, and one-click publishing. This is the fastest path for teams who have already shipped an MVP and want AI-assisted iteration without leaving their codebase behind.

Repo Requirements Before You Import

Lovable expects a Vite-based React/TypeScript project (or the new TanStack Start template). Your repo should have a single package.json at the root, a working dev script, no monorepo/workspaces, and Tailwind v3 or v4 configured. If you're on Create React App, migrate to Vite first — CRA is no longer supported in 2026. Remove any custom webpack config; the import will fail silently if Vite can't boot.

Step 1 — Connect Your GitHub Account

In Lovable, click "New Project" → "Import from GitHub". Authorize the Lovable GitHub App and grant access to the specific repo (not your whole org). The agent reads the repo, installs dependencies in the sandbox, and boots a preview within 60–90 seconds.

Step 2 — Move Secrets to Lovable Cloud

Your .env.local won't come over. Open the Cloud panel and add each secret (Supabase keys, Stripe keys, OpenAI keys) as a managed secret. Reference them in code via import.meta.env for client-safe values and process.env inside server functions. Never commit .env to the repo.

Step 3 — Verify the Preview Boots

Watch the build logs in Lovable. Common failures: missing peer dependencies, postinstall scripts that need native binaries, or imports from paths that don't exist. Fix these once in the editor and the agent will keep working from a green state.

Step 4 — Hand Off to the Agent

Once the preview is live, prompt the agent: "Read the current codebase, then summarize the architecture." It will index your files and propose changes that match your existing patterns. From there, every prompt is an incremental edit on top of your real code.

Common Pitfalls and How to Fix Them

Tailwind config not detected: move tailwind.config.js to the project root. Aliases like @/components not resolving: check vite.config.ts and tsconfig.json paths. Server-side env vars undefined: read them inside the .handler() of a server function, never at module scope. Build passes locally but fails in Lovable: pin your Node version in package.json engines.

When Importing Is the Wrong Choice

If your repo is a Next.js Pages Router app, an Angular project, a Rails monolith, or anything Vue/Svelte, don't import — Lovable will not be able to edit it productively. Instead, use Lovable to generate a fresh frontend and connect it to your existing backend via REST or GraphQL.