Deploy React Apps to AWS with Custom Domain

So, after many hours of coding and debugging, I finally finished my React app! It was time to share it with the world. While I'd previously hosted a React app (my portfolio hosted on GitHub pages) on GitHub Pages (check out my guide here: deploy-react-app-on-github-pages), I wanted to explore a more robust and scalable solution. After some research, I decided to give AWS a shot. It seemed like a big deal at first, but trust me, it wasn’t as scary as I thought.

For instance, I deployed the React app with the custom domain on AWS, Link: rightosolutions.com

Step 1: Understanding the main services and Flow of the process

Before diving into the technical stuff, let’s get to know the main services in this process:

S3: This is basically a huge digital closet where you can store all your app’s files. Think of it as a super secure and scalable Google Drive.
CloudFront: Imagine this as a speedy delivery guy. It takes your files from S3 and delivers them to your users as fast as possible, no matter where they are.
Route 53: This is like the traffic cop of the internet. It directs people to your website when they type in your domain name.
Certificate Manager: This guy is in charge of keeping your website secure. It provides SSL/TLS certificates to encrypt data between your website and visitors.

The flow of process:

Step 2: Building My React App

Okay, let’s assume you already have a React app ready to go. If not, you can create a basic one using create-react-app. Once you have your app built, you need to build it for production. This creates an optimized version of your app ready for deployment.

Step 3: Creating an S3 Bucket

Head over to the AWS Management Console and create an S3 bucket. Give it a unique name. The name should be the same as your domain name (if you haven’t registered a domain yet, don’t worry; I’ll guide you through that later in the blog). Remember, bucket names are globally unique, so choose wisely. Once created, go to the bucket properties and set the following:

Static website hosting: Enable this option and specify the index document (index.html) and error document (optional).
CORS: Configure CORS rules if your app needs to interact with other services.

Enable static web hosting:

Step 4: Uploading My App to S3

Now it’s time to move your built React app to the S3 bucket. You can do this using the AWS Management Console, AWS CLI, or even a third-party tool like the AWS S3 plugin for your code editor.

Step 5: Setting Up CloudFront

Create a CloudFront distribution. In the origin settings, select your S3 bucket as the origin. Configure other settings like cache behavior, price class, and distribution settings based on your needs.

Step 6: Registering a Domain and Creating DNS Records

You’ll need a domain name for your app. Purchase one from a domain registrar like GoDaddy or Namecheap. Once you have it, add it to Route 53. Create an A record pointing to your CloudFront distribution’s domain name.

I have purchased my domain from Route 53.

Purchase a Domain (if needed): If you haven't already, you can purchase a domain directly from Route 53.

Navigate to the Route 53 console and select "Registered domains." Click "Register domains." Enter your desired domain name and choose an available extension. Provide the required contact information and complete the purchase.
Create a Hosted Zone: Create a hosted zone for your domain to manage its DNS records.
Create an A Record: Create an A record pointing to your CloudFront distribution's domain name. This record will direct traffic from your domain to your website.
Additional Records (Optional): Depending on your needs, you might create additional records like CNAME records for subdomains or MX records for email.

By using Route 53 for both domain registration and DNS management, you can streamline your domain management process.

Note: Domain registration fees apply.

Registered Domain (rightosolutions.com):

Step 7: Obtaining an SSL Certificate

Use AWS Certificate Manager to request a free SSL certificate for your domain. Once approved, associate it with your CloudFront distribution.

Step 8: Testing React App

It’s time to test your app! Open a browser and type in your domain name. You should see your React app up and running!

And there you have it! You've successfully deployed your React app to AWS. While GitHub Pages is a great option for smaller projects, AWS offers a more robust and scalable solution for larger applications.

Also check out my blog to deploy react app on GitHub pages: deploy-react-app-on-github-pages