Exporting to GitHub

Lovable is excellent for rapid prototyping, but eventually you'll want more control. Exporting to GitHub gives you full access to your code, enabling local development, version control, and the ability to use AI editors like Cursor for deeper modifications.

Why Export to GitHub?

Benefits of Exporting

• Full Code Ownership: The code is yours, in your repository
• Version Control: Track changes with Git commits
• Local Development: Work offline with full IDE features
• Team Collaboration: Share and collaborate with other developers
• AI Editor Integration: Continue with Cursor or other tools
• Custom Deployment: Deploy anywhere, not just Lovable's hosting

When to Export

Export when you need to:

• Add features beyond Lovable's capabilities
• Integrate with external services
• Have developers join the project
• Customize the build process
• Set up CI/CD pipelines
• Ensure long-term maintainability

Prerequisites

Before exporting, ensure you have:

1. GitHub Account: Sign up at github.com
2. Git Installed: Download from git-scm.com
3. Node.js: Version 18 or higher from nodejs.org
4. Code Editor: We recommend Cursor

Exporting Your Project

Step 1: Connect GitHub

In Lovable:

1. Click Settings (gear icon)
2. Go to Integrations or GitHub
3. Click Connect GitHub
4. Authorize Lovable to access your GitHub account

Step 2: Export the Project

1. Open your project in Lovable
2. Click the Export or Push to GitHub button
3. Choose:
   • New Repository: Creates a fresh repo with your code
   • Existing Repository: Pushes to a repo you own
4. Name your repository
5. Choose visibility (public or private)
6. Click Export

Step 3: Verify the Export

Go to GitHub and confirm:

• Repository was created
• All files are present
• README contains project info

Cloning to Your Computer

Step 1: Copy Repository URL

On your GitHub repository page:

1. Click the green Code button
2. Copy the HTTPS URL

Step 2: Clone Locally

Open your terminal and run:

# Navigate to your projects folder
cd ~/projects

# Clone the repository
git clone https://github.com/YOUR_USERNAME/YOUR_REPO.git

# Enter the project directory
cd YOUR_REPO

Step 3: Install Dependencies

# Using pnpm (recommended)
pnpm install

# Or using npm
npm install

Step 4: Set Up Environment Variables

Create a .env.local file for your credentials:

# .env.local
VITE_SUPABASE_URL=https://xxxxx.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key-here

Never commit .env.local to Git—it should already be in .gitignore.

Step 5: Run the Development Server

# Start the app
pnpm dev

# Or with npm
npm run dev

Open http://localhost:5173 to see your app.

Understanding the Project Structure

Lovable generates a standard Vite + React project:

your-project/
├── public/                  # Static assets
├── src/
│   ├── components/          # React components
│   │   ├── ui/              # shadcn/ui components
│   │   └── ...              # Your app components
│   ├── hooks/               # Custom React hooks
│   ├── lib/                 # Utilities and helpers
│   │   ├── supabase.ts      # Supabase client
│   │   └── utils.ts         # Helper functions
│   ├── pages/               # Page components
│   ├── App.tsx              # Main app component
│   ├── main.tsx             # Entry point
│   └── index.css            # Global styles
├── .env.local               # Environment variables (don't commit!)
├── .gitignore               # Git ignore rules
├── index.html               # HTML entry point
├── package.json             # Dependencies
├── tailwind.config.js       # Tailwind configuration
├── tsconfig.json            # TypeScript configuration
└── vite.config.ts           # Vite configuration

Continuing Development with Cursor

Opening in Cursor

# Open the project in Cursor
cursor .

Or open Cursor and use File → Open Folder.

Using Cursor's Features

With the codebase in Cursor, you can:

Ask Questions About the Code

@Codebase How is authentication implemented in this project?

Make Targeted Changes

Add a 'sort by due date' feature to the TaskList component

Refactor with Context

Refactor the task filtering logic into a custom hook

Preserving Lovable Patterns

The code follows conventions that AI tools understand well:

• React functional components
• TypeScript for type safety
• Tailwind CSS for styling
• shadcn/ui components

Continue using these patterns for best AI assistance.

Syncing Changes Back to GitHub

Making Commits

After making changes locally:

# See what changed
git status

# Stage changes
git add .

# Commit with a message
git commit -m "Add sort by due date feature"

Pushing to GitHub

git push origin main

Best Practices for Commits

• Commit often with clear messages
• Use conventional commit format:
  • feat: add task sorting
  • fix: resolve login redirect issue
  • refactor: extract task list logic to hook

Deployment Options

After exporting, you have many deployment choices:

Vercel (Recommended)

# Install Vercel CLI
npm install -g vercel

# Deploy
vercel

Or connect your GitHub repo to Vercel's dashboard for automatic deploys.

Netlify

1. Go to netlify.com
2. Connect your GitHub repository
3. Set build command: pnpm build
4. Set publish directory: dist

Other Options

• Railway: Great for full-stack apps
• Render: Simple deploys with free tier
• Cloudflare Pages: Fast global CDN

Handling Supabase After Export

Environment Variables

Ensure your deployment has the Supabase variables:

VITE_SUPABASE_URL=https://xxxxx.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key

Updating Supabase Schema

After export, manage your database through:

1. Supabase Dashboard: Visual table editor
2. SQL Editor: Run migrations directly
3. Supabase CLI: For professional workflows

# Install Supabase CLI
npm install -g supabase

# Link to your project
supabase link --project-ref your-project-ref

# Pull schema changes
supabase db pull

Common Issues After Export

"Module not found" Errors

# Clear and reinstall dependencies
rm -rf node_modules pnpm-lock.yaml
pnpm install

Environment Variables Not Working

• Check variable prefix: VITE_ for Vite projects
• Ensure .env.local is in the project root
• Restart the dev server after adding variables

Type Errors

Lovable sometimes generates loose TypeScript. To fix:

# Check for type errors
pnpm tsc --noEmit

# Fix issues or add type annotations

Styles Not Loading

Ensure Tailwind is properly configured:

# Check tailwind.config.js includes all content paths
content: [
  "./index.html",
  "./src/**/*.{js,ts,jsx,tsx}",
]

Bidirectional Workflow

You can continue using both Lovable and local development:

1. Prototype in Lovable for rapid iteration
2. Export to GitHub when ready
3. Develop locally for complex changes
4. Keep the Lovable project for quick UI experiments

Note: Changes made locally won't sync back to Lovable. Treat export as a one-way operation for production code.

Summary

• Export to GitHub when you need full control
• Clone locally and install dependencies
• Set up environment variables for Supabase and other services
• Use Cursor for continued AI development
• Deploy anywhere—Vercel, Netlify, or your own infrastructure
• The code uses standard patterns that work well with AI tools

Next Steps

Finally, let's discuss the limitations of AI builders and when it makes sense to move to more traditional development approaches.