How to Set Up Pre-rendering for Lovable with Cloudflare Workers

// encited.js (Cloudflare Worker - Custom Domain mode)
// Use this when the Worker is attached as a Custom Domain in Cloudflare and
// you need to forward non-prerendered traffic to your Lovable hosted URL.

// CHANGE THIS: your Lovable hosted URL (e.g. https://yourapp.lovable.app)
const LOVABLE_UPSTREAM = 'https://yourapp.lovable.app';

// CHANGE THIS: your public custom domain (e.g. yourdomain.com)
const PUBLIC_HOST = 'yourdomain.com';

function isRedirect(status) {
  return status === 301 || status === 302 || status === 303 || status === 307 || status === 308;
}

async function forwardToUpstream(req) {
  const upstreamBase = new URL(LOVABLE_UPSTREAM);
  const upstreamUrl = new URL(req.url);
  upstreamUrl.protocol = upstreamBase.protocol;
  upstreamUrl.hostname = upstreamBase.hostname;
  upstreamUrl.port = upstreamBase.port;

  const h = new Headers(req.headers);
  h.set('Host', upstreamBase.hostname);
  h.set('X-Forwarded-Host', PUBLIC_HOST);
  h.set('X-Forwarded-Proto', 'https');
  h.delete('cf-connecting-ip');
  h.delete('x-forwarded-for');
  h.delete('forwarded');

  const isGetLike = req.method === 'GET' || req.method === 'HEAD';
  const upstreamReq = new Request(upstreamUrl.toString(), {
    method: req.method,
    headers: h,
    body: isGetLike ? undefined : req.body,
    redirect: 'manual',
  });

  const resp = await fetch(upstreamReq);

  // Rewrite redirects so users stay on your custom domain
  if (isRedirect(resp.status)) {
    const loc = resp.headers.get('Location') || '';
    let newLoc = loc.replaceAll(upstreamBase.hostname, PUBLIC_HOST);
    newLoc = newLoc.replace(/^http:\/\//i, 'https://');

    const newHeaders = new Headers(resp.headers);
    if (loc) newHeaders.set('Location', newLoc);

    return new Response(resp.body, { status: resp.status, headers: newHeaders });
  }

  return resp;
}

export default {
  async fetch(req, env) {
    // Only handle public GET navigations
    if (req.method !== 'GET') return forwardToUpstream(req);

    // Treat missing/empty Accept and bare '*/*' as HTML so crawler tests
    // (curl without -H, default fetch) still route through prerender.
    // Asset requests from browsers send specific Accept (e.g. 'text/css,*/*;q=0.1')
    // so they won't match.
    const accept = (req.headers.get('accept') || '').trim();
    const isHtmlRequest = !accept || accept === '*/*' || accept.includes('text/html');
    if (!isHtmlRequest) return forwardToUpstream(req);

    const headers = new Headers();
    headers.set('x-lovablehtml-api-key', env.LOVABLEHTML_API_KEY);
    headers.set('accept', 'text/html');
    const forward = [
      'accept-language',
      'sec-fetch-mode',
      'sec-fetch-site',
      'sec-fetch-dest',
      'sec-fetch-user',
      'upgrade-insecure-requests',
      'referer',
      'user-agent',
    ];
    for (const name of forward) {
      const v = req.headers.get(name);
      if (v) headers.set(name, v);
    }

    try {
      const r = await fetch(
        'https://encited.com/api/prerender/render?url=' + encodeURIComponent(req.url),
        { headers, redirect: 'manual' },
      );

      // 301 = configured redirect rule matched - forward to client
      if (r.status === 301) {
        const loc = r.headers.get('location');
        if (loc) {
          return new Response(null, {
            status: 301,
            headers: { location: loc, 'cache-control': 'no-store' },
          });
        }
      }

      // 304 = not pre-rendered, fall through to upstream
      if (r.status === 304) {
        return forwardToUpstream(req);
      }
      if (r.status === 200 && (r.headers.get('content-type') || '').includes('text/html')) {
        const responseHeaders = new Headers(r.headers);
        for (const name of ['content-encoding', 'content-length', 'transfer-encoding', 'connection', 'keep-alive']) {
          responseHeaders.delete(name);
        }
        responseHeaders.set('content-type', 'text/html; charset=utf-8');
        return new Response(r.body, { status: 200, headers: responseHeaders });
      }
    } catch {
      // Prerender unreachable → fall through so visitors still get the site
    }

    return forwardToUpstream(req);
  },
};