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

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

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