React is one of the most well-liked and potent JavaScript frameworks for creating dynamic and responsive user interfaces in the ever-changing field of web development. React has been the preferred option for developers looking to create responsive and smooth online apps because of its efficient rendering capabilities and component-based design.
Hosting React app on AWS S3 can serve consumers globally is an essential next step after building your application. Although there are many hosting choices, Amazon Web Services (AWS) S3 is an effortless, scalable, and affordable alternative. Explore the detailed steps of setting up React app in AWS.
About AWS S3
Amazon Web Services (AWS) offers a highly scalable, long-lasting, and secure object storage solution called Amazon Simple Storage Service (AWS S3). This web-based solution is perfect for hosting static websites, keeping backups, distributing file storage, and providing app content since it enables users to store and access any volume of data from any location. By automatically duplicating data across several regional machines, S3 ensures high availability and fault tolerance and offers great durability. It is an affordable storage choice for businesses of all sizes because of its pay-as-you-go pricing model, which offers a range of storage classes to optimize for different use cases and financial restrictions.
Why Use AWS S3 to Host Your React App?
Before we delve into the deployment procedure, let us examine the advantages of Hosting React app on AWS S3:
- Cost-Effective
AWS S3 makes hosting single-page applications (SPAs), such as React apps and static web pages, cost-effective. Since you only pay for the storage you use and the data you transfer, it's a cheap solution, especially for small—to medium-sized projects.
- Scalability
With AWS S3's high scalability, your application can handle a sudden spike in traffic without encountering service outages or performance difficulties.
- Dependability and Reliability
The React project on AWS offers outstanding endurance and dependability for your application's resources. To ensure high availability and data integrity, your files are automatically duplicated across various facilities within an AWS Region.
- Easy To Install and Maintain
Get to know in the next sections, setting up and publishing a React app to AWS S3 is not too challenging.
Prerequisites
Before we begin to deploy React to AWS S3, check you have the following prerequisites in place:
An AWS Account
Visit https://aws.amazon.com/ to register for a free AWS account if you don't already have one.
Installing the AWS Command Line Interface (CLI) locally
Visit the official AWS CLI documentation at https://aws.amazon.com/cli/ to obtain the installation instructions that are unique to your operating system.
A deployment-ready React application
You'll need a React application you wish to host on AWS S3.
Step 1: Create an S3 Bucket
The first step is to build an S3 bucket, which will be the storage place for your React application's contents. Here's how to accomplish it:
- Access your AWS Management Console, navigate to the S3 service, and proceed to select the "Create bucket" option.
- Choose a distinctive and descriptive name for your storage container (e.g., "my-react-app-bucket"). All AWS accounts need to have globally unique bucket names.
- Select the AWS Region closest to your target audience for optimal performance and minimal latency.
- After making the necessary adjustments to the remaining parameters, click "Create bucket" to complete the procedure.
Step 2: Configure the S3 Bucket for Static Website Hosting
Next, you must set up your freshly formed S3 bucket to serve your React application as a Static website hosting AWS S3. Follow these steps:
- In the AWS Management Console, explore your S3 bucket and click on the "Properties" tab.
- Scroll to the "Static website hosting" area and select the "Edit" button. Enable the "Static website hosting" option.
- Put "index.html" (no quotes) in the "Index document" input field. This will tell S3 to provide the index.html file as your website's default page.
Step 3: Create a Production-Ready React Application
You must create your React application for production before sending it to S3. This procedure optimizes and bundles your application's code and assets into a collection of efficiently served static files.
- Find the root directory of your React application by opening a terminal or command prompt and going there.
- Use these commands to create your program for production use: npm run build.
Or, if Yarn is being used:
- This will generate a build folder in your project directory that contains all the optimized and compressed files needed to run your React application.
Step 4: Send Your React App to S3 for Implementation
After building React and configuring your S3 bucket, you can deploy it to AWS S3 using the AWS CLI or a third-party tool, such as the AWS Deploy plugin for React.
Method 1: Making Use of the AWS CLI:
Find the root directory of your React application by opening a terminal or command prompt and going there.
To synchronize the contents of your local build folder and S3 bucket, use the following command:
Aws s3 sync build/ s3://your-bucket-name
Instead of typing your-bucket-name, type the name of the S3 bucket you created earlier. This command will upload every file in your local build folder to the specified S3 bucket.
After the synchronization procedure, AWS S3 will host your React application!
Method 2: Using the React AWS Deploy Plugin:
Alternatively, you can streamline the deployment procedure using the AWS Deploy plugin for React. Here's how to do it is as follows:
- To install the plugin, execute the following command in the root directory of your React application: npm install --save-dev aws-deploy-react
- Launch your package.json file and include the scripts shown below:
"scripts": {
"deploy": "aws-deploy-react"
}
- To publish your React application to S3, type the following command into the terminal: npm run deploy
When you use the plugin, you must input your AWS credentials and select the S3 bucket name to be deployed. Following the instructions, your React application will be deployed to AWS S3.
Step 5: Give Your S3 Bucket Public Access
The public cannot access the files in your S3 bucket since they are private by default. To properly function, your React application has to make your bucket and its contents publicly available.
- Select the "Permissions" tab after navigating to your S3 bucket in the AWS Management Console.
- Click the "Edit" button under the "Bucket Policy" section.
- In the policy editor, copy and paste the following policy, substituting your-bucket-name with the name of your S3 bucket:
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::your-bucket-name/*"
}
]
}
This policy makes every object in your S3 bucket readable by the general public.
- To implement the modifications, simply select the "Save changes" button.
Step 6: Open the React Application Hosted by You
Congratulations! You can visit the endpoint that AWS has supplied to access your React application, which is now hosted on AWS S3. Use these procedures to find the endpoint:
- Select the "Properties" tab after navigating to your S3 bucket in the AWS Management Console.
- Find the "Endpoint" URL by swiping to the "Static website hosting" area.
- Paste the "Endpoint" URL into your web browser after copying it.
Your React application should be up and running on Amazon S3 now!
Conclusion
In conclusion, the simplest and most affordable way to launch your front-end application is to host it on AWS S3. By following the instructions provided in this blog, you can use the scalability, durability, and dependability of AWS S3 to deliver your React application to a worldwide user base. Remember to build your React app for production, set up your S3 bucket for storing static web pages, and provide public access to your application to ensure it is accessible to all users.
Just sync your local build folder with your S3 bucket to manage and update the deployment of your React application using AWS S3. This simplified procedure allows you to concentrate on creating your application and leave the hosting and front-end asset distribution to AWS S3.
