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

How to Integrate Prerender with Lovable-Hosted Websites

Lovable deploys applications on its infrastructure behind CloudFlare proxies. This setup requires your domain's A record to point to a CloudFlare IP address. With this configuration, Prerender integration needs CloudFlare's Orange-to-Orange (O2O) service, which is only available on their Enterprise plan. This guide explains how to integrate Prerender with your site without using the O2O service. 

Recommended Solution

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

Support

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