In this blog we ‘ll learn about AWS static website hosting. For this we use react application and see how can we deploy react application on AWS. We ‘ll look at the static react application. Here you are wondering about what’s this static react application. Static react application means a react application that contains only client side code there is no server side code included. So if we have to deploy the react application that contains the static code and wants that anyone can access our website via a AWS URL, the cheapest option is to deploy on AWS S3 bucket.
AWS, S3 stands for Simple Storage Service. AWS S3 bucket is one of the best scalable object storage service that is use to store and retrieve any amount of data. It generally use to store objects like files, videos, images, backup etc.
We have also learn about AWS S3 bucket. As this is the object storage service provided by the AWS. So we ‘ll store our react application files inside a bucket and see the process how can we access our react application via s3 bucket URL.
We have to follow the below steps:
- Create a React application and do the code changes as per your project requirement.
- Make build of your react application.
- Create a AWS S3 bucket.
- Upload the react build files in this bucket.
- Make AWS S3 enable for Static website hosting and add necessary permission.
Let’s follow each steps and see in details.
Step 1
We ‘ll create a simple react application. In this we added the react routing feature so we can feel some real website experience. As this blog is totally dedicated to process of react application deployment to AWS S3 bucket. So we are not going to cover how do we create react application and how can we add the routing feature in react. If you are not aware of this process you can follow our blog Routing in React application on this and get the in-depth knowledge.
As we also going to use the same example that we covered on the above given blog for react. Please follow the same or create a react application as per your project requirement because our end goal is to deploy any react application on AWS S3.
Once your react application is ready just run this and see how it’s performing on your local system. Like we already have a dummy react application and when i run it and try to access on localhost:3000 it looks like below screenshot.
You can see we have created a simple react application with three nav links. You must have your application or you can use this example by following our blog URL on link given above.
So we have our project ready now. Means we are done with step 1.
Step 2
It’s time to make build of our react application. Just run the below command in your visual studio code terminal.
npm run build
You ‘ll see the output like above screenshot once you run the npm run build command. Once build completed you ‘ll get a folder with name build in your react application root path.
Step 3
It’s AWS time now. Let’s go to AWS console and create a S3 bucket. Search S3 bucket in your aws console search bar and select the S3 option like below screenshot.
Now click on Create bucket option.
Now you ‘ll get a create bucket page. You have to follow the below steps:
- Give unique name to your bucket.
- Uncheck the checkbox button for Block all public access.
- Leave rest of the field as given default and click on create bucket button.
You can see we have successfully created the AWS S3 bucket.
Step 4
We have already created the build of our react application. Now select this bucket and upload all the files inside your build folder.
Note: Only upload files and folder that is inside build folder, do not upload the build folder.
Step 5
Till here we have uploaded all the folder and files that inside build folder in our react application. Now we have to do some changes in our S3 bucket so it can be enable for static website hosting. Let’s follow the below steps:
- Go to properties tab and scroll down and click on Edit button for Static website hosting.
- Enable Static website hosting and Hosting type option. Define Index document and click on save change button at bottom.
- Go to Permission tab and click on Bucket policy Edit button. Paste below line there and click on save change button at bottom.
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicRead",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::vasu-react-app/*"
}
]
}Code language: JSON / JSON with Comments (json)
We are done and congrats you have successfully completed all the steps. It’s time to validate that our react application has been successfully hosted or not on AWS S3 bucket. This type of hosting is also called the static website hosting in AWS.
To validate go to the properties tab and scroll down till bottom until you reach the Static website hosting section. You ‘ll see a URL on Bucket website endpoint just hit this URL in your browser and see you ‘ll get the response of your react application.
You can see that we are able to access our react application via Bucket website endpoint. Now You can share this endpoint with anyone and they all can access your website.
Note: This Bucket website endpoint is http not https. Suppose you share this URL with others and they told you that they are not able to access the URL it means they are redirecting to https. Because some browser like Google Chrome supports automatically redirect from http to https. So make sure when you trying to access this URL it should start with http not https.
Hope you like this blog, Please share your feedback on comment section. If you need blog on any specific topic please mention in comment section we try to cover that in our upcoming blogs.
Thanks. Please share this blog with others.