You are currently viewing Step by Step Guide to Deploy React Application to AWS

Step by Step Guide to Deploy React Application to AWS

Deploy React Application to AWS

If you want to deploy your React application like Netflix, Instagram, or Facebook then this article is for you. You can deploy your application in the cloud through any cloud service platform. Deploying your React application to the cloud makes your application accessible to global users. AWS (Amazon Web Services) is a popular and secure cloud computing service platform and it provides a robust platform for hosting, making it an excellent choice for deploying your React app. We can host the application using the S3(Elastic Compute Cloud) web service on AWS which makes our application secure and easy for developers to host. In this article, we will see how to deploy and host reacts app using AWS S3.

Importance of deploying a React application to AWS

Deploying our React application on AWS (Amazon Web Services) has many advantages for us. If you deploy your React application on AWS, it handles varying levels of traffic without compromising the speed performance of the application.  Ensures optimal performance and scales your application based on demand with services like AWS Elastic Beanstalk or AWS Lambda. You can take advantage of AWS’s highly available infrastructure that minimizes downtime and provides reliable access to your application across different regions. AWS provides high security for our application data and protects against common web application attacks. And its identity and Access Management (IAM) service provide granular access control to our applications.

So, deploying a React application to AWS can provide ease of deployment and management, scalability, high availability, security, cost optimization, and access to a supportive community.

Prerequisites

Before we move on to the deployment process, you must have the following things in place:

  • The React application that you are going to host.
  • An AWS account with appropriate access privileges.
  • You have to install AWS CLI to upload your react build application to S3 bucket. 
    npm install -g awsmobile-cli

Step-by-Step Guide to Deploy React App to AWS

Follow the below steps to easily deploy and host your react application on AWS

READ ALSO  Best Example to Know the Pure vs Regular Components in React

Step 1: Logging into AWS(Amazon Web Service)

Logging into AWS (Amazon Web Service) account

Go to AWS (Amazon Web Services) official website, click on the “Create Account” button, and log in in 5 steps. Follow the below steps and create your AWS account:

  1. Step 1: E-mail verification and set a password for the AWS account.
  2. Step 2: You have to give your contact information.
  3. Step 3: You need to pay 1$ but it will be refunded after 7 to 10 days because they really need to check if you put in a valid credit or debit card. This is the reason why they deduct a small amount for creating an AWS account.
  4. Step 4: You need to verify your phone number through a call or message
  5. Step 5: They will ask you to select your AWS plan.

After completing these 5 steps, your AWS account will be created successfully.

Step 2: Create an S3 bucket

  1. To create an S3 bucket, you need to search for “S3” in the AWS account search bar and select it.
  2. After that, your S3 bucket dashboard will look like the below image, and then click the “Create bucket” button on the top right side:Create S3 bucket in AWS
  3. Then the “Create bucket” form will open, and in the “General configuration” section give your unique bucket name. Select the region closest to your target audience for better performance.deploy react application to aws
  4. Disable the “block all public access” checkbox and enable the “turning off” checkbox as shown in the below image only then the bundle files of the website will be accessible.Create S3 bucket on AWS
  5. Leave the default settings as they are, click on the “Create bucket” button at the bottom and your bucket will be created.

Step3: Configure the S3 Bucket

  1. Open the newly created bucket from the S3 dashboard.deploy react application to aws
  2. Then click the “Properties” tab on top and scroll down to select “static website hosting”.
  3. Click edit static website hosting.deploy react application to aws
  4. And type “index.html” for the index field as shown in the below image, because when you basically generate the bundle entry point is index.html.
  5. enable static website hosting on AWSClick save change” button on the bottom.

Step 4: Configure Bucket Permissions

  1. Open your bucket from the s3 dashboard.
  2. Click the “permission” option on top and paste the below code to your bucket policy box. 
    {
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*"
    }
  ]
}
  3. Replace “YOUR_BUCKET_NAME” with the actual name of your S3 bucket.
  4. Save the changes.
READ ALSO  How do you Handle HTTP Response in React?

Step 5: Build the React Application:

If you build the React application, all the files used in your project will be combined into a single file. To build your react application, you need to run the below command on your terminal or command prompt,

npm run build

This command will create an optimized production build of your React application in a folder named “build”

Step 6: Upload React Application to S3

You can upload your React application to an S3 bucket in two ways. There are

Using drag and drop

  1. Go to the S3 bucket dashboard and click on the “Upload” button.
  2. You can drag all the files and folders from the “build” folder of your React application and drop into upload the files to the root of your S3 bucket.
  3. Your app will add to the S3 bucket, like:Upload React Application to S3

But I don’t think that’s the best way, the best way would be to use the AWS CLI.

Using CLI

  1. Install the AWS CLI by following this page’s instructions: Steps to install AWS CLI
  2. Run the command “aws --version” to verify that the CLI is installed on your system. If the installation was successful, it will be the version.
  3. After installing CLI, open your terminal or command prompt with navigate to the root directory of your React application.
  4. Run the AWS CLI below comment replacing your bucket name to upload the contents of the “build” folder to your S3 bucket. 
    aws s3 sync build/ s3://your-bucket-name
  5. Once the upload is complete, your React application files will be available in the S3 bucket.

Step 7: Testing the application for proper functionality

  1. To test your application, go to the S3 bucket dashboard and click the “Properties” tab.
  2. Then Scroll down under “Static Web Hosting“, the existing URL is your application’s URL.How to find my domain link on AWS
  3. So you can check, your react application is live now by clicking that URL.

Conclusion

By following this step-by-step guide, you can successfully deploy your React application to an S3 bucket and serve it globally. With your application live on AWS, you can now provide a seamless experience to users and enjoy the benefits. If you are a beginner in web development, you can work on one of the 5 best developer roles by hosting a small project on React. I hope this article was useful for you, if you have any doubt please leave a comment

Leave a Reply