Lovable Complete Setup Guide: GitHub Integration, Supabase Backend & Custom Domain Deployment
Lovable Complete Setup Guide: From GitHub Integration to Supabase Backend and Custom Domain Deployment
Lovable is an AI-powered full-stack app builder that lets you go from idea to deployed application using natural language prompts. This guide walks you through every step — connecting GitHub, auto-configuring a Supabase backend, and deploying with a custom domain — so you can ship your first AI-built full-stack app with confidence.
Prerequisites
- A GitHub account (free tier works)- A Supabase account (supabase.com — free tier available)- A Lovable account (lovable.dev)- A custom domain (optional, for production deployment)- Node.js 18+ installed locally (for advanced editing)
Step 1: Create Your Lovable Account and First Project
- Navigate to lovable.dev and sign up using your GitHub account for seamless integration.- Click “New Project” from the dashboard.- Enter a natural language prompt describing your application. For example:
Build a task management app with user authentication, a dashboard showing task statistics, and the ability to create, edit, and delete tasks with due dates and priority levels.Lovable will generate a complete React + TypeScript + Tailwind CSS application from your prompt within seconds. You can preview it directly in the browser.
Step 2: Connect GitHub Repository
Linking GitHub enables version control, collaboration, and local development.
- In your Lovable project, click the GitHub icon in the top-right toolbar.- Click “Connect to GitHub” and authorize the Lovable GitHub App.- Choose “Create new repository” or select an existing one.- Select the repository visibility (public or private) and confirm.Once connected, every edit you make in Lovable automatically creates a commit in your GitHub repo. To clone and work locally:
git clone https://github.com/YOUR_USERNAME/your-lovable-project.git cd your-lovable-project npm install npm run devChanges pushed from your local environment will sync back to Lovable on the next session load.
Step 3: Auto-Configure Supabase Backend
Lovable has native Supabase integration that auto-provisions your database, authentication, and API layer.
- In the Lovable editor, click the Supabase icon (green database icon) in the toolbar.- Click “Connect to Supabase” and sign in to your Supabase account.- Select “Create new Supabase project” or link an existing project.- Lovable will automatically detect your app’s data requirements and generate the schema.You can also prompt Lovable to set up specific backend features:
Add Supabase authentication with email/password and Google OAuth. Create a “tasks” table with columns: id (uuid), title (text), description (text), priority (text), due_date (timestamp), user_id (uuid references auth.users), created_at (timestamp). Enable Row Level Security so users can only see their own tasks.Lovable will generate the SQL migrations and apply them automatically:
— Auto-generated migration: create tasks table CREATE TABLE public.tasks ( id UUID DEFAULT gen_random_uuid() PRIMARY KEY, title TEXT NOT NULL, description TEXT, priority TEXT DEFAULT ‘medium’ CHECK (priority IN (‘low’, ‘medium’, ‘high’)), due_date TIMESTAMPTZ, user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE NOT NULL, created_at TIMESTAMPTZ DEFAULT now() );
ALTER TABLE public.tasks ENABLE ROW LEVEL SECURITY;
CREATE POLICY “Users can view own tasks” ON public.tasks
FOR SELECT USING (auth.uid() = user_id);
CREATE POLICY “Users can insert own tasks” ON public.tasks
FOR INSERT WITH CHECK (auth.uid() = user_id);
CREATE POLICY “Users can update own tasks” ON public.tasks
FOR UPDATE USING (auth.uid() = user_id);
CREATE POLICY “Users can delete own tasks” ON public.tasks
FOR DELETE USING (auth.uid() = user_id);
Your Supabase credentials are securely stored in the project. The generated client code looks like this:
// src/integrations/supabase/client.ts (auto-generated)
import { createClient } from ‘@supabase/supabase-js’;
const SUPABASE_URL = “https://your-project-id.supabase.co”;
const SUPABASE_ANON_KEY = “YOUR_API_KEY”;
export const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
Step 4: Configure Authentication
With Supabase connected, prompt Lovable to set up auth flows:
Add a login page and signup page with email/password authentication.
Redirect unauthenticated users to the login page.
Add a logout button in the navigation bar.
For Google OAuth, configure the provider in Supabase Dashboard:
- Go to **Supabase Dashboard → Authentication → Providers**.- Enable **Google** and add your OAuth credentials:Client ID: YOUR_GOOGLE_CLIENT_ID
Client Secret: YOUR_GOOGLE_CLIENT_SECRET
Redirect URL: https://your-project-id.supabase.co/auth/v1/callback
## Step 5: Deploy with Custom Domain
Lovable provides instant deployment with every save, but you can also configure a custom domain.
Default Deployment
Your app is automatically deployed at https://your-project-name.lovable.app. Click “Share” in the top-right to get the live URL.
Custom Domain Setup
- In the Lovable project settings, navigate to “Domains”.- Click “Add Custom Domain” and enter your domain (e.g.,
app.yourdomain.com).- Add the following DNS records at your domain registrar:
- Wait for DNS propagation (typically 5–30 minutes).- Click “Verify Domain” in Lovable. SSL is provisioned automatically.For apex domains (e.g.,Type Name Value TTL CNAME app your-project-name.lovable.app 3600 yourdomain.comwithout a subdomain), use an ALIAS or ANAME record if your registrar supports it.
Step 6: Iterate with AI Prompts
The power of Lovable is iterative development through conversation. Examples of effective follow-up prompts:
Add a drag-and-drop Kanban board view for tasks grouped by priority.
Make the dashboard responsive for mobile devices.
Add real-time updates so tasks refresh when another user makes changes.
Add an export button that downloads tasks as a CSV file.
Pro Tips for Power Users
- Use specific prompts: Instead of “make it look better,” say “change the sidebar background to slate-900, use Inter font, and add hover animations to card components.”- Reference file paths: You can tell Lovable to edit specific files: “In src/components/TaskCard.tsx, add a color-coded badge for priority levels.”- Branching workflow: Create feature branches locally, test changes, then merge to main. Lovable syncs with the main branch by default.- Edge Functions: Prompt Lovable to create Supabase Edge Functions for server-side logic: “Create a Supabase Edge Function that sends email reminders for tasks due tomorrow.”- Environment Variables: For sensitive keys, use Supabase Vault or Lovable’s environment settings rather than hardcoding values.- Version pinning: After a stable release, tag your GitHub repo (
git tag v1.0.0 && git push —tags) to maintain rollback points.
Troubleshooting Common Issues
| Issue | Cause | Solution |
|---|---|---|
| Supabase connection fails | Project paused due to inactivity | Go to Supabase Dashboard and click "Restore" on your paused project |
| GitHub sync not updating | Merge conflicts between local and Lovable edits | Pull latest changes locally with git pull origin main, resolve conflicts, and push |
| Auth redirect loop | Missing redirect URL in Supabase provider config | Add your Lovable app URL and custom domain to the allowed redirect URLs in Supabase Auth settings |
| Custom domain not resolving | DNS propagation delay or incorrect records | Verify CNAME record points to your-project-name.lovable.app; wait up to 48 hours for full propagation |
| RLS policy blocking data | Row Level Security enabled but policies not configured | Check Supabase Table Editor → Policies tab and ensure SELECT/INSERT/UPDATE/DELETE policies exist for authenticated users |
| Build fails after local edits | TypeScript type errors or missing dependencies | Run npm run build locally to catch errors before pushing to GitHub |
Can I use Lovable with an existing Supabase project that already has data?
Yes. When connecting Supabase, choose "Link existing project" instead of creating a new one. Lovable will introspect your existing database schema and generate TypeScript types automatically. However, be cautious — prompting Lovable to modify database structure could alter existing tables. Always back up your data before connecting a production Supabase project.
Is the code generated by Lovable production-ready?
Lovable generates clean React + TypeScript + Tailwind CSS code with proper Supabase integration. For production use, you should review the generated code for security best practices, add comprehensive error handling, implement proper input validation, and run performance testing. The code is fully yours and can be ejected to any hosting provider like Vercel, Netlify, or Cloudflare Pages.
How do I handle environment variables and API keys securely in Lovable?
Supabase anon keys are safe to expose in the frontend as they are protected by Row Level Security. For secret keys (service role keys, third-party API keys), never include them in frontend code. Instead, use Supabase Edge Functions for server-side operations. In the Lovable editor, you can configure environment variables in Project Settings → Environment, and they will be injected at build time without being committed to your GitHub repository.