Automating React App Deployment with AWS CodePipeline and Amazon S3

Overview

In the fast-paced world of front-end development, automation isn’t a luxury but a necessity. Manual deployment of React apps can be time-consuming and error-prone. In this tutorial, we’ll set up a CI/CD pipeline for a React application using AWS CodePipeline, CodeBuild, and S3, ensuring smooth, automatic deployments from GitHub to the cloud.

In this guide, you will learn how to automate the deployment of your React app using AWS services so your updates go live instantly, reliably, and at scale.

Pioneers in Cloud Consulting & Migration Services

Reduced infrastructural costs
Accelerated application deployment

Get Started

Why Use CI/CD for React with AWS CodePipeline?

React has become the go-to framework for building fast, responsive web applications. But building your app is only half the battle, and the other half is deploying and maintaining it consistently and reliably.

That’s where CI/CD (Continuous Integration / Continuous Deployment) comes in. CI/CD automates the build, test, and deployment stages of your application, so every code change pushed to your GitHub repo can be automatically deployed with no manual steps.

AWS CodePipeline is Amazon’s managed CI/CD service that allows you to automate this entire process. When combined with AWS CodeBuild and Amazon S3, it enables a smooth deployment pipeline for React apps, ensuring:

Faster release cycles
Fewer manual errors
Automatic builds and deployments from GitHub
Easy rollback or re-deployment options

Step-by-Step Guide

Step 1: Prepare Your React App

Make sure your project has a working build setup.

Check your package.json for the build script:

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build"
}

"scripts": {

"start": "react-scripts start",

"build": "react-scripts build"

}

Create a buildspec.yml file in the project root:

version: 0.2
phases: 
	install: 
		runtime-versions: 
			nodejs: 18 
		commands: - npm install 
	build: 
		commands: 
			- npm run build
artifacts: 
	files: 
	- '**/*' 
	base-directory: build

version: 0.2

phases:

install:

runtime-versions:

nodejs: 18

commands: - npm install

build:

commands:

- npm run build

artifacts:

files:

- '**/*'

base-directory: build

Step 2: Create an Amazon S3 Bucket for Hosting

Go to Amazon S3 > Create Bucket
Use a globally unique name like my-react-app-deployments
After creation:
- Enable Static website hosting in Properties
- Set:
  - Index document: html
  - Error document: html (for React routers)
- (Optional) Make it public (for dev) or use CloudFront + OAI for production
  Step 3: Set Up AWS CodeBuild
- Go to CodeBuild > Create build project
- Set:
  - Name: react-build-project
  - Source provider: GitHub → connect your repo
  - Environment image: Managed image → Ubuntu, Node.js 18
  - Buildspec: Select “Use a buildspec.yml file”
- Set Artifacts:
  - Type: Amazon S3
  - Bucket: Choose your S3 bucket
- IAM Role:
  - Let AWS create a role or attach permissions:
    - s3:PutObject
    - logs:*

Step 4: Create AWS CodePipeline Pipeline

Go to AWS CodePipeline > Create pipeline
Pipeline name: react-ci-pipeline
Choose service role: Allow AWS to create or use existing one

Stage 1: Source

Provider: GitHub
Connect GitHub account and select repo + branch

Stage 2: Build

Provider: AWS CodeBuild
Select the build project you created earlier

Stage 3: Deploy

Provider: Amazon S3
Select the bucket you created for static hosting
Leave file name empty (it deploys all artifacts)

Step 5: Push Changes and Watch the Magic

Now go to your local project and make a change:

bash
CopyEdit
git add .
git commit -m "Update UI"
git push origin main

bash

CopyEdit

git add .

git commit -m "Update UI"

git push origin main

Open AWS CodePipeline
Your pipeline should start automatically

Once it completes, visit your Amazon S3 website endpoint to see the deployed React app.

Conclusion

By setting up a CI/CD pipeline with AWS CodePipeline, AWS CodeBuild, and Amazon S3, you have taken a huge step toward modern, automated front-end development. Every time you push a change to GitHub, your React app is rebuilt and deployed without any manual intervention.

This not only speeds up your development workflow but also ensures consistency, scalability, and reliability in your deployments. Whether you’re working solo or in a team, this setup lays the foundation for rapid iteration and continuous delivery, key pillars of modern DevOps practices.

Drop a query if you have any questions regarding Amazon S3 and we will get back to you quickly.

Making IT Networks Enterprise-ready – Cloud Management Services

Accelerated cloud migration
End-to-end view of the cloud environment

Get Started

About CloudThat

CloudThat is a leading provider of Cloud Training and Consulting services with a global presence in India, the USA, Asia, Europe, and Africa. Specializing in AWS, Microsoft Azure, GCP, VMware, Databricks, and more, the company serves mid-market and enterprise clients, offering comprehensive expertise in Cloud Migration, Data Platforms, DevOps, IoT, AI/ML, and more.

FAQs

1. Should I make my Amazon S3 bucket public to host a React app?

ANS: – Not necessarily. Making the bucket public is fine for development, but for production, it’s better to use Amazon CloudFront with Origin Access Identity (OAI) or Origin Access Control (OAC). This provides secure and performant access without exposing your Amazon S3 bucket directly to the public internet.

2. Can I run tests as part of the build process?

ANS: – Yes! You can add test commands in the buildspec.yml file. For example:

yaml

CopyEdit

build:
  commands:
    - npm run test
    - npm run build

yaml

CopyEdit

build:

commands:

- npm run test

- npm run build

This ensures tests run before the build proceeds, failing the pipeline if any tests fail.

WRITTEN BY Shreya Shah

Comments

Click to Comment