Deliver your React App in milliseconds with CloudFront
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…
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:
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”
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:
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:
- Domain Name Configuration with Route 53 (better have app-demo.ovrsea.com than d2wrzsgbgv95na.cloudfront.net, right ?) (https://medium.com/ovrsea/a-domain-name-for-your-react-app-c05821fd3518)
- Route Prerendering for a faster user experience (WIP)
Feel free to comment or reach me, should you have any question or remark :)
