Hosting the react application on the AWS S3 offers the cost effective and scalable solutions for the deploying the static web applications and it can provides the reliable infrastructure for the storing and serving files through the internet.
Understanding Of Key Terminologies
- React: It is the JavaScript library for the building the user interface and its developed and maintained by the facebook. It can allows the developers to create the reusable UI components and manage the state of those the components efficiently.
- AWS S3: It can defined as Amazon Simple Storage Service and it is the scalable object storage service provided by the Amazon Web Service and it can allows the users to store and retrieve any amount of the data from anywhere on the web and S3 can be designed to be highly durable, available and secure of the web application.
- Static Web Application: It can consists of the static files like HTML, CSS, JavaScript are served directly to the client without the server side processing.
- Bucket: It can defined as the container for the objects stored in the AWS S3.
- Object: Object can be defined as any file or the data can stored in the AWS S3 and it can identified by the unique key within the bocket.
Hosting The React Application In AWS S3: A Step-By-Step Guide
Step 1: Create the AWS account. Go to the AWS Console and navigate to the S3 service and click on the Create bucket.
- Choose the AWS region and bucket name.
- Disable the block all public access
Step 2: Click on the create bucket then you can sucessfully create the bucket in AWS S3.
- We can find the login reactapp bucket in the bucket dashboard of the AWS console.
Step 3: Go to the permissions tab and open the bucket policy and edit the policy as the below code in to the statement policy of the bucket.
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "Stmt1380877761162",
"Effect": "Allow",
"Principal": {
"AWS": "*"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::< your bucket name>/*"
}
]
}
Step 4: Go to the properties tab after that scroll the page then you can find the static website hosting and click on the edit button and enable the static website hosting of the bucket.
- Refer the below image for the enable of static website hosting and Host type select the host a static website and named the index document and save it.
-
After the complete the configuration of the static website then you can find the endpoint of the AWS S3.
Step 10: Create the react project after complete complete the project use the below for generating the static files for deploying into the AWS.
Npm run build
Step 11: Open the loginreactapp bucket and click on the upload button upload the static files of the react project.
- Uploading the react files into the AWS S3.
- Uploading the files.
- Once upload the all files then bucket looks like the below image.
Step 15: Open the AWS bucket end then it opens the react application. Sucessfully complete the hosting react application into the AWS S3 bucket.
- If you can follow the above then you can succesfully host your react application into the AWS S3.
Conclusion
Hosting the React application on the AWS S3 is a straightforward process and it can offering the scalability, reliability, and cost-effectiveness. By following the steps outlined in this guide and understanding the key concepts and you can deploy the application with ease.
Hosting React Application In Amazon S3 – FAQ’s
Can I Use The Aws S3 To The Host React Application With The Server Side Rendering?
No, AWS S3 is the suitable for the hosting static web applications only. For the server side rendering, you can need to use the services like AWS Lambda, AWS EC2 or the AWS Elastic BeanTalk.
How Much Does It The Cost To The Host The React Application On Aws S3?
The cost depends on the factors such as the storage usage, data transfer and the request rates and AWS S3 an offers the free for the new users and the beyond that and you can pay for what you can use.
Is It Necessary To The Make My S3 Bucket To The Host React Application?
Yes, The react application to be the accessible to the users and the S3 bucket and its objects must be publicly accessible and you can adjust the permissions and bucket polices.
How Do I Update The React Application Hosted On The AWS S3?
Simply we can upload the updated build files into the S3 bucket and it can overwriting the existing onces and the users will see the changes immediately upon the refreshing the browsers.