How to Set Up Lovable with Supabase Backend and Custom Domain Deployment: Complete Guide
How to Set Up Lovable with Supabase Backend and Custom Domain Deployment
Lovable is an AI-powered app builder that lets you go from a text prompt to a fully functional web application in minutes. When paired with Supabase as your backend and a custom domain for production deployment, you get a powerful full-stack workflow without writing boilerplate code. This guide walks you through every step — from your first prompt to a live production app.
Prerequisites
- A Lovable account (free tier or paid plan)- A Supabase account with a project created- A registered custom domain with DNS access- Basic understanding of web applications and SQL
Step 1: Create Your Lovable Project with a Detailed Prompt
The quality of your initial prompt determines the foundation of your app. Be specific about features, user roles, and data models.
- Log in to lovable.dev and click New Project.- Enter a detailed prompt describing your application:
Build a task management app with user authentication. Users can create projects, add tasks with due dates and priority levels (low, medium, high), assign tasks to team members, and mark tasks as complete. Include a dashboard showing task statistics and a Kanban board view. Use a clean, modern UI with a sidebar navigation.- Click Generate and wait for Lovable to scaffold your application.- Review the generated app in the live preview. Use follow-up prompts to refine:Add a dark mode toggle in the header. Change the primary color to indigo. Add a search bar to filter tasks by title or assignee.
Step 2: Connect Supabase as Your Backend
Lovable has native Supabase integration. This gives you a PostgreSQL database, authentication, row-level security, and real-time subscriptions.
- In your Lovable project, click the **Supabase** icon in the left toolbar.- Click **Connect to Supabase** and authorize the integration.- Select your existing Supabase project or create a new one directly from Lovable.- Once connected, Lovable automatically detects your database schema and can generate tables.
### Creating Database Tables via Prompt
Ask Lovable to set up your data layer:
Create Supabase tables for this app:
- profiles (id, username, avatar_url, created_at)
- projects (id, name, description, owner_id, created_at)
- tasks (id, title, description, status, priority, due_date, project_id, assignee_id, created_at)
Enable Row Level Security on all tables. Users should only see projects and tasks they own or are assigned to.
### Manual Supabase Configuration
For advanced setups, configure directly in the Supabase dashboard. Grab your project credentials from **Settings > API**:
// src/integrations/supabase/client.ts
import { createClient } from '@supabase/supabase-js';
const supabaseUrl = ‘https://your-project-id.supabase.co’;
const supabaseAnonKey = ‘YOUR_SUPABASE_ANON_KEY’;
export const supabase = createClient(supabaseUrl, supabaseAnonKey);
Setting Up Authentication
Enable authentication providers in Supabase under **Authentication > Providers**. Then prompt Lovable:
Add email/password authentication with a login page, signup page, and password reset flow. Redirect authenticated users to the dashboard. Show a loading spinner during auth state checks.
### Row-Level Security Policies
Apply RLS policies directly in the Supabase SQL Editor:
-- Allow users to read their own tasks
CREATE POLICY "Users can view own tasks" ON tasks
FOR SELECT USING (assignee_id = auth.uid() OR project_id IN (
SELECT id FROM projects WHERE owner_id = auth.uid()
));
— Allow users to insert tasks into their projects
CREATE POLICY “Users can create tasks” ON tasks
FOR INSERT WITH CHECK (project_id IN (
SELECT id FROM projects WHERE owner_id = auth.uid()
));
Step 3: Test and Iterate in Lovable
- Use the live preview to test all CRUD operations against your Supabase backend.- Check the Supabase Table Editor to verify data is being stored correctly.- Monitor the Auth tab for user sign-ups and sessions.- Use follow-up prompts to fix bugs or add features iteratively.
Step 4: Deploy with a Custom Domain
Lovable provides built-in hosting with custom domain support on paid plans.
- In your Lovable project, go to **Settings > Domains**.- Click **Add Custom Domain** and enter your domain (e.g., app.yourdomain.com).- Lovable will display DNS records you need to configure. Add these in your domain registrar:
| Record Type | Host | Value | TTL |
|---|---|---|---|
| CNAME | app | cname.lovable.app | 3600 |
| TXT | _verify.app | lovable-verify=your_verification_code | 3600 |
# Clone the exported repo
git clone https://github.com/yourusername/your-lovable-app.git
cd your-lovable-app
Install dependencies
npm install
Set environment variables
echo “VITE_SUPABASE_URL=https://your-project-id.supabase.co” > .env
echo “VITE_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY” >> .env
Build for production
npm run build
Deploy to Vercel
npx vercel —prod
Step 5: Production Checklist
- Enable email confirmation in Supabase Auth settings- Set Supabase Site URL to your custom domain under Authentication > URL Configuration- Add your custom domain to Redirect URLs in Supabase Auth settings- Review and tighten all RLS policies- Enable Supabase database backups (Pro plan includes daily backups)- Set up Supabase Edge Functions for server-side logic if needed
Pro Tips for Power Users
- Use Supabase Edge Functions for sensitive operations like payment processing or third-party API calls that require secret keys. Prompt Lovable: “Create a Supabase Edge Function to handle Stripe webhook events.”- Enable Realtime on specific tables for live collaboration features. In Supabase, go to Database > Replication and toggle Realtime for your tables.- Version your prompts — keep a document tracking every prompt you send to Lovable so you can reproduce or fork your project later.- Use Supabase Storage for file uploads by prompting: “Add file upload to tasks so users can attach documents. Store files in Supabase Storage.”- Set up database webhooks to trigger external services when data changes, such as sending notifications via a third-party email service.
Troubleshooting Common Issues
| Issue | Cause | Solution |
|---|---|---|
| Supabase connection fails in Lovable | Incorrect project URL or anon key | Re-check credentials in Supabase Settings > API. Disconnect and reconnect the integration. |
| RLS blocks all queries | No policies defined after enabling RLS | Create appropriate SELECT, INSERT, UPDATE, DELETE policies for each table. |
| Custom domain shows SSL error | DNS not fully propagated | Wait up to 48 hours. Verify CNAME and TXT records with dig app.yourdomain.com CNAME. |
| Auth redirect fails on custom domain | Redirect URL not allowlisted | Add https://app.yourdomain.com/** to Supabase Auth Redirect URLs. |
| Data not appearing after insert | RLS policy missing for INSERT | Add a WITH CHECK policy for the INSERT operation on the relevant table. |
Can I use Lovable with an existing Supabase project that already has data?
Yes. When you connect Supabase to Lovable, it reads your existing schema and data. You can prompt Lovable to build UI components that interact with your current tables. Just be cautious with schema modifications — always back up your database before letting Lovable run migrations on a production project with existing data.
Is the Lovable-generated code production-ready?
Lovable generates clean React and TypeScript code using Vite, Tailwind CSS, and shadcn/ui components. For most use cases, the output is production-ready after testing. However, for high-traffic applications, you should review the generated code for performance optimizations, add error boundaries, implement proper loading states, and ensure all Supabase RLS policies are thoroughly tested.
How do I handle environment variables securely after exporting from Lovable?
Never commit .env files to your repository. After exporting to GitHub, add .env to your .gitignore. Set environment variables directly in your hosting platform (Vercel, Netlify, etc.) under their environment variable settings. The Supabase anon key is safe to expose client-side since RLS protects your data, but any service role keys or third-party API secrets must only be used in server-side Edge Functions.