Deploying a React App Using AWS Amplify and GitHub — A Beginner’s Guide

Introduction

As someone exploring web development and cloud technologies, I wanted to try out deploying a React app using AWS Amplify. This article walks through how I created a test project using React.js, pushed it to GitHub, and deployed it seamlessly to the cloud with AWS Amplify Hosting.

Even though this was a test project, it taught me some really valuable concepts about cloud deployment, CI/CD, and using Amplify effectively. If you’re a beginner like me, I hope this guide helps you get started too!

Tools & Technologies Used 🛠

React.js (create-react-app)

AWS Amplify Hosting

GitHub (for source control)

AWS Console

CI/CD pipeline via Amplify + GitHub integration️

Step-by-Step Process

Creating the React App

To begin, I used the following command to bootstrap a basic React app:

npx create-react-app my-test-app
cd my-test-app
npm start

This gave me a simple front-end template to start with.

Pushing to GitHub

After setting up the project locally, I initialized a Git repo and pushed it to GitHub:

git init 
git remote add origin https://github.com/username/my-test-app.git 
git add . 
git commit -m "Initial commit" 
git push -u origin main

Setting Up AWS Amplify

• Logged into the AWS Amplify Console.
• Clicked “Host a Web App” and selected GitHub as the repository source.
• Authorized Amplify to access my GitHub repo.
• Selected my repository and branch.
• Reviewed and confirmed the build settings.

Amplify automatically detected that it was a React app and generated a default amplify.yml.

Automatic Deployment with CI/CD

Once set up, AWS Amplify handled everything:

• Installed dependencies
• Built the React app
• Deployed it to a secure URL
• Set up a live CI/CD pipeline

Now, whenever I push changes to GitHub, the site updates automatically.

Screenshots

Creating react frontend project

AWS amplify environment setup

AWS amplify setup with github method

AWS amplify review step

Summary from amplify

I done repetitive deploying due to code error.

It show 3 steps,

1. Deployed
2. Still deploying
3. Deploy pending.

Deploying Moment

Final Output

📂 GitHub Repo: https://github.com/dtdrupasinghe/notesapp.git

🎯 What I Learned

• How cloud hosting works with AWS Amplify
• CI/CD integration using GitHub
• The simplicity of serverless deployments
• Managing app changes through Git push

This test project was a great way to get comfortable with modern deployment workflows. I’m excited to build more full-stack apps and continue my cloud journey.

📘 Final Thoughts

If you’re new to cloud deployment and want something beginner-friendly, AWS Amplify is a great place to start. It’s fast, scalable, and integrates beautifully with GitHub.

Thanks for reading! If you have any questions or suggestions, feel free to drop a comment below or connect with me on LinkedIn.

#AWS #AWSAmplify #ReactJS #GitHub #CI_CD #CloudDeployment #FrontendDev #WebDevelopment #BeginnerGuide #FullStackJourney