DEV Community

Aadhi Kesavan
Aadhi Kesavan

Posted on

Hosting React Application Using S3 and CloudFront

STEP 1:Check node and npm is already installed in your system,if not install them.

Image description

STEP 2: Initalize a new project with the Vite build tool,Enter your project name.

Image description

STEP 3:Select a framework "REACT".

Image description

STEP 4: Select a Variant "TYPESCRIPT".

Image description

STEP 5:Now run the above three commands one by one.

Image description

STEP 6:Now our react application is created successfully!

Image description

STEP 7:Open the project in vs code,then run the command "npm run build".This command compiles and bundles your source code and placed in a directory "dist\".

Image description

STEP 8:Now want to create a bucket with unique name.

Image description

STEP 9: Now enable the static web hosting.

Image description

STEP 10: Now upload the files and folders from the dist folder in your bucket.

Image description

STEP 11:Then go to properties, scroll down, you can find bucket website endpoint, then click it.

Image description

STEP 12: Our React application is hosted using S3.

Image description

STEP 13: Now create a cloudfront distriubtion for hosting a react Application.

Image description

STEP 14: Copy the distribution domain name and paste it in a new tab.Now we can see the same result.

Image description

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

👋 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