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/

Top comments (0)