DEV Community

Ogamba K
Ogamba K

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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

npx create-react-app react-demo
Enter fullscreen mode Exit fullscreen mode

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

cd react-demo
Enter fullscreen mode Exit fullscreen mode

Start your React application:

npm start
Enter fullscreen mode Exit fullscreen mode

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

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

GitHub Command Line Instructions

Create an Elastic Beanstalk application

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

Search for Elastic Beanstalk

Next, click the Create Application button:

Click Create Application

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

Name your Elastic Beanstalk Application

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

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.

Discussion (0)