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

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more