Deploying a React + TypeScript App to AWS S3 Using CloudShell

If you’re looking for a simple, serverless way to deploy a frontend application, AWS S3 + CloudShell is a fast and efficient option. In this post, I’ll walk you through how I deployed the Ridesmart Frontend — a React app built with TypeScript — using nothing but AWS CloudShell and the AWS CLI.

📺 Watch the full deployment on YouTube:
👉 How I Deployed a React App to AWS S3 with CloudShell

🧱 Project Overview

Ridesmart Frontend is a static web application primarily written in:

• TypeScript (81%)
• SCSS
• HTML, CSS, JavaScript

It’s built with React, and outputs a production-ready static site using npm run build.

⚙️ Prerequisites

To follow along, you’ll need:

• An AWS account with S3 permissions
• A bucket created for hosting (e.g., ridesmart-frontend)
• Basic knowledge of Node.js and the AWS CLI

You don’t need to install anything locally — we’ll be using AWS CloudShell, which comes with the AWS CLI preinstalled and has access to your AWS resources.

🧩 Step 1: Clone the Repository

First, open AWS CloudShell from the AWS Console. Then clone the project:

git clone https://github.com/DevOps-Journey-Pro/ridesmart-frontend.git
cd ridesmart-frontend

📦 Step 2: Install Dependencies and Build the App

Install the required packages and build the app using npm:

npm install
npm run build

This generates a dist/ folder containing the optimized static files.

🪣 Step: Create an S3 Bucket

Before uploading your build files, you’ll need to create an S3 bucket to host the app.

You can do this via the AWS Console or using the AWS CLI in CloudShell.

✅ Using AWS Console:

1. Go to the S3 service in your AWS Console.
2. Click Create bucket.
3. Set a unique bucket name (e.g., ridesmart-frontend).
4. Choose a region.
5. Under Object Ownership, select ACLs disabled.
6. Uncheck “Block all public access” under permissions.
7. Click Create bucket.

Don’t worry — you can adjust permissions and hosting settings later.

✅ Using AWS CLI:

aws s3api create-bucket \  --bucket ridesmart-frontend \
  --region us-east-1 \
  --create-bucket-configuration LocationConstraint=us-east-1

Replace us-east-1 with your preferred AWS region.

☁️ Step 3: Upload Files to S3

Use the AWS CLI to copy the contents of the dist/ folder to your S3 bucket:

aws s3 cp dist/ s3://ridesmart-frontend --recursive

🌐 Step 4: Enable Static Website Hosting

In the S3 Console:

1. Go to the Properties tab of your bucket.
2. Scroll to Static website hosting.
3. Click Edit, then enable it.
4. Set the index document to index.html.

This tells S3 to serve the frontend as a static website.

🔓 Step 5: Make the Files Public

To allow public access to your website, you’ll need to:

1. Update the Bucket Policy

Go to the Permissions tab and paste this policy under “Bucket Policy”:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::ridesmart-frontend/*"
    }
  ]
}

2. Disable Block Public Access

Still under Permissions, click “Edit” in the Block Public Access section and uncheck:

• Block all public access

Save changes.

✅ Step 6: Access Your Website

Once hosting is enabled and permissions are set, you can access your site via the S3 endpoint:

http://ridesmart-frontend.s3-website-<region>.amazonaws.com

Replace <region> with your S3 bucket’s region.

🎯 Conclusion

Deploying a frontend app to S3 using AWS CloudShell is quick and infrastructure-free — perfect for static sites, prototypes, or admin dashboards.

For a step-by-step walkthrough, including CLI commands and console actions, check out the full video:

👉 Watch on YouTube

If you have questions or want to see this deployed behind CloudFront or with CI/CD, drop a comment or subscribe on YouTube.

For similar articles, read

🔁 How to Copy Files To S3 Using an EC2 Instance (with AWS Console + CLI)

How to deploy a static website to Azure Storage using Azure DevOps

https://medium.com/@Anita-ihuman/deploying-a-react-app-using-aws-s3-and-cloud-front-c0950808bf03