DEV Community

Cover image for Deploying a Static Webpage - S3 & Cloudfront
Kanishkanth
Kanishkanth

Posted on

Deploying a Static Webpage - S3 & Cloudfront

1. Installing React and Node:
i. Installed Node.js as a prerequisite for React development, ensuring access to the npm package manager for creating and managing React applications. Verified the installation using node -v and npm -v commands.
Image description
ii. Used the npx create-react-app command to generate the initial React project structure. This step provided a boilerplate for building scalable React applications.
Image description

2. React Landing Page:
Developed a visually appealing landing page with essential components and content section to serve as the entry point of the application.
Image description

3. React app with personal info:
Created a dedicated component to display personal information such as name, profession, and contact details, showcasing the flexibility of React components.
Image description

4. S3 Bucket Creation:
i. Logged into the AWS Management Console to create an S3 bucket. Specified a unique bucket name, region, and configured necessary settings such as versioning and encryption.
ii. Adjusted the bucket's public access settings based on the use case, ensuring secure storage and accessibility of uploaded files.
Image description

5. Adding Bucket Policy:
Defined a JSON-based bucket policy to control access permissions. Configured the policy to allow public read access for files hosted in the bucket if needed.
Image description

6. S3 Output:
Retrieved the S3 bucket URL to access and preview the hosted files, confirming that the output rendered correctly in the browser.
Image description

7. React Page using CDN:
Leveraged the S3 bucket's static website hosting feature to generate a Content Delivery Network (CDN) link for the React app. Configured the bucket to serve files as a static website.
Image description

Top comments (0)