Encited logo
Pricing

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

Attach a Cloudflare Worker to your custom domain so crawlers get pre-rendered HTML while visitors keep seeing your Replit deployment.

How Replit pre-rendering works

Replit deployments serve your app on a replit.app URL. A Cloudflare Worker attached to your custom domain serves pre-rendered HTML to crawlers and forwards everyone else to your Replit deployment.

Crawler GET requests for HTML receive the rendered snapshot from Encited. Browser visits, assets, and any failed render calls are proxied straight to your replit.app origin.

Prerequisites

  • An Encited account and API key (Settings → API Keys).
  • Your custom domain added to a Cloudflare account (the free plan works).
  • The published project URL, e.g. my-app.replit.app.

Set up pre-rendering for Replit

Prefer no code? The DNS setup activates pre-rendering with two DNS records and no Cloudflare account. Use this guide when you want to keep Cloudflare in front of your domain.
Set project URL
1

Create a new Worker

Open Cloudflare dashboard → choose a "Hello World" Worker → Deploy → Edit Code

2

Paste the snippet below into the Worker editor

Edit the two constants at the top: REPLIT_UPSTREAM (your Replit hosted URL, set above) and PUBLIC_HOST (your custom domain).

encited.js
CopyDownload
// 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 Replit hosted URL.
// CHANGE THIS: your Replit hosted URL (e.g. https://yourapp.replit.app)
const REPLIT_UPSTREAM = 'https://yourapp.replit.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(REPLIT_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);
},
};
3

Add the API key secret

Under Variables and Secrets, add a secret named LOVABLEHTML_API_KEY or run: wrangler secret put LOVABLEHTML_API_KEY

4

Deploy the Worker

5

Attach the Worker as a Custom Domain

Go to your Worker → Settings → Domains & Routes → AddCustom domain → enter yourdomain.com. Add a second Custom Domain for www.yourdomain.com if you use www.

6

Wait for DNS and SSL

Cloudflare auto-creates the DNS record and SSL. You'll see a special Worker mapping in your DNS tab; leave it as is.

7

Verify the connection

Wait a couple of minutes for propagation. Hit your custom domain and confirm traffic reaches the Worker (and through it, Replit).

Custom Domain, not Route

In this mode the Worker is the origin, so there is no proxied DNS record for it to sit behind. Use Custom domain attachment so Cloudflare manages DNS and SSL for you. Routes won't work without an upstream DNS record to intercept.

Test the integration

1. Send a crawler request

curl -sS -D - -o /dev/null \ -A "Googlebot" \ -H "Accept: text/html" \ "https://your-domain.com/"

Look for a successful HTML response and the x-lovablehtml-render-cache header.

2. Confirm browser passthrough

curl -sS -D - -o /dev/null \ -A "Mozilla/5.0" \ -H "Accept: text/html" \ -H "Accept-Language: en-US" \ -H "Sec-Fetch-Mode: navigate" \ -H "Sec-Fetch-Dest: document" \ -H "Upgrade-Insecure-Requests: 1" \ "https://your-domain.com/"

This request should come back from Replit without an Encited render-cache header.

Common errors

The site works, then goes down later

You used the temporary replit.dev development URL as the upstream. Use the permanent replit.app deployment domain from the Publishing view instead.

The Worker never receives traffic

Attach your domain to the Worker as a Custom Domain, not a Route. In this mode the Worker is the origin, so a Route has no proxied DNS record to intercept.

Crawler requests return errors instead of rendered HTML

Confirm the Worker has a secret named LOVABLEHTML_API_KEY with a valid API key from your Encited dashboard, then redeploy the Worker.

Request and security behavior

  • Only crawler GET requests for public HTML pages are answered with pre-rendered snapshots.
  • Along with the public page URL, only the API key and crawler-classification headers are sent to Encited.
  • Cookie and Authorization headers are never forwarded to Encited.
  • If Encited is unavailable or does not return rendered HTML, the request is forwarded to your Replit project.

Common questions

Where do I find my Replit deployment URL?

Open Publishing in Replit and copy the replit.app deployment domain. Do not use the replit.dev development URL, which stops when your workspace sleeps.

Will visitors notice the Worker?

No. Browsers are proxied to your Replit deployment and see the same site on the same custom domain. Only crawlers get the pre-rendered HTML.

Is there a way to do this without Cloudflare?

Yes. The no-code DNS setup points two A records at Encited and needs no Cloudflare account or Worker.

Avatar
How can we help?
Get instant answers to your questions or leave a message for an engineer will reach out
Ask AI about Encited
See our docs
Contact support
Leave a message
We'll get back to you soon
Avatar
Ask AI about Encited
Team is also here to help
Thinking
Preview
Drop an image to attach
Powered by ReplyMaven