Deploy your React projects to AWS Elastic Beanstalk using CI/CD AWS CodePipeline (Part 1)

Introduction

AWS offers a wide range of on-demand cloud services. This can be very intimidating for beginners that are new to cloud deployment services and those unfamiliar with the AWS infrastructure. That's where AWS Elastic Beanstalk comes in. AWS Elastic Beanstalk is a service that lets you quickly deploy applications in the AWS Cloud without worrying about the underlying infrastructure that those applications run on. All you have to do is upload your application files, and AWS Elastic Beanstalk handles the rest. Simple, right? Well, what if you want to make changes to your application later on? How would these changes be deployed rapidly and efficiently? A great tool for this would be AWS CodePipeline. AWS CodePipeline automates the continuous delivery process and it also integrates with third-party services such as GitHub (where the React Repo for this project is hosted). This will allow us to set up a Continuous Integration and Continuous Delivery (CI/CD) AWS pipeline. Let's get started!

Prerequisites

You will need an active AWS account and GitHub account (or Bit Bucket). Please note that it is advised to follow security guidelines when creating an AWS account to prevent unauthorized access. For this project, it's required that you have Node.js installed in your computer.

Create the React Application

From your terminal/command line, move to the directory of your choice:

cd Desktop

Then, create a React application using the create-react-app tool:

npx create-react-app react-demo

Once the install is completed, change directory to your new application:

cd react-demo

Start your React application:

npm start

This command will start up the Node.js server and launch a new browser window displaying your app. You can use ctrl + c from the terminal/command line to stop running the React app.

Create GitHub Repo

From your browser, navigate to your GitHub account and create a new repo:

Next, follow the instructions to push an existing repository from the command line. They will look similar to this:

Create an Elastic Beanstalk application

Sign into your AWS account. On the home page, type 'elastic beanstalk' into the search bar. Select Elastic Beanstalk:

Next, click the Create Application button:

Give you application a name. I used the name react-demo-app:

Under the 'Platform' section, select the platform as Node.js. Leave everything else at their default settings and click Create Application:

An environment was automatically created for the new application since I had no other existing environments. In my case, the environment name was 'Reactdemoapp-env'. It takes a few minutes to get everything running so we can go ahead and create our pipeline in Part 2.