How to self host using reverse proxy

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.

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.

How to set it up

We have articles for the most popular hosting platforms. However, any platform that supports reverse proxy setups will work.

• How to host with Cloudflare

• How to host with Amazon CloudFront

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.

• 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 domain example.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.