DEV Community

deepika n
deepika n

Posted on

Static Webpage Hosting (S3 + Cloud front) - React app

Check if the requirements like npm and node are installed in your system
if it is preinstalled check for the version as given below

Image description

Now run a command npm install -g create-react-app

Image description

Now run a command npm create vite@latest

Image description

Now run the following commands:

cd Deepika react

npm install

npm run dev

Image description

By following the link that has been generated we will be redirected to this page

Image description

Now create a S3 Bucket
Amazon S3 -> Bucket -> Create Bucket
Provide a unique bucket name as mentioned below

Image description

Block Public Access

Image description

Now Click Create bucket

Image description

Click the bucket and Enable static webpage hosting

Image description

Edit the buckect policy

Image description

Now go to the dist folder and upload the filea and folders separately
and them one by one

Image description

Now you can view the index.html file and the output is as shown below

Image description

Link :
http://deepikan714022202017.s3-website-us-west-2.amazonaws.com

Open cloud front and create a Distribution

Image description

The Cloud front output is as shown blow

Image description

Cloudfront Link:
https://d9cod4fas679p.cloudfront.net/

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

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