How to self host using reverse proxy

Reverse proxy hosting is a modern way to integrate your Framer site with an existing hosting provider or infrastructure. It offers full control over headers, authentication, and delivery. Popular platforms like Vercel, Netlify, NGINX, Cloudflare, and AWS support this hosting method.

Please note that the reverse proxy is available only as an add-on with our Scaleup plan or included in our Enterprise plans. You can view our pricing here.

How it works

Reverse proxy hosting allows your server to directly request and cache pages from your Framer site, eliminating the need for manual uploads after updates. You can modify the pages—such as setting headers or adding authentication—before serving them through your host. The hosting platform forwards client requests to the Framer site, applies modifications, caches the response locally, and serves subsequent requests directly from the host. This process simplifies updates and gives you greater control over your website.

Diagram comparing "Direct Hosting" and "Custom Hosting" setups for a Framer site. In Direct Hosting, a single arrow connects "Client Browser" to "Framer Site." In Custom Hosting, the flow involves an intermediate step: "Client Browser" connects to "Vercel or Netlify" (labeled "Reverse Proxy"), and from there, another arrow leads to "Framer Site" (marked as "Origin"). The word "Cached" appears between "Reverse Proxy" and "Framer Site.”

Here’s what you can achieve with reverse proxy hosting:

Common use cases

Customers often use proxy hosting to:

  • Consolidate multiple websites under one domain. Proxy rewrites allow different paths to point to different origins (e.g., /pricing to one Framer site, /signup to another, and the main index to a Next.js site).

  • Add authentication, analytics, or cookies to requests before forwarding them.

  • Create a layer for server-side analytics or optimizations.

  • Add an extra caching layer for enhanced reliability and performance.

  • Route traffic through vetted enterprise infrastructure for larger organizations.

Unsupported use cases

Framer doesn’t support reverse proxies that:

  • Modify or remove tags in <head>. Tags in <head> are managed by Framer’s JavaScript, and changes may cause unpredictable behavior or break future updates. Adding tags is supported.

  • Add, modify, or remove content in <div id="main">. This tag contains the site’s content, controlled by React. Modifications to this tag can break the site. Changes to <body> outside <div id="main"> are supported, provided Framer scripts remain unaltered.

How to set it up

We offer setup guides for popular platforms. Any platform that supports reverse proxies will work:

Best practices

For staging environments:

  • Use a free custom domain like mysite.framer.website.

  • Point the proxy to this domain instead of linking your Framer site to your main domain. This ensures SSL end-to-end encryption, as Framer requires full domain control to generate SSL certificates.

Additional tips:

  • Set the “Canonical URL” in your site’s general settings for proper configuration in the HTML and sitemap.

  • When using subpaths, align Framer project paths with the proxy setup. For instance, if the /products/* section is powered by Framer under example.com, ensure the Framer project uses /products/<page> paths.