How to Integrate Lovable with Let's Encrypt

The first step is publishing your Lovable app — this is what triggers the SSL certificate provisioning. If your app is not yet published, you cannot access it over HTTPS at any URL, including the default lovable.app subdomain. To publish: open your Lovable project. Click the Publish icon in the top-right corner of the editor (it looks like a globe or share icon). A panel opens showing your app's current publish status. If this is the first publish, click 'Publish' and wait 30-60 seconds while Lovable builds and deploys your app. Once published, you receive a URL in the format https://your-project-name.lovable.app. Open that URL in a browser. Click the padlock icon in the address bar (in Chrome) or the lock/shield icon (in Firefox/Safari). You should see a valid SSL certificate issued for your lovable.app subdomain. The certificate details will show it is a Let's Encrypt certificate — the issuer name will show 'R3' or 'E1' (Let's Encrypt's intermediate CAs). This confirms HTTPS is working correctly. Note: changes you make in Lovable's editor are NOT automatically pushed to the published URL — you must click Publish again (or 'Update') each time you want the live app to reflect new changes. The HTTPS setup itself never needs to be repeated; it is configured once when you first publish and maintained automatically afterward.

Custom domains require a paid Lovable plan (Pro at $25/month or higher). The process has two parts: adding a DNS record at your domain registrar, and then connecting the domain in Lovable's Publish settings. Step 1 — DNS record: log in to your domain registrar (GoDaddy, Namecheap, Cloudflare, Google Domains, etc.). Find the DNS management section for your domain. Add a CNAME record: - Type: CNAME - Name/Host: www (or @ for the apex domain, though some registrars require ALIAS or ANAME for apex) - Value/Target: your lovable.app URL (e.g., your-project-name.lovable.app) - TTL: 300 seconds (5 minutes) initially for faster propagation Step 2 — Connect in Lovable: open the Publish panel in Lovable (Publish icon top-right). Look for the 'Custom domain' or 'Domains' section. Enter your custom domain (e.g., www.myapp.com) and click Connect or Add. Lovable will attempt to verify the DNS record. If DNS has propagated, the domain connects immediately. If not, you will see a 'DNS not propagated yet' message — wait 5-30 minutes and try again. Step 3 — SSL provisioning: once the domain is connected and DNS resolves, Lovable automatically requests a Let's Encrypt certificate for your domain. This takes 1-5 minutes. After provisioning, your app is accessible at https://www.myapp.com with a valid certificate that auto-renews every 90 days. For Vercel deployments: add your custom domain in the Vercel dashboard under your project's Settings → Domains. Vercel prompts you to add the same type of DNS record and handles Let's Encrypt provisioning automatically.

Many teams generate their app in Lovable and then deploy to Vercel for production hosting, taking advantage of Vercel's global CDN and more advanced deployment controls. Vercel also uses Let's Encrypt and handles SSL automatically, but the domain connection workflow is slightly different. To deploy your Lovable app to Vercel: first ensure your Lovable project is connected to GitHub (Settings → Connectors → GitHub). Then log in to Vercel (vercel.com), click 'New Project', and import your GitHub repository. Set the framework preset to 'Vite', the build command to npm run build, and the output directory to dist. Click Deploy. Once deployed, you receive a Vercel preview URL (https://your-project.vercel.app) with automatic HTTPS. To add a custom domain: go to your project in Vercel → Settings → Domains → Add Domain. Enter your domain and Vercel shows you the exact DNS records to add. For a subdomain (www.myapp.com), add the CNAME record to your registrar. For the apex domain (myapp.com), Vercel recommends adding their A records or using Vercel's nameservers for the domain. Vercel provisions the Let's Encrypt certificate within 1-2 minutes of DNS propagation. You need to manually update environment variables in Vercel's dashboard (Project → Settings → Environment Variables) — set VITE_SUPABASE_URL, VITE_SUPABASE_PUBLISHABLE_KEY, and any other build-time environment variables your app uses. Also update your OAuth redirect URLs in Supabase Auth to include the Vercel domain if you use social login. The vercel.json file with the SPA rewrite rule is important: without it, refreshing any page that is not the root ('/') will return a 404. Add this file to your project root: { "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }] }

1{
2  "rewrites": [
3    {
4      "source": "/(.*)",
5      "destination": "/index.html"
6    }
7  ]
8}

For teams managing multiple Lovable deployments across many custom domains — such as agencies building client sites or SaaS companies with per-tenant custom domains — proactive SSL monitoring prevents certificate-related outages. While Lovable and Vercel auto-renew Let's Encrypt certificates, DNS changes or misconfigured domains can break the auto-renewal process. Build a monitoring Edge Function that checks certificate expiry for a list of domains. The function uses the crt.sh certificate transparency API to look up current certificate records for a domain, or makes an HTTPS connection and reads the TLS handshake metadata to check the certificate expiry date. Store the results in a Supabase table called ssl_monitor_results. A React dashboard reads this table and highlights domains where the certificate expires within 30 days (orange warning) or has already expired (red critical). Schedule the monitoring Edge Function via pg_cron to run daily. For complex SSL monitoring setups across many client domains, RapidDev's team can help build a multi-tenant monitoring system with automatic email alerts when certificates approach expiry.

1import { serve } from 'https://deno.land/std@0.168.0/http/server.ts'
2import { createClient } from 'https://esm.sh/@supabase/supabase-js@2'
3
4const corsHeaders = {
5  'Access-Control-Allow-Origin': '*',
6  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
7}
8
9serve(async (req) => {
10  if (req.method === 'OPTIONS') {
11    return new Response('ok', { headers: corsHeaders })
12  }
13
14  try {
15    const url = new URL(req.url)
16    const domain = url.searchParams.get('domain')
17
18    if (!domain) {
19      return new Response(
20        JSON.stringify({ error: 'Missing domain query parameter' }),
21        { status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
22      )
23    }
24
25    // Query crt.sh certificate transparency log
26    const crtResponse = await fetch(
27      `https://crt.sh/?q=${encodeURIComponent(domain)}&output=json`,
28      { headers: { 'User-Agent': 'Lovable-SSL-Monitor' } }
29    )
30
31    if (!crtResponse.ok) {
32      throw new Error(`crt.sh API error: ${crtResponse.status}`)
33    }
34
35    const certs = await crtResponse.json()
36
37    if (!certs || certs.length === 0) {
38      return new Response(
39        JSON.stringify({ error: 'No certificates found for domain' }),
40        { status: 404, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
41      )
42    }
43
44    // Sort by not_after descending, get most recent
45    const sorted = certs.sort((a: any, b: any) =>
46      new Date(b.not_after).getTime() - new Date(a.not_after).getTime()
47    )
48    const latest = sorted[0]
49
50    const expiryDate = new Date(latest.not_after)
51    const now = new Date()
52    const daysUntilExpiry = Math.floor(
53      (expiryDate.getTime() - now.getTime()) / (1000 * 60 * 60 * 24)
54    )
55
56    const result = {
57      domain,
58      not_before: latest.not_before,
59      not_after: latest.not_after,
60      issuer: latest.issuer_name,
61      common_name: latest.common_name,
62      days_until_expiry: daysUntilExpiry,
63      is_valid: daysUntilExpiry > 0,
64      is_expiring_soon: daysUntilExpiry <= 30 && daysUntilExpiry > 0,
65      checked_at: now.toISOString(),
66    }
67
68    return new Response(
69      JSON.stringify(result),
70      { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
71    )
72  } catch (error) {
73    return new Response(
74      JSON.stringify({ error: error.message }),
75      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
76    )
77  }
78})