In this tutorial, we will host a React website in AWS S3
Create a react application locally
To create a react application, you have to install node and npm first. To install both:
Downloads: https://nodejs.org
Once installed, open your terminal or vscode terminal and write:
npx create-react-app my-app
cd my-app
npm start
Then open localhost:3000
Step 2: Build website to deploy
Now run this command to make production builds :
npm run build
We actually deploy this build folder in production environment.
Create an AWS account
Create aws acount aws.amazon.com or go to your aws account.
Create an S3 bucket
Sign in to your AWS account. Open S3 from your AWS console. Click “Create Bucket”.
If you are planning to use domain name for your website, be sure to create bucket with same name.
Enter a bucket name and click “Create”.
Step 5: Configure static website hosting in S3
Go to S3 bucket properties and enable “Static Website Hosting”. Select “Use this bucket to host a website”. Give “index.html” as the index document and error document.
Make a note of your endpoint. This is the URL using which you can access your website. Once you are done, click Save.
Set S3 bucket read permissions to public
Now go to bucker ‘Permissions” and paste the below code :
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::<your_bucket_name>/*"
}
]
}
Upload website contents to S3
Now you have to upload the contents of your build folder to your S3 bucket.
Open your S3 bucket and click “Upload”.
Drag and drop the contents of your build folder to the upload window. Check if all the contents of your build folder is present, including sub-folders and files. Once your verify this, click “Upload”.
Awesome. Your website is live now.
Top comments (0)