How to self host using reverse proxy
Reverse proxy hosting is a modern method for integrating your Framer site with an existing hosting provider or infrastructure. It offers complete control over headers, authentication, and delivery. Popular hosting platforms such as Vercel, Netlify, NGNIX, CloudFlare, and AWS all support reverse proxy hosting.
Note: Reverse proxy is only available as an Add-on or our Enterprise plans.
How it works
Think of this as “automatic uploading.” Instead of repeatedly downloading and uploading a new version after each update, your server can directly request the page from the Framer site and save it for serving from your host. You can also choose to modify the page, such as setting headers and adding authentication. Technically, you instruct your hosting platform to forward the client's request to your Framer site, make any necessary modifications, send it back, and cache it locally. This way, subsequent requests can be served directly from your host, eliminating the need for manual upload steps.
This method gives you much more control over your website. Here's a small list of some things you can achieve with it:
Add custom routing for paths and URLs (host multiple sites on a single domain).
Add custom domains and SSL certificates for your specific setup.
Add custom HTTP (security) headers and redirects to your setup.
Add custom CDN configuration for localized performance optimizations.
Add custom caching behavior for advanced content optimizations.
Add custom WAF (web application firewall) and manage your own rules.
Add custom edge functions to for example add advanced auth or metrics.
Common use cases
Customers often use proxy hosting for the following reasons:
To consolidate multiple websites under a single domain. Proxy rewrites enable directing different paths to different origins. For example,
/hello
could point to one Framer site,/signup
to another, and the main index to a site built in Next or React directly. This approach, also known as micro frontends, is quite popular.To apply authentication, analytics, or cookies to requests before sending them.
To implement an additional layer for server-side analytics or optimizations.
To add an extra caching layer for improved reliability and performance.
To ensure that traffic is served from “vetted” enterprise infrastructure in larger companies.
Unsupported use cases
Framer doesn’t support reverse proxies that:
Modify or remove tags in
<head>
. Some of the<head>
tags are controlled by Framer’s JavaScript. The site might behave unpredictably or even break if a reverse proxy modifies or removes them. Even if the site doesn’t break today with a modified/removed tag, it might break in the future when we ship a new update.Adding tags into
<head>
is supported and won’t break anything.Add, modify, or remove content of
<div id="main">
.<div id="main">
is where the content of the site resides. The tag’s content is controlled by React (the technology Framer uses for rendering sites), and any unexpected changes to that tag might break the site.Modifying
<body>
outside of<div id="main">
is supported and won’t break anything, as long as the reverse proxy doesn’t change, reorder, or delete Framer scripts.
How to set it up
We have articles for the most popular hosting platforms. However, any platform that supports reverse proxy setups will work.
Best Practices
To enable “Staging” for publishing, you need to do the following:
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 allows for SSL end-to-end encryption. Framer requires control of the full domain to generate SSL certificates.
More best practices:
Configure the “Canonical URL” in the General settings of your site to ensure it is correctly set in the HTML and sitemap.
When using subpaths, make sure that the Framer project uses the same paths instead of rewriting them in the proxy. This ensures that redirects performed by Framer to remove or add trailing slashes in URLs continue to work properly. For example, if you want the
/products/*
section of your site to be powered by Framer under the domainexample.com
, set up your Framer project so that the pages also use the/products/<page>
path.
To learn more about how we can help you find the perfect hosting option, reach out to your Customer Success Manager or get in touch with our team.