Webflow Subpath Forwarding

If you use Webflow to host your main site and want to serve Flint pages at /lp on the same domain (e.g. acme.com/lp/flint), you'll need to configure custom routing through Cloudflare Workers to proxy all non-flint traffic to your main site.

Steps:

1.In Webflow, publish your main site to a subdomain like landing.[YOUR_DOMAIN].com. This acts as the origin server for your Webflow content.

2.Point your root domain ([YOUR_DOMAIN].com) to Cloudflare. Cloudflare will route traffic to either Flint or your Webflow origin based on the URL path.

3.To avoid conflicts, update any absolute URLs in your main site to be relative.

4.In Cloudflare, select Edit Code and add the following script into your Worker's code.

Replace [SUBDOMAIN] with your unique subdomain, [YOUR_DOMAIN] with your website's base URL, [LANDING_DOMAIN] with your landing page URL, and /lp with your desired subpath if different.

javascript

addEventListener("fetch", (event) => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  try {
    const urlObject = new URL(request.url);

    // If the request is to the lp subdirectory
    if (/^\/lp/.test(urlObject.pathname)) {
      // Proxy to Flint
      const FLINT_URL = "[SUBDOMAIN].tryflint.com";
      const CUSTOM_URL = "[YOUR_DOMAIN]";
      let url = new URL(request.url);
      url.hostname = FLINT_URL;
      let proxyRequest = new Request(url, request);
      proxyRequest.headers.set("Host", FLINT_URL);
      proxyRequest.headers.set("X-Forwarded-Host", CUSTOM_URL);
      proxyRequest.headers.set("X-Forwarded-Proto", "https");
      return await fetch(proxyRequest);
    }

    // Route everything else to main site
    const MAIN_SITE_URL = "[LANDING_DOMAIN]";
    if (MAIN_SITE_URL && MAIN_SITE_URL !== "[LANDING_DOMAIN]") {
      let mainSiteUrl = new URL(request.url);
      mainSiteUrl.hostname = MAIN_SITE_URL;
      return await fetch(mainSiteUrl, {
        method: request.method,
        headers: request.headers,
        body: request.body,
      });
    }
  } catch (error) {
    // If no action found, serve the regular request
    return await fetch(request);
  }
}

5.Select "Deploy" and wait for the changes to propagate.

Overview:

For when using Webflow with no alternate CDN/edge-routing platform (e.g. CloudFlare or CloudFront).

Prerequisites:

•Paid Webflow account.

Steps:

1.Send a ticket to Webflow to setup the reverse proxy.

Sample ticket (must replace placeholders with appropriate values):

text

Subject: Request to Configure Reverse-Proxy Rewrite for /f/* Subpath

Hello Webflow Team,

Please configure a reverse-proxy (no HTTP redirect) so that:

- Requests to https://www.[YOUR_DOMAIN]/f/<path> are fetched from
  https://[FLINT_SUBDOMAIN].tryflint.com/<path>
- The browser's URL remains under /f/...
- Strip the leading /f in the origin fetch
- Forward Host header as [FLINT_SUBDOMAIN].tryflint.com
- Return 200 OK (no 3xx) to preserve SEO and link equity

Thanks!

[YOUR_NAME]
[YOUR_COMPANY]

Webflow Subpath Forwarding

Webflow (on CloudFlare)

Webflow (no CDN/edge-routing platform)