Deploy your React projects to AWS Elastic Beanstalk using CI/CD AWS CodePipeline (Part 1)
Tags: devops, aws, react, tutorial
Published: 2022-01-19 13:10:54

## 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](https://aws.amazon.com) and GitHub account (or Bit Bucket). Please note that it is advised to follow [security guidelines](https://docs.aws.amazon.com/IAM/latest/UserGuide/best-practices.html) when creating an AWS account to prevent unauthorized access. For this project, it's required that you have [Node.js](https://nodejs.org/en) installed in your computer.

### Create the React Application
From your terminal/command line, move to the directory of your choice:

```bash
cd Desktop
```

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

```bash
npx create-react-app react-demo
```

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

```bash
cd react-demo
```

Start your React application:

```bash
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:

![Create GitHub Repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d2jb6vf9lzvbxbts40sj.png)

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

![GitHub Command Line Instructions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/023hr0l36rtycpf62a4y.png)

### Create an Elastic Beanstalk application
Sign into your [AWS account](https://aws.amazon.com). On the home page, type 'elastic beanstalk' into the search bar. Select Elastic Beanstalk:

![Search for Elastic Beanstalk](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y3bhbl5xxmu4wajygrhl.png)

Next, click the `Create Application` button:

![Click Create Application](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l501muil7x6dhlwesfaq.png)

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

![Name your Elastic Beanstalk Application](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jj2dz7xowf9pv8aupjs6.png)

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

![Click Create Application](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qltipvrmlcbmckv5swv8.png)

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](https://dev.to/ogambakerubo/deploy-your-react-projects-to-aws-elastic-beanstalk-using-cicd-aws-codepipeline-part-2-3mch).