You can run your react app in S3 bucket and host your static website from AWS S3 bucket.
Prerequisite:
JavaScript knowledge
React knowledge
Node.js should be installed
AWS account
To make things working for this task, we need React app. To install React in your system, Node.js should be installed. if it is not installed I would recommend you to install.
You can follow this link to install Node.js click-here
Once installed please run node --version and npm --version. once you got the version number it means installation is successful.
Now we need to install react in our system directory. I have chosen D: drive, you can choose your directory name. Run this command npx create-react-app application-name.
Once your project created, run cd application-name
Run npm start : this command will run your app in browser.
Do your changes in react application according to your needs and test it. After that run this command in your application directory npm run build. You will get your build ready inside your application-name directory. Folder name will be build
Our project is ready for deployment on S3 bucket. Now login to your AWS account and go to S3 service.
Create bucket.
Uncheck Block public access.
Click on Create bucket. Now your bucket name will be visible on S3 dashboard.
Click on your bucket name and upload all your files from React project build folder. Once uploaded all files, go to dashboard, go to bucket name, select all files in your bucket and make your objects public.
Click on your bucket name and go to properties. Copy and paste Amazon Resource Number (ARN) in notepad, we will use it later in bucket policy.
Scroll down and go to Static website hosting. Click on Edit.
Enable Static website hosting and type index.html in Index document and Error document text field
click on Save changes
Click on permission.
Go to Bucket policy, click on Edit button and paste the below code.
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "paste_your_bucket_amazon_resource_number/*"
}
]
}
Paste your Amazon resource number which we have copied from properties section and click on Save changes.
To access URL, go to Static website hosting under Properties section.
Access URL and your project will be running through S3 service. Also, if you want to connect your bucket through CloudFront service use this link click-here
Need high performance for your web resources? Leelahost provides you with virtual servers https://leelahost.com/vps-hosting.html unlimited bandwidth, multiple IPv4 addresses and free setup. It is the perfect choice for those who are looking for powerful, flexible and reliable solutions at competitive prices. Enjoy stability and control when working with your applications and websites, trusting this top-notch hosting provider.