How to self host using a 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 Scale 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.
Here’s what you can achieve with reverse proxy hosting:
Add custom routing to host multiple sites on a single domain.
Use custom domains and SSL certificates.
Configure a custom CDN for localized performance improvements.
Optimize content with custom caching behavior.
Add a custom WAF for security management.
Use custom edge functions for advanced authentication or metrics.
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.,
/pricingto one Framer site,/signupto 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
Use a free custom domain, such as
mysite.framer.website.Point the proxy to the custom domain instead of configuring the Framer site to use your domain. This ensures SSL end-to-end encryption, as Framer requires full domain control to generate SSL certificates.
Set the “Canonical URL” in your site’s General settings to ensure correct HTML and sitemap configuration.
When using subpaths, match your Framer project paths to the proxy routes. For example, if
example.com/products/*is powered by Framer, the Framer project should also use/products/<page>paths.Prevent trailing slashes in URLs. Single-page navigation in Framer expects consistent paths, and trailing slashes such as
/pricing/can break client-side route matching and create duplicate directory paths. Normalize incoming requests to the slashless form and keep internal links consistent.
Custom CSP configuration
If you implement a custom Content Security Policy (CSP), use caution. A strict or incomplete CSP can break site functionality. We don’t recommend using a custom CSP unless you’re familiar with its implications.
If you choose to proceed:
Allowlist all required Framer domains.
Include
worker-src 'self' blob:to ensure our anti-bot system can run during form submissions.Test your configuration in a staging environment before deploying to production. You’re responsible for any misconfiguration in your proxy or CSP setup.
Updated