How To Dev

Introduction If you’ve read my previous posts on AWS S3, you already know that S3 is great for file storage. But here is a cool tip: since frontend projects (like React, Angular, or Vue) build into static files, we can host them on S3 and use them just like a regular website! In this post, I’ll show you how to deploy a React app to S3 for direct access, as well as how to set it up using CloudFront. Prerequisites Before we start, you should have a basic understanding of AWS S3, how to set up the AWS CDK, and how to create a Bucket. Implementation First, let's create a simple React project using Vite with two pages: Home and About. Feel free to use your own content! App.tsx import { BrowserRouter as Router , Routes , Route , Link } from 'react-router-dom' ; import Home from './page/Home' ; import About from './page/About' ; function App () {   return (     < Router >       < nav style = { { padding: '10px' , borderBottom: '...

Introduction Amazon S3 (Simple Storage Service) is an object storage service offered by AWS. It's designed to be highly scalable, available, and secure, making it a popular choice for a wide range of use cases, from hosting static websites to storing backups and big data. Basic Concepts Object Is a file. Can include metadata to describe information for that file. Bucket Is where objects are stored. Can create one or many buckets in the regions that Amazon supports. The bucket name must be a unique name globally. Can configure permissions for the bucket to allow access and modification of files inside. Amazon S3 stores data as objects in buckets. AWS CLI First, access this link to install the AWS CLI according to the operating system you are using: https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html Use the following command to check the version after successfully installing the AWS CLI: aws --version Next, use the following command to configure AWS inform...