Now that we have our app up and running on S3, let’s serve it out globally through CloudFront. To do this we need to create an AWS CloudFront Distribution.

Select CloudFront from the list of services in your AWS Console.

Select AWS CloudFront service screenshot

Then select Create Distribution.

Create AWS CloudFront Distribution screenshot

And then in the Web section select Get Started.

Select get started web screenshot

In the Create Distribution form we need to start by specifying the Origin Domain Name for our Web CloudFront Distribution. This field is pre-filled with a few options including the S3 bucket we created. But we are not going to select on the options in the dropdown. This is because the options here are the REST API endpoints for the S3 bucket instead of the one that is set up as a static website.

You can grab the S3 website endpoint from the Static website hosting panel for your S3 bucket. We had configured this in the previous chapter. Copy the URL in the Endpoint field.

S3 static website domain screenshot

And paste that URL in the Origin Domain Name field. In my case it is, http://notes-app-client.s3-website-us-east-1.amazonaws.com.

Fill origin domain name field screenshot

And now scroll down the form and switch Compress Objects Automatically to Yes. This will automatically Gzip compress the files that can be compressed and speed up the delivery of our app.

Select compress objects automatically screenshot

Next, scroll down a bit further to set the Default Root Object to index.html.

Set default root object screenshot

And finally, hit Create Distribution.

Hit create distribution screenshot

It takes AWS a little while to create a distribution. But once it is complete you can find your CloudFront Distribution by clicking on your newly created distribution from the list and looking up its domain name.

AWS CloudFront Distribution doamin name screenshot

And if you navigate over to that in your browser, you should see your app live.

App live on CloudFront screenshot

Next up, let’s point our domain to our CloudFront Distribution.