Framer (on Cloudflare) — Subpath Setup

• •A Cloudflare account
• •Root domain routing configured through Cloudflare
• •The subpath of your site you wish to forward (e.g. /lp/*)
• •Talk to the Flint team if you have questions.

1. 1.Set Framer DNS records to Proxied.
2. 2.Create a Cloudflare Worker.
3. 3.Attach the Cloudflare Worker to the Flint-forwarded subpath.

A Framer custom domain is configured with two A records pointing to static IPs, and one CNAME record pointing to sites.framer.app. Those records must be proxied by Cloudflare to support Flint subpath rewrites.

After making this change, ensure the Framer site is still accessible at both the root domain and the www. subdomain.

To host the pages at a subpath using Cloudflare, you will need to create and configure a Cloudflare Worker.

1. 1.In the left-hand sidebar of Cloudflare, go to Build > Compute & AI > Workers & Pages, then click Create Application.
2. 2.Select "Start with Hello World!"
3. 3.Change the name to <your company>-flint-rewrites and click Deploy.
4. 4.Click "Edit Code" in the top right.
5. 5.Replace the code with the following:

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

const TRYFLINT_URL = "<REPLACE_WITH_SUBDOMAIN>.tryflint.com";
const ORIGIN_URL = "<REPLACE_WITH_YOUR_ROOT_DOMAIN>";
const SUBDIRECTORY_REWRITE_PATH = "/<REPLACE_WITH_SUBDIRECTORY>"

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

    // If the request is to a Vercel verification path, allow it to pass through
    if (urlObject.pathname.startsWith('/.well-known/')) {
      return await fetch(request);
    }

    // If the request is to the subdirectory
    if (urlObject.pathname.startsWith(SUBDIRECTORY_REWRITE_PATH)) {
      // Then Proxy to Flint

      let url = new URL(request.url);
      url.hostname = TRYFLINT_URL;

      let proxyRequest = new Request(url, request);

      proxyRequest.headers.set("Host", TRYFLINT_URL);
      proxyRequest.headers.set("X-Forwarded-Host", ORIGIN_URL);
      proxyRequest.headers.set("X-Forwarded-Proto", "https");
      proxyRequest.headers.set("CF-Connecting-IP", request.headers.get("CF-Connecting-IP"));

      return await fetch(proxyRequest);
    }

    // For all other requests, pass through to origin
    return await fetch(request);

  } catch (error) {
    // On error, pass through to origin
    return await fetch(request);
  }
}

6. 6.Click Deploy for the worker.

Setup

1. 1.Go back to the Settings page of the worker you created.
2. 2.Next to "Domains & Routes", click "+ Add".
3. 3.Select the "Route" option.
4. 4.In the form, select:
   • -Zone: your domain (e.g. flint-test.xyz)
   • -Route: your domain followed by the subpath wildcard (e.g. flint-test.xyz/<subpath>/*)
   • -Fail open
5. 5.Click "Add Route".

Verification

1. 1.Check that the root domain still routes to the Framer site (e.g. flint-test.xyz).
2. 2.Check that combining your root domain with a slug from a Flint page at the subpath now routes to the Flint page (e.g. flint-test.xyz/lp/compare).