DEV Community

Sharvesh Waran
Sharvesh Waran

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.

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

STEP 3: Select a framework "REACT".

STEP 4: Select a Variant "TYPESCRIPT".

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

Image description

STEP 6: Check localhost:5173

STEP 7: Now our react application is created successfully!

Image description

Image description

STEP 8: 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 9: Now want to create a bucket with unique name.

Image description

Image description

Image description

Image description

Image description

STEP 10: Now enable the static web hosting.

Image description

Image description

Image description

STEP 11: Now want to add bucket policy.

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

Image description

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

Image description

STEP 14: Our React application is hosted using S3.

Image description

STEP 15: Now create a cloudfront distribution for hosting a react Application.

Image description

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

Image description

STEP 17: And finally delete the cloudfront distribution.

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)

Postmark Image

Speedy emails, satisfied customers

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

Sign up