Skip to content
Contact us
  • There are no suggestions because the search field is empty.

How to Integrate Prerender.io with Lovable-Hosted Websites

Lovable hosts apps behind Cloudflare proxies, which normally require your domain’s A record to point to a Cloudflare IP address. In this setup, Prerender.io would typically need Cloudflare’s Orange-to-Orange (O2O) service, available only on the Enterprise plan. However, there are now two supported integration paths: the standard method for default Lovable-hosted domains and an alternative method for custom domains using Cloudflare Workers and CNAME records. This guide covers both approaches without relying on the O2O service.

Without custom domain at Lovable: 

The most effective solution is to move your hosting from Lovable while maintaining your existing codebase. We recommend using either Netlify or Cloudflare Pages, with a preference for keeping your DNS management in Cloudflare.

Options: 

Step-by-Step Integration Guide

Netlify + Cloudflare (Recommended)

  1. Export your code from Lovable:

    • Connect your GitHub account in Lovable (use the GitHub button in the top right)
    • Push your project to a GitHub repository
    • Alternatively, enable code editing in Account Settings → Labs → Enable Code Editing, then download or copy your code manually

  2. Set up hosting on Netlify:

    • Create a Netlify account if you don't have one
    • Connect your GitHub repository to Netlify
    • Configure your build settings for your React.js application
    • Deploy your site on Netlify

  3. Configure DNS in Cloudflare:

    • Create a CNAME record at your apex domain (e.g., yourdomain.com) pointing to apex-loadbalancer.netlify.com
    • Cloudflare may warn that this is unusual, but it works correctly
    • For the www subdomain, create another CNAME record pointing to your Netlify app URL (e.g., your-site.netlify.app)

  4. Set up your domain in Netlify:

    • Add your domain in Netlify's domain settings
    • Set it as the primary domain
  5. Integrate Prerender into Cloudflare by following this guide. 
Cloudflare Pages

If you prefer to keep everything within the Cloudflare ecosystem:

  1. Export your code from Lovable :

    • Connect your GitHub account in Lovable (use the GitHub button in the top right)
    • Push your project to a GitHub repository
    • Alternatively, enable code editing in Account Settings → Labs → Enable Code Editing, then download or copy your code manually

  2. Deploy to Cloudflare Pages:

    • Set up a new project in Cloudflare Pages
    • Connect your GitHub repository
    • Configure build settings for your React.js application
    • Cloudflare Pages supports Vite/React apps with automatic builds

  3. Configure your domain in Cloudflare Pages settings

  4. Integrate Prerender into Cloudflare by following this guide. 

Performance Considerations

Both solutions offer excellent performance:

  • Netlify + Cloudflare combination has proven reliable for many users over extended periods
  • Cloudflare Pages may offer slightly better performance through their global CDN if you prefer keeping everything in the Cloudflare ecosystem

Troubleshooting

If Prerender integration isn't working after migration:

  • Verify DNS records are correctly configured
  • Ensure your domain is set as primary in Netlify (if using Netlify)
  • Check that Cloudflare's proxy settings are correctly configured
  • Confirm that your Prerender service worker is properly implemented

 

If you have your own custom domain set in Lovable, then follow this guide:

If your Lovable app uses a custom domain, you can fix SEO visibility using Cloudflare Workers and Prerender.io. This setup serves pre-rendered pages to bots while keeping the regular fast SPA experience for users, no code changes needed.

How It Works

Lovable apps are SPAs, so bots often only see:

 
<div id="root"></div>
 

With Cloudflare and Prerender.io:

  • Bots → Cloudflare Worker → Prerender.io → Full HTML

  • Users → Cloudflare Worker → Lovable App

Benefits:

  • SEO-ready, fully rendered HTML

  • Fast load times for users

Step 1: Cloudflare Setup

  1. Create a free Cloudflare account.

  2. Add your domain and switch your nameservers.

  3. Create CNAME records (not A records):

    • @ → your-lovable-domain (for example: yourappname.lovable.app)

    • www → your-lovable-domain

  4. Enable the orange cloud (Proxied) option.

Important: Do not use A records. CNAMEs are required for CloudFlare to work correctly.

Step 2: Prerender.io Setup

  1. Follow our Cloudflare guide

  2. Follow the prompts to:

    • Create the Cloudflare Worker

    • Add the provided code and your Prerender token

    • Deploy to your domain routes

Step 3: Test Your Setup

Run:

 
curl -H "User-Agent: Googlebot" https://yourdomain.com

 

You should see full HTML output, not <div id="root"></div>

 

Support

If you encounter any issues with this integration, please contact our support team for assistance.

Was this article helpful?