DEV Community

Cover image for Building a Modern CI/CD Pipeline for React Apps on AWS: A Step-by-Step Hands-On Guide
Patrick Odhiambo
Patrick Odhiambo

Posted on

Building a Modern CI/CD Pipeline for React Apps on AWS: A Step-by-Step Hands-On Guide

The Architecture

architecture

Introduction

Continuous Integration and Continuous Deployment (CI/CD) are core practices that enable agile development teams to deliver applications rapidly, reliably, and at scale. For modern web applications built with React, automating the build, test, and deployment process ensures faster feedback and reduces the risk of errors in production.

In this hands-on tutorial, we’ll walk through how to deploy a React application using AWS’s native CI/CD services: CodePipeline, CodeBuild, and CodeDeploy. We’ll leverage GitHub as our source repository and use other foundational AWS services like EC2, Auto Scaling, and S3 to make the entire pipeline robust, scalable, and easy to maintain.

Whether you’re just getting started with AWS CI/CD or want to see how to build an end-to-end pipeline with practical details, this guide will take you step-by-step through the process, complete with real commands, AWS console workflows, and YAML configurations.

Why AWS for CI/CD?

AWS provides a fully managed suite of developer tools that tightly integrate with other AWS services, giving you deep control over the deployment infrastructure with less operational overhead. Key benefits include:

  • Seamless integration with popular VCS providers like GitHub.
  • Managed build environments via CodeBuild with support for multiple runtimes.
  • Automated deployments with CodeDeploy that support blue/green and rolling updates.
  • Scalable compute infrastructure with EC2 and Auto Scaling.
  • Artifact storage with S3 for built assets.

With this setup, you don’t need to manage your own CI/CD servers or scripts—instead, you focus on the app and deploy process logic.

Project Setup: From React App to GitHub

We started by cloning a simple React app to our local environment:

git clone https://github.com/OjoOluwagbenga700/react-webapp-cicd-pipeline.git
cd react-webapp-cicd-pipeline

Enter fullscreen mode Exit fullscreen mode

Next, i cd’d to the project folder on my Vs Code and ran this command to remove git from the project folder

git remote remove origin
Enter fullscreen mode Exit fullscreen mode

Next, I went back to my Github and created a repo for the project and named it react-deploy
Went back to my VsCode and ran these set of commands copied from Github

echo "# react-deploy" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/patty6339/react-deploy.git
git push -u origin main

Enter fullscreen mode Exit fullscreen mode

What the command above did:

It created a README file and wrote react-deploy to it, initialized the project folder as a git
repo, added the created README file and committed it to branch main, set the destination of
the push to the repo I created on Github and pushed the files.

The Outcome

github outcome

AWS Preparation: Core Files and Roles

Two essential files must be in the root of your project:

  • appspec.yml – Instructions for AWS CodeDeploy on how to deploy the app to EC2.
  • buildspec.yml – Build settings for AWS CodeBuild to compile and package the React app.

appspec.yml

This file tells CodeDeploy how to handle application deployment lifecycle events, like where to place files and which scripts to execute at each step:

version: 0.0
os: linux
files:
  source: /app/dist
  destination: /var/www/html/
hooks:
  BeforeInstall:
    location: scripts/before_install.sh
    timeout: 300
    runas: root
  AfterInstall:
    location: scripts/after_install.sh
    timeout: 300
    runas: root
  ApplicationStart:
    location: scripts/start_application.sh
    timeout: 300
    runas: root

Enter fullscreen mode Exit fullscreen mode

buildspec.yml

This YAML defines the build phases and artifacts for CodeBuild:

version: 0.2

phases:
  install:
    runtime-versions:
      nodejs: 20
    commands:
      - cd ./app
      - npm install
  build:
    commands:
      - npm run build

artifacts:
  files:
    - 'app/dist/**/*'
    - 'appspec.yml'
    - 'scripts/**/*'
  discard-paths: no
  name: 'app.zip'

Enter fullscreen mode Exit fullscreen mode

Note: The artifacts section ensures the appropriate files, including the built React output and deployment scripts, are zipped and passed to the deployment stage.

AWS Console Setup: Roles, Launch Template, and Auto Scaling

Before creating the pipeline, we set up the supporting infrastructure:

IAM Roles

Two roles were created to grant permissions:

  • ec2codedeploy-role — assigned to EC2 instances for CodeDeploy agent permissions.
  • codedeployrole — for the CodeDeploy service with permissions to manage deployments.

Launch Template for EC2 Instances

A launch template defines EC2 instance configurations, ensuring instances launched in Auto Scaling groups have consistent settings.

We then added User Data scripts to automatically install and start the CodeDeploy agent on instance startup:

#!/bin/bash
sudo apt update -y
sudo apt install ruby-full -y
cd /home/ubuntu
wget https://aws-codedeploy-us-east-1.s3.us-east-1.amazonaws.com/latest/install
chmod +x ./install
./install auto
sudo systemctl start codedeploy-agent

Enter fullscreen mode Exit fullscreen mode

This makes sure all instances are ready for deployments once launched.

Auto Scaling Group

asg

We created an Auto Scaling group using the launch template with 2 EC2 instances initially.

To handle incoming traffic load effectively, we also provisioned an Application Load Balancer (ALB) to distribute traffic to the instances.

alb

S3 Bucket for Artifacts Storage

An S3 bucket named react-bucket6339 was created to store the build artifacts generated by CodeBuild and used by CodeDeploy for deployments.

s3

Building the Pipeline: Source, Build, and Deploy Stages

Step 1: Connect GitHub as Source

In AWS CodePipeline, we connected to the GitHub repository patty6339/react-deploy using an AWS-managed GitHub App to securely access the repo.

Github connected

Step 2: Add Build Stage with CodeBuild

CodeBuild uses our buildspec.yml to build the React app. The build logs confirmed successful installation, build, and artifact upload:

  • Node.js 20 installed.
  • Running npm install and npm run build inside the app directory.
  • Artifacts zipped into app.zip.

Step 3: Add Deploy Stage with CodeDeploy

Created a CodeDeploy application and deployment group linked to the Auto Scaling group and attached target group from the ALB.

Enabled load balancing to ensure zero downtime deployments, where traffic is blocked during deployment then allowed after success. Also checked to ensure that the codedeploy agent was successfully installed and running in the instances.

code agent

Pipeline Execution and Testing

pipeline

After setting up the pipeline, we tested it by making a minor update to the React app’s displayed message:

  • Changed the message in the feature branch.
  • Pushed changes and created a Pull Request (PR).
  • Merged to main branch.

CodePipeline automatically detected the change, pulled the latest code, built it, and deployed it to the EC2 instances behind the ALB.

Initial message

Initial message

The live app updated successfully, reachable via the Load Balancer URL, confirming that the entire CI/CD process works seamlessly.

Updated message

updated message

Key Takeaways and Best Practices

  • Modular YAML configs like buildspec.yml and appspec.yml are critical for defining build and deployment workflows.
  • User Data scripts in EC2 launch templates ensure your instances are deployment-ready with the required agents.
  • Auto Scaling + ALB integration provides a scalable, highly available infrastructure to serve your app.
  • GitHub integration through AWS managed apps simplifies secure code source management.
  • Automate testing through pipeline stages helps catch problems early and ensures the delivery pipeline is bulletproof.

Conclusion

This hands-on demo showcased building a modern AWS-hosted CI/CD pipeline for a React application using managed services like CodePipeline, CodeBuild, and CodeDeploy integrated with EC2 and Auto Scaling.

Automating the full path from code commit to live deployment allows teams to deliver features rapidly with confidence. AWS's native developer tools provide an ideal platform to build scalable pipelines removing the complexities of managing self-hosted CI/CD infrastructure.

Hopefully, this step-by-step guide gives you a clear blueprint to build your own React app deployment pipeline on AWS. Feel free to customize the build and deploy scripts to suit your app needs and scale your pipeline as your projects grow.

Happy coding and deploying with AWS!

Top comments (2)

Collapse
 
gbenga700 profile image
Gbenga Ojo-Samuel

Great Work !!!

Collapse
 
thindiu_njoro_9716ca732cb profile image
thindiu njoro

Niiice!! Very detailed.