The perfect hosting for your react app 👌

Santiago Quinteros - CEO & CTO - Software on the road
Santiago Quinteros

You web application is ready to be released but, where will you host it?

By using AWS S3 buckets as your hosting and AWS CloudFront as your content delivery network your website will be ready to handle large amounts of traffic.

In this tutorial, we will discuss how to implement a scalable hosting solution and distribution for your web application.

You need an AWS account. If you don't already have one, follow this easy video tutorial.

Table of content

What is AWS S3? 🤔


Amazon S3 stores data as objects within buckets. An object consists of a file and optionally any metadata that describes that file.

To store an object in Amazon S3, you upload the file you want to store to a bucket.

When you upload a file, you can set permissions on the object as well as any metadata


  • Encryption to the data that you store
  • Multiple copies are maintained to enable regeneration of data in case of data corruption
  • It regularly verifies the integrity of data stored using checksums e.g. if S3 detects there is any corruption in data, it is immediately repaired with the help of replicated data.

Creating a bucket

  • Go to S3 service in the AWS Console and select Create Bucket

Step 1 - Create AWS S3 Bucket

  • In the Bucket name field, type a unique "DNS-compliant" name for your new bucket

  • For Region, choose US East (N. Virginia) as the region where you want the bucket to reside.

Step 2 - Confirm AWS S3 Bucket creation

  • Now go and upload your site to the S3 Bucket.

Configure your S3 bucket to be a static website hosting

  • Go to your bucket properties and look for the "Static Website Hosting" option

Step 3 - AWS S3 Bucket properties

  • Select the "entry point" file for your website.

If you are serving a react or angular single page application (SPA), this will be the index.html

  • Write down the endpoint URL.

This is your website URL now.

Step 4 - Enable AWS S3 Bucket static webhosting

  • Make sure your Bucket Policy is Public

Go to the S3 Bucket Policy section and check that your configuration is correct.

Step 5 - Check AWS S3 Bucket Policies


Now you have your site running in AWS S3.

But, we can do it better.

Let's improve our page loading time with AWS Cloudfront

Site speed with s3 and cloudfront

AWS CloudFront 🧙


AWS CloudFront speeds up the distribution of your web content (HTML, CSS, js, image, video, etc) to your users.

It delivers your content through a worldwide network of data centers called edge locations.

When a user requests content that you're serving with AWS CloudFront, the user is routed to the edge location that provides the lowest latency, so that content is delivered with the best possible performance.


  • Protection against Network and Application Layer Attacks
  • SSL/TLS Encryptions and HTTPS
  • Increase application availability
  • Free data Transfer between AWS cloud services and Amazon CloudFront

The idea is to use CloudFront as a proxy to our AWS S3 bucket

Architecture overview

Creating a CloudFront Distribution

Let's go back to the AWS Console.

  • Navigate to AWS CloudFront service

Step 6 - Open AWS Cloudfront

  • Select Create distribution

Step 7 - Select create AWS Cloudfront distribution

  • Select Web distribution

Step 8 - Select create web distribution

  • Configure Origins

Origins are places where the distribution should look for content, in our case is the AWS S3 Bucket for our website that we created in the previous part.

Step 9 - Select create web distribution

  • Configure Cache Behaviours

We want to redirect all HTTP request to HTTPS, after all HTTP sites will not be accepted anymore on chrome.

Also, we want to allow all HTTP methods.

Step 10 - Select https redirect

  • Select price class

We are going to use all edge locations, I have clients in South America and Asia, so better go with all from the start.

Step 11 - Select pricing

  • Just to make sure our origins are well configured, go to Origins tab and check the configurations.

Step 12 - Check origins are well configured

  • Invalidation Cache after each deploy

This is very important, every time you push a new version of your website, you have to come here and create a Cache Invalidation.

If you forget, your users will see the old version of your website until the cache is refreshed.

Read how to do this automatically

Step 13 - Check origins are well configured

For this, I usually just set * which means invalidate all routes and resources.

But you can go specific and prevent from invalidating some assets cache, like images and video.

Step 14 - Check origins are well configured


Now you have your site ready under this CloudFront distribution URL.

You will want to create a DNS Alias pointing your domain to it.

Step 15 - Results

Conclusion 🎉

With the combination of these two fantastic services, we can develop a scalable hosting and distribution solution our web application.

We learn how by using AWS S3 we can storage or host our web application, and by using AWS CloudFront CDN we can handle a large amount of traffic without slowing down the page load speed.

How the CloudFront edge works

The costs of using this scalable infrastructure can vary depending on your traffic but for small sites should be almost free.

The next step is to use a continuous integration approach to have an efficient and automated way to make deploys

Get the latest articles in your inbox.

Join the other 2000+ savvy node.js developers who get article updates. You will receive only high-quality articles about Node.js, Cloud Computing and Javascript front-end frameworks.


CEO at