Developers

Search

Developers

Search

Hosting with Amazon CloudFront

CloudFront is Amazon’s content delivery network (CDN). Framer utilizes CloudFront as its default CDN. You only require CloudFront when you need greater control over your hosting.

Setup

On your Framer project, go to "Settings" -> "Domains". Add a free framer subdomain to your site (e.g. my-company.framer.website).

Log in to the AWS Management Console and go to CloudFront. Click “Create Distribution”.

Add your Framer domain in the “Origin Domain” field, optionally tweak your settings.

Make sure to use your custom Framer subdomain and not the "Base domain" (<something>.framer.app).

For the default cache behaviour, make sure to set

  • Viewer protocol policy: Redirect HTTP to HTTPS

  • Allowed HTTP methods: GET, HEAD

  • Cache policy: CachingOptimized

  • Origin request policy: AllViewerExceptHostHeader



Optionally tweak the settings. When you're done, press "Create distribution".

Once the distribution is deployed, click the link to access it. By visiting the distribution link, you can now view your Framer site hosted by CloudFront.

Lastly, make sure to set up your canonical URL in Framer. Open your project, go to "Settings" -> "Domains", set the canonical URL option to "Advanced", insert your custom domain (e.g. my-site.com) and publish your website.

Setting up multiple origins

If you want to set up a CloudFront distribution like this:

Start by creating a distribution following the steps mentioned earlier.

Then, for the main distribution (my-site.com), go to the "Behaviors" tab and click on "Create Behavior".

Next, add a path pattern "/framer-project/*" and choose the Framer project origin. There are several matching options available, but essentially, this configuration will forward everything under "/framer-project/" to the Framer site.

Make sure you select the same settings as described in the previous section (Viewer protocol policy, Cache policy, etc).

Save your changes and wait for them to be deployed. Now you’ll have two origins under a single CloudFront distribution. As a next step you will likely want to add your main domain to your CloudFront distribution:

Tip: if you want CloudFront to work with your naked / apex domain (mysite.com instead of www.mysite.com) it’s easier to use Route53.

If you encounter any issues or need further assistance, feel free to contact Framer's support team through our contact page.