DEV Community

aswin raj
aswin raj

Posted on

Hosting a Static Website by using S3 and CloudFront

Steps to Host Static Website and deploying a react file in it.

Step 1: Download the node.js from the official website. If it is preinstalled check that if it is there or not.

Commands to check:

node -v
npm -v

Image description

Step 2: Create a React file using the command "npm create vite@latest".

Image description

Step 3: After creating the file run the commmad

cd "file_name"
npm install _
_npm run dev

After running these code there will be a url run that in the local machine.You will get the output

Image description

Step 4: Create a S3 Bucket in the AWS
Step 4.1: Go to S3
Step 4.2: Click Create Bucket
Step 4.3: Give a unique name to your bucket and block public access settings for the bucket and enable the bucket versioning

Image description

Image description

Step 4.4: Create a policy for your bucket

Image description

Step 4.5: Add the files and the folders in the bucket

Image description

Step 5: Go to the CloudFront and create a distribution and place the origin.

Image description

Step 6: Copy the domain name and run it you will get the web application which you created

Image description

Link: http://714022202009-aswin.s3-website.ap-south-1.amazonaws.com

Distribution Domain Name: https://d3fwz77yejliam.cloudfront.net

After completing everything delete both the S3 and the cloudfront

Image description

Image description

Image description

Top comments (0)