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 dev

  Changes 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() );

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’;

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:

  Type	Name	Value	TTL
  CNAME	app	your-project-name.lovable.app	3600

  - Wait for DNS propagation (typically 5–30 minutes).- Click “Verify Domain” in Lovable. SSL is provisioned automatically.For apex domains (e.g., yourdomain.com without 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

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.