DEV Community

Harinivas. M
Harinivas. M

Posted on

1 1

Deploying a Static website using AWS (S3+cloudfront)-React App

1. Install the react app

2. create the react app

i. open the terminal and check the all prerequisites are installed or not, if not installed make sure install it.
ii. check the version of the node.js and npm.
iii. npx create vite@latest
iv. create a project name.
v. then run commands like - cd (project name) -> npm install -> npm run dev.
vi. finally the normal static website hosted.

Image description

3. Create a S3 bucket in AWS console

Image description

i. then change the permission of static hosting into enable state.
ii. create a bucket policy using policy generator.
iii. add the objects like (files and folders) in S3.
iv. go to properties in last and link will be shown , click the link to host the file in S3.

Link for website : http://node-22.s3-website-us-east-1.amazonaws.com
Image description

4. Hosting a website in CloudFront

i. create a distribution
ii. select the origin
iii. select the WAF for the security purpose.
iv. finally the distribution is created.

Image description
v. Once the distribution is deployed, we can able to host it.
vi. copy the DNS and paste the DNS in New tab for hosting a website.
vii. Finally the website is hosted successfully.

Image description

5. Cost management

More amount of cost will be there for the CloudFront so we should delete the distribution after the final work done.
Image description

Flowchart Diagram:

Image description

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay