Deliver your React App in milliseconds with CloudFront

Antoine Sauvage
Jun 15, 2018 · 3 min read

You uploaded you React App on a S3 Bucket thanks to https://medium.com/ovrsea/deploy-automatically-a-react-app-on-amazon-s3-iam-within-minutes-da6cb0096d55.

Then what ? Then…

Cloudfront

Using S3 is not the end of the story. Adding CloudFront in front of S3 allows you to :

  • deliver your app with a lower ping
  • gzip your app
  • manage different subdomains on the same bucket and hence the same build
  • enable HTTPS

The advantages of using CloudFront

CloudFront is a Content Delivery Network: https://en.wikipedia.org/wiki/Content_delivery_network. It delivers static assets faster across the globe. And guess what ? Our React App is a static asset ! Let’s see the different advantages in details:

Gzip + Low Ping: Below is a comparison between delivering our React app from S3 or from CloudFront:

Directly from S3 — General
Directly form S3 — main.js details
With CloudFront — General
With CloudFront — main.js details

As you can see:

  • CloudFront gzips your content: our main bundle went down from 115 kB to 38 kB. It is huge (x3 !), especially when your app grows and on mobile networks
  • The ping is lower: 18 ms against 110 ms with S3
  • Overall, downloading the main assets took 125 ms with Cloudfront, more than 250 ms with S3. Not bad !

Multiple subdomains/routes: We will come back on managing subdomains on the same bucket in a next article about prerendering your pages.

HTTPS: S3 does not support HTTPS… Using CloudFront is mandatory to enable HTTPS, and using HTTPS is a must do: https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https

Configuration

Configuring CloudFront is much easier than deploying on S3…

First, we go to the CloudFront panel:

Click on “Create Distribution”, then “Get Started” in the Web section

Here we go…

Origin Settings

The only field you have yo fill is Origin Domain Name. We take our website origin, that you can find in your S3 bucket, tab “Properties”, panel “Static Website Hosting”

The website URL is the “endpoint”

Default Cache Behavior

The only thing you have to turn on is “Compress Object Automatically”. I also encourage you to redirect HTTP traffic to HTTPS, but it’s not mandatory.

Distribution Settings

Leave it as it is. In the next article, we will cover how to add a domain name to your app, and we will come back on this section.

Click on Create the Distribution.

You should see it being deployed:

Deployment in progress…

When it’s done, you can access your website at the “Domain Name”. In our case: https://d2wrzsgbgv95na.cloudfront.net

It’s all set ! Your app is now optimally delivered.

In the next articles, we will cover:

Feel free to comment or reach me, should you have any question or remark :)

OVRSEA

The French digital feight-forwarder

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store