/lovable-issues

Setting Up Custom Domains for Lovable Projects

Learn why custom domains need DNS, connect them to your Lovable project, and follow best practices for seamless configuration.

Book a free  consultation
4.9
Clutch rating 🌟
600+
Happy partners
17+
Countries served
190+
Team members
Matt Graham, CEO of Rapid Developers

Book a call with an Expert

Starting a new venture? Need to upgrade your web app? RapidDev builds application with your growth in mind.

Book a free No-Code consultation

Why Custom Domains Require DNS and Config Steps in Lovable

 

Direct answer

 

Custom domains require DNS and configuration steps because the domain’s DNS records, TLS certificates, and external providers live outside Lovable’s platform. DNS proves ownership and maps your domain name to Lovable’s hosting endpoints; TLS/certificate issuance and many third-party callbacks (OAuth, webhooks) require exact DNS and provider settings. Lovable can host and serve your app, but you must update DNS and sometimes environment/config values so traffic, certificates, and security checks resolve correctly.

 

Detailed explanation

 

  • DNS is the authority for domain routing: A domain name only points to servers when your registrar/DNS provider has records that map it. Lovable cannot change your registrar’s DNS for you, so those records must be added externally.
  • Ownership and verification: Many platforms (including certificate authorities and OAuth providers) require DNS proof-of-ownership or specific TXT records. Without those entries, automated certs or provider verifications will fail.
  • TLS / certificate issuance: Lovable may request certificates, but certificate issuance often depends on DNS-based validation (or an existing TLS route). If DNS isn’t pointed correctly, certs can’t be issued and browsers will warn users.
  • Host/routing and app config: Your app and third-party services expect a canonical host (redirect URIs, ALLOWED_HOSTS, environment SITE_URL). Those environment variables or Secrets need updating in Lovable Cloud so the app accepts requests for the new domain.
  • Propagation & provider differences: DNS changes take time and behave differently across registrars (apex vs. www, ALIAS support, TTL). Expect propagation delays and occasional provider-specific quirks you must handle outside Lovable.
  • Why Lovable asks you to edit DNS/config instead of doing it for you: Changing DNS or external provider settings requires access to your registrar account and third-party consoles. Lovable’s secure model keeps those credentials in the user’s control; the platform instead guides you and consumes the results (e.g., verifies DNS, issues certs, consumes Secrets).

 

Lovable prompts you can paste to implement project docs and reminders

 

Paste each prompt into your Lovable project chat. These will add non-actionable docs and a README note (they explain why DNS/config is required without showing connection steps).

 

// Prompt 1: create an explanatory doc
// Create file docs/custom-domains/why.md with the following content
// This file explains why DNS and config steps are required (no how-to).
Create file docs/custom-domains/why.md with this content:

// Title and summary
# Why custom domains require DNS and configuration

// Key points
- DNS maps a domain name to network endpoints that Lovable cannot modify on your behalf.
- Certificate issuance and ownership verification often require DNS-based validation (TXT or CNAME).
- Your app and external providers (OAuth, webhooks) require exact host values; update environment variables / Secrets in Lovable Cloud accordingly.
- DNS propagation and registrar differences mean changes can take time or need provider-specific settings.
- Because the registrar and third-party consoles are under your control, Lovable provides verification and consumes the results (e.g., issues certificates after DNS is correct).

// Keep this doc explanatory only — do not provide step-by-step commands to change DNS here.

 

// Prompt 2: add a README note
// Update README.md: add a short notice under the top-level summary
Update README.md near the top-level summary. Add this short notice:

> <b>Note:</b> Connecting a custom domain requires DNS changes at your domain registrar and possible updates to environment variables or external provider settings. See docs/custom-domains/why.md for why these steps are required.

 

// Prompt 3: create a non-action checklist for the dashboard
// Create file .lovable/notes/custom-domain-checklist.md that the team can open from the project
Create file .lovable/notes/custom-domain-checklist.md with these non-action checklist items:

- Verify registrar access and contact info.
- Identify primary domain (apex) vs. subdomain (www).
- Plan environment/Secrets updates in Lovable Cloud (SITE_URL, API callback URLs).
- Coordinate update timing to account for DNS propagation.
- Prepare third-party consoles (OAuth, webhooks) for new callback URLs.

 // This is a checklist for planning, not a how-to DNS guide.

 

After these changes, use Lovable’s Preview to confirm the docs look correct and then Publish them to make the notes visible to your team. If you need anything requiring terminal access (DNS automation scripts, registrar APIs), export to GitHub and handle those steps locally or via CI.

Still stuck?
Copy this prompt into ChatGPT and get a clear, personalized explanation.

This prompt helps an AI assistant understand your setup and guide you through the fix step by step, without assuming technical knowledge.

AI AI Prompt

How to Connect a Custom Domain to a Lovable Project

Open your Lovable project’s Publish panel, add the custom domain (root and optional www), copy the exact DNS records Lovable provides, create those records at your DNS registrar, then return to Lovable to finish the binding and enable HTTPS. Below are ready-to-paste Lovable chat prompts: the first adds the domain and saves copy/paste DNS instructions into your repo; the second is what to paste after you create DNS records to have Lovable verify and complete the binding.

 

Add the domain and generate DNS instructions (paste into Lovable chat)

 

// Please update project Publish settings and create a DNS instructions file.
// 1) In the project's Publish/Domain settings, add these domains:
//    - your-root-domain.com
//    - www.your-root-domain.com
// 2) After adding, generate the exact DNS records required for each domain (A or CNAME records and any TXT verification).
// 3) Save the full copy/paste instructions into a new file at the project root: lovable-domain-instructions.md
//
// Create lovable-domain-instructions.md with the exact DNS records and step-by-step copy/paste instructions for the domain registrar (Cloudflare, GoDaddy, Route53, etc.), include TTL recommendation and example record lines.
// Also include a short paragraph that explains when to come back and run the verification step (after DNS propagation).
//
// File to create: /lovable-domain-instructions.md
//
// Example content structure inside the file (Lovable: fill in real records your system requires):
//
// # Custom domain DNS instructions
//
// - Domain: your-root-domain.com
// - Required records:
//   - A  @    203.0.113.45    TTL 3600    // // replace with the actual A record Lovable provides
//   - CNAME www  your-project-cname.lovable.dev    TTL 3600    // // replace with actual CNAME if applicable
// - If a TXT record is required for verification include it here exactly.
//
// Registrar steps:
// - Go to your domain provider and add the above records. Wait for propagation (~minutes–hours).
//
// When DNS is added and propagated, paste the "Verify domain and enable HTTPS" prompt (you'll get next) into Lovable chat.
//
// Save this file now and show me a Preview of its content.

 

Verify domain and complete binding (paste into Lovable chat after DNS records are created)

 

// After you've added the DNS records at your registrar and propagation has started,
// please check DNS and complete the binding in Publish settings.
//
// Steps for Lovable to perform:
// 1) Resolve DNS for your-root-domain.com and www.your-root-domain.com and report status (A/CNAME/TXT values vs expected).
// 2) If records match the expected values, bind the domain(s) to the project in Publish settings.
// 3) Request/activate HTTPS for the bound domain(s) and mark the primary domain as your-root-domain.com.
// 4) If anything fails, write clear remediation steps and the exact DNS entries that still need to change.
//
// Action request: "Verify and bind domains: your-root-domain.com, www.your-root-domain.com. Enable HTTPS and set primary to your-root-domain.com. Provide a short report of DNS lookup results and next steps if unresolved."

Want to explore opportunities to work with us?

Connect with our team to unlock the full potential of no-code solutions with a no-commitment consultation!

Book a Free Consultation

Best Practices for Connecting Custom Domains in Lovable

Keep one canonical, HTTPS-enabled host and make your app and third-party integrations use that domain via environment variables and redirects; test the setup in Lovable Preview, store sensitive values in Lovable Secrets, update CORS/OAuth/webhook origins, and roll the change behind a staged publish. These steps prevent broken sessions, CORS failures, OAuth redirect mismatches, and cookie/domain bugs.

 

Key best practices

 

  • Pick a canonical host (either example.com or www.example.com) and enforce it so cookies, SEO, and HSTS don’t split state.
  • Use one environment variable for the public base URL (e.g., NEXT_PUBLIC_BASE_URL or PUBLIC_BASE\_URL) and reference it everywhere in client/server code.
  • Store domain-specific secrets in Lovable Secrets (API keys, OAuth client secrets) — never hardcode domains or keys in repo files.
  • Update CORS, OAuth redirect URIs, and webhook endpoints to include the final domain before going live.
  • Implement canonical redirects (server-side when possible; otherwise a lightweight client redirect as fallback) so all traffic ends up on the canonical host.
  • Set cookie domain and secure flags explicitly so cookies are only sent over HTTPS and on the intended domain.
  • Test in Lovable Preview first and verify tokens, OAuth flows, webhook deliveries, and cookie behavior, then Publish to roll out.
  • Use GitHub export/sync if you need terminal-only changes (outside Lovable) such as advanced DNS automation or provider CLIs.

 

Practical Lovable prompts to implement these best practices

 

Paste each prompt into Lovable chat (Chat Mode). They ask Lovable to edit files or guide UI steps. Fill placeholders like <your-domain> or <oauth-client-id> before publishing.

// Prompt A: centralize base URL and read from env
// Create src/config.ts and update app to use PUBLIC_BASE_URL

Please create file src/config.ts with the following content and update imports across the app to use it where the app needs the public URL:

// src/config.ts
export const PUBLIC_BASE_URL = process.env.NEXT_PUBLIC_BASE_URL || process.env.PUBLIC_BASE_URL || 'http://localhost:3000'; // update this fallback as needed

// Add comments where to use: client-side API endpoints, absolute links, OAuth redirect generation
// Prompt B: add a lightweight client-side canonical redirect (SPA fallback)
// Create public/canonical-redirect.js and include in index.html head

// public/canonical-redirect.js
// Redirect to canonical host if needed to enforce example.com
(function(){
  // Replace with your canonical host
  var CANONICAL = 'https://<your-canonical-domain>';
  if (location.hostname && (location.origin !== CANONICAL)) {
    // preserve path and query
    var to = CANONICAL + location.pathname + location.search + location.hash;
    // use replace so history isn't polluted
    location.replace(to);
  }
})();
// Prompt C: update server CORS and cookie settings
// Update server code at src/server.js or src/api/* to read PUBLIC_BASE_URL and set CORS / cookie domain

// Example edits (add/modify in your server startup)
// // Read origin
const ALLOWED_ORIGIN = process.env.PUBLIC_BASE_URL || 'http://localhost:3000';
// // Use ALLOWED_ORIGIN in your CORS config and when setting cookie domain
// // For cookies: set secure=true, sameSite='Lax' or 'Strict', domain should match canonical host
// Prompt D: Secrets & Preview checklist (instructions for Lovable UI)
// Please open the Lovable Secrets UI and create these secrets:
// - PUBLIC_BASE_URL = 'https://<your-canonical-domain>' (public client env var)
// - OAUTH_CLIENT_ID = '<your-client-id>' (if applicable)
// - OAUTH_CLIENT_SECRET = '<your-secret>' (secret kind)
// After creating, run a Preview and verify:
// - OAuth login redirects back to PUBLIC_BASE_URL
// - API requests have correct CORS origin
// - Cookies are set with secure flag and intended domain
// Prompt E: publish rollout guidance (instructions)
// Preview the site, validate flows, then Publish.
// If advanced DNS CLI steps are required, mark them as outside Lovable (terminal required) and use GitHub export/sync.

 

Quick reminders

 

  • Don’t bake the domain into source files — use the env variable you created.
  • Validate third-party settings (Supabase, OAuth providers, payment/webhook services) to include the canonical domain before publishing.
  • Stage changes: Preview → test OAuth/webhooks/cookies → Publish.

 


Recognized by the best

Trusted by 600+ businesses globally

From startups to enterprises and everything in between, see for yourself our incredible impact.

RapidDev was an exceptional project management organization and the best development collaborators I've had the pleasure of working with.

They do complex work on extremely fast timelines and effectively manage the testing and pre-launch process to deliver the best possible product. I'm extremely impressed with their execution ability.

Arkady
CPO, Praction
Working with Matt was comparable to having another co-founder on the team, but without the commitment or cost.

He has a strategic mindset and willing to change the scope of the project in real time based on the needs of the client. A true strategic thought partner!

Donald Muir
Co-Founder, Arc
RapidDev are 10/10, excellent communicators - the best I've ever encountered in the tech dev space.

They always go the extra mile, they genuinely care, they respond quickly, they're flexible, adaptable and their enthusiasm is amazing.

Mat Westergreen-Thorne
Co-CEO, Grantify
RapidDev is an excellent developer for custom-code solutions.

We’ve had great success since launching the platform in November 2023. In a few months, we’ve gained over 1,000 new active users. We’ve also secured several dozen bookings on the platform and seen about 70% new user month-over-month growth since the launch.

Emmanuel Brown
Co-Founder, Church Real Estate Marketplace
Matt’s dedication to executing our vision and his commitment to the project deadline were impressive. 

This was such a specific project, and Matt really delivered. We worked with a really fast turnaround, and he always delivered. The site was a perfect prop for us!

Samantha Fekete
Production Manager, Media Production Company
The pSEO strategy executed by RapidDev is clearly driving meaningful results.

Working with RapidDev has delivered measurable, year-over-year growth. Comparing the same period, clicks increased by 129%, impressions grew by 196%, and average position improved by 14.6%. Most importantly, qualified contact form submissions rose 350%, excluding spam.

Appreciation as well to Matt Graham for championing the collaboration!

Michael W. Hammond
Principal Owner, OCD Tech

We put the rapid in RapidDev

Need a dedicated strategic tech and growth partner? Discover what RapidDev can do for your business! Book a call with our team to schedule a free, no-obligation consultation. We’ll discuss your project and provide a custom quote at no cost.Â