Deploy your React apps on S3 with ease

Introduction

Selecting the best hosting provider for your React apps is an important choice in the constantly evolving world of web development.

In a previous article, we looked at the complexities of utilizing Amazon EC2 to run a simple Application. Now, we focus on a different paradigm: hosting React applications on Amazon S3, which stresses simplicity and scalability.

As a component of the flexible Amazon Web Services (AWS) family, Amazon S3 offers a strong yet user-friendly static website hosting solution, which makes it a perfect fit for implementing React apps. We will lead you through all the necessary procedures and considerations to deploy your React masterpiece on Amazon S3 with ease in this detailed guide.

Pre-requisites

1. Basic React knowledge.
2. AWS account.

Step 01: Create Your React Application.

If you have not created your React application; create a new application using the “npx create-react-app demo-app” command.

once the application is created successfully; you can see a folder structure like this.

navigate inside your application folder(demo-app) using “cd demo-app” and run your application using the “npm start” command.

now you can see an output like this in your browser(http://localhost:3000/).

So, now we have a React application to deploy in the S3 bucket.

Step 02: Log in to your AWS account

Login to your AWS account. if you don’t have an account create a FREE AWS Account by navigating to this URL: https://aws.amazon.com/free/

Step 03: Create an S3 bucket in AWS

Once your login is successful you will be navigated to the IAM dashboard.

From the top search bay type ‘s3’ and navigate to S3.

Click on the ‘Create Bucket’ button. then it will navigate you to the bucket creation page.

Select the nearest region to you(in my case I am in Sri Lanka so I am selecting the Mumbai Region which is closer to me).

Give a unique name to your bucket.

keep the rest of the settings as it is and click on the Create Bucket’ button on the bottom.

Once the AWS creates the bucket; that will be listed in a table. By clicking the bucket name we can access the specific info about that selected bucket.

Step 04: Configuring the bucket to host the static website

Navigate to the properties tab of the selected bucket.

Scroll down until find the ‘static website hosting’ section and click on the Edit button.

Select the Enable from the radio buttons

Once the Enable is selected; it will show more options to fill.

Since the entry point of the react app is index.html; we are giving the same file name for the index document name.

Click on Save Changes.

Now you have an entry point for your application. But still, we didn’t have permission to access that. so we have to grant permissions.

Step 04: Configuring Permissions settings

Turn Off the ‘Block all public access’ by clicking the Edit button.

Now we have to write some policies for the bucket by clicking the Edit button under the Bucket Policies section.

Copy and paste the given bucket policy. Don’t forget to change the bucket name in the Resource section. (format: “Resource”: [“arn:aws:s3:::your-bucket-name/*”])

{
 "Version": "2012-10-17",
 "Statement": [
  {
   "Sid": "Statement1",
   "Principal": "*",
   "Effect": "Allow",
   "Action": [
    "s3:GetObject"
   ],
   "Resource": [
    "arn:aws:s3:::testreactapp-24/*"
   ]
  }
 ]
}

This policy allows public read access to all objects within the testreactapp-24 S3 bucket, allowing anyone to download the objects.

Now once you refresh your entrypoint URL you will be getting a 404 output with the message “The specified key does not exist”. This will indicate that the bucket cant be able to find the index.html in our case.

Step 05: Build and access the page

Build your react application by running the ‘npm run build’ command. It will transform optimize, and compile the source code into static files that are suitable for deployment.

After the successful build process, you can be able to generate a new ‘build’ folder in your project folder. Now we have to upload the contents of the build folder into our bucket.

After successfully uploading your objects the folder looks like this.

Boom🎉, now your application is running on the S3 bucket.

Conclusion

Congratulations! You’ve just embarked on a journey that demystifies the process of deploying React applications, steering away from the complexities of traditional hosting environments to embrace the simplicity of Amazon S3.

In this comprehensive guide, we’ve traversed the key steps, from setting up your React application to configuring an Amazon S3 bucket for seamless deployment. By following these steps, you’ve harnessed the power of Amazon S3 to make your React masterpiece accessible to the world.

Make sure to give it a clap 👏 if you found this information useful. If you have any suggestions for how to make it better, I’d love to hear them.

Learn More

• The Core Concept of Amazon DynamoDB
• Embracing Serverless Excellence
• How to Securely Authenticate and Authorize Users with Node.js, Express, MongoDB?
• React Deployments on AWS Amplify and GitHub: A Step-by-Step Guide with CI/CD
• A Beginner’s Guide to AWS Lambda Functions: Logging Content Type of Uploaded Files in S3 Buckets
• How to deploy your application in Amazon EC2

How To Deploy a React App on Amazon S3? was originally published in Enlear Academy on Medium, where people are continuing the conversation by highlighting and responding to this story.