A domain name for your (React) App

Antoine Sauvage
Aug 14, 2018 · 4 min read

In the first two episodes, we saw how to deploy a React App on S3 very easily : https://medium.com/ovrsea/deploy-automatically-a-react-app-on-amazon-s3-iam-within-minutes-da6cb0096d55.

Then, we saw how to optimize delivery thanks to CloudFront (part 1 : https://medium.com/ovrsea/deploy-automatically-a-react-app-on-amazon-s3-iam-within-minutes-da6cb0096d55, part 2 to come: caching strategy, etc.)

At this point, you can access your app with an ugly URL : https://d2wrzsgbgv95na.cloudfront.net/. Not really what you want to send to your friends and users…

In this post, we will see how to configure your domain name thanks to Route53.

1. Buy your domain name

You should see something like this :

Click on ‘Domains’, on the left. Then ‘Register Domain’. Buying a .com domain costs around $12 a year. The problem is generally to find one…

Then, click on ‘Add to cart’. Then ‘Continue’. Fill in your information as requested and click on ‘Continue’. You can then complete your purchase.

At this point, you are the owner of a domain name. Cool, isn’t it ? Now, you have to wait for the registration to be effective… It can take up to a few days, but it’s generally much shorter.

2. Configure CloudFront

In the General Tab, we have to edit a few things:

Alternate Domain Names (CNAMES)

Custom SSL

In your domain name, for simplicity reasons, I encourage you the add your root domain and a domain with a wild card as shown below:

Validate. Pick DNS Validation (automatic if you bought the domain from AWS). Validate, validate, validate… And wait !

You should see something like this :

The goal here is for Amazon to be sure that you really own the domain. And the method is to let you add a specific key to your DNS Records, that Amazon will regularly check. If you could add this to your domain, then it means you own it, and Amazon delivers the certificate.

Well, what’s cool is that you bought your domain from Amazon ! So open the domain, and click on ‘Create record in Route 53’

We now have to wait (again…) the validation. It should not be long.

Then, you can close this tab and come back on the CloudFront configuration, General Tab. Normally, Custom SSL Certificate should be selected. In the input below, pick you certificate you juste created. Click on ‘Yes, Edit’ to save the new configuration.

3. Configure Route 53

If you come back to Route53, you should see 1 hosted zone now. Click on Hosted Zones. Click on the one you just created :

You are now in the Zone Configuration Screen. It should look like this (plus the validation records…):

We will now create the good records : click on ‘Create Record Set’.

Enter the subdomain you want (leave empty for the root domain). For example, for app:

Tick Yes for Alias, and pick you CloudFront distribution below. Save. Repeat for your different names. And guess what ? We have to wait again…

DNS propagation can take up to 24 hours. However, it’s generally shorter for closer zones (1 minute while I was writing this phrase, wow !).

4. Enjoy !

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