How to Deploy Your React Project with a Custom Domain Using AWS?

Deploying your React app with a custom domain using a cloud provider like AWS (Amazon Web Services) can seem daunting, but it’s straightforward when broken down into manageable steps. In this article, we’ll guide you through the entire process, from bu…


This content originally appeared on DEV Community and was authored by Shanu

Deploying your React app with a custom domain using a cloud provider like AWS (Amazon Web Services) can seem daunting, but it's straightforward when broken down into manageable steps. In this article, we'll guide you through the entire process, from building your app to making it live on your custom domain.

When you’re ready to share your React project with the world, deploying it with a custom domain gives your app a professional touch. AWS provides a robust, scalable platform for hosting static websites, making it an excellent choice for deploying React apps. This guide will walk you through the process of deploying your React app on AWS S3 with a custom domain, step by step.

Preparing Your React App for Deployment**

Before you can deploy, you need to build your React app:

  1. Build Your App: Run the following command in your terminal to generate the production build of your React app: 
   npm run build

This command creates an optimized build folder that contains all the files you’ll need to deploy.

  1. Test the Build: It’s a good idea to test your build locally before deploying. You can use a package like serve: 
   npx serve -s build

This command will serve your app locally so you can ensure everything is working as expected.

Setting Up AWS S3**

AWS S3 (Simple Storage Service) is an excellent choice for hosting static websites like React apps.

  1. Create an S3 Bucket:

    • Go to the AWS S3 Console.
    • Click on "Create bucket."
    • Enter a unique bucket name (this will be your app’s name).
    • Choose a region close to your target audience.
    • Uncheck the "Block all public access" option and acknowledge that your bucket will be publicly accessible (important for hosting websites).

  2. Upload Your React App:

    • Once your bucket is created, click on it to open it.
    • Click on "Upload" and select all files from your build folder.
    • After uploading, click on "Properties," then enable "Static website hosting."
    • Set the "Index document" to index.html and the "Error document" to index.html as well.

  3. Make the Bucket Public:

    • Go to the "Permissions" tab in your bucket.
    • Click on "Bucket policy" and paste the following JSON, replacing your-bucket-name with your actual bucket name: 
     {
   "Version": "2012-10-17",
   "Statement": [
     {
       "Sid": "PublicReadGetObject",
       "Effect": "Allow",
       "Principal": "*",
       "Action": "s3:GetObject",
       "Resource": "arn:aws:s3:::your-bucket-name/*"
     }
   ]
 }
  • Save the policy to allow public access to your files.

Setting Up a Custom Domain**

To use a custom domain, you'll need to configure Route 53, AWS’s DNS web service.

  1. Register Your Domain:

    • If you don’t have a domain, you can register one directly through AWS Route 53.
    • If you already have a domain, you can still manage it through Route 53 by creating a hosted zone for it.

  2. Configure Route 53:

    • In the Route 53 dashboard, go to "Hosted zones" and click on your domain.
    • Click "Create record" and choose "A - IPv4 address."
    • Select "Alias" and choose your S3 bucket as the alias target.

  3. Update Your Domain's DNS:

    • If your domain is managed outside of AWS, update your DNS settings to point to the Route 53 name servers provided when you created the hosted zone.

Setting Up SSL with AWS Certificate Manager (Optional but Recommended)**

For security and SEO benefits, it’s crucial to use HTTPS:

  1. Request a Certificate:

    • Go to the AWS Certificate Manager.
    • Request a public certificate and enter your domain name (including www.yourdomain.com and yourdomain.com).
    • Validate the domain by following the instructions provided by AWS.

  2. Configure CloudFront:

    • Set up AWS CloudFront to serve your content securely over HTTPS.
    • In the CloudFront console, create a new distribution and select your S3 bucket as the origin.
    • Under SSL Certificate, choose "Custom SSL Certificate" and select the certificate you created.
    • Update the domain settings to point to the CloudFront distribution instead of the S3 bucket directly.

Example: Deploying a Sample React App

Let’s say you’ve created a personal portfolio using React, and you want to deploy it to www.myportfolio.com:

  1. Build Your React App: 
   npm run build

  1. Upload to S3:

    • Create an S3 bucket named myportfolio.com.
    • Upload your build folder contents.
    • Enable static website hosting in S3.

  2. Configure Route 53:

    • Register myportfolio.com in Route 53.
    • Create an A record in Route 53 pointing to your S3 bucket.

  3. Set Up SSL:

    • Request an SSL certificate for myportfolio.com.
    • Set up a CloudFront distribution to serve your app securely over HTTPS.

Outro

Deploying your React app with a custom domain on AWS may seem complex at first, but with the steps outlined above, you can confidently host your app with all the benefits of a professional deployment. Whether you're deploying a personal project or a production-level application, AWS provides the tools and scalability to meet your needs.

FAQs

Q1: Do I need to pay for AWS S3 and Route 53?

A: Yes, AWS services are paid, but they offer a free tier with limited usage, which is often sufficient for small projects or testing.

Q2: Can I use other domain registrars instead of Route 53?

A: Yes, you can use other registrars and still host your website on AWS S3 by configuring the DNS settings accordingly.

Q3: Why should I use CloudFront?

A: CloudFront provides better performance, security (HTTPS), and caching, which can significantly improve the speed and reliability of your website.

Q4: What if I face issues during deployment?

A: AWS documentation and community forums are excellent resources for troubleshooting, and their customer support is also available if needed.

By following this guide, you can deploy your React app with a custom domain using AWS and ensure a professional and secure web presence.


This content originally appeared on DEV Community and was authored by Shanu


Print Share Comment Cite Upload Translate Updates
APA

Shanu | Sciencx (2024-08-21T12:52:19+00:00) How to Deploy Your React Project with a Custom Domain Using AWS?. Retrieved from https://www.scien.cx/2024/08/21/how-to-deploy-your-react-project-with-a-custom-domain-using-aws-2/

MLA
" » How to Deploy Your React Project with a Custom Domain Using AWS?." Shanu | Sciencx - Wednesday August 21, 2024, https://www.scien.cx/2024/08/21/how-to-deploy-your-react-project-with-a-custom-domain-using-aws-2/
HARVARD
Shanu | Sciencx Wednesday August 21, 2024 » How to Deploy Your React Project with a Custom Domain Using AWS?., viewed ,<https://www.scien.cx/2024/08/21/how-to-deploy-your-react-project-with-a-custom-domain-using-aws-2/>
VANCOUVER
Shanu | Sciencx - » How to Deploy Your React Project with a Custom Domain Using AWS?. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/08/21/how-to-deploy-your-react-project-with-a-custom-domain-using-aws-2/
CHICAGO
" » How to Deploy Your React Project with a Custom Domain Using AWS?." Shanu | Sciencx - Accessed . https://www.scien.cx/2024/08/21/how-to-deploy-your-react-project-with-a-custom-domain-using-aws-2/
IEEE
" » How to Deploy Your React Project with a Custom Domain Using AWS?." Shanu | Sciencx [Online]. Available: https://www.scien.cx/2024/08/21/how-to-deploy-your-react-project-with-a-custom-domain-using-aws-2/. [Accessed: ]
rf:citation
» How to Deploy Your React Project with a Custom Domain Using AWS? | Shanu | Sciencx | https://www.scien.cx/2024/08/21/how-to-deploy-your-react-project-with-a-custom-domain-using-aws-2/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts