DEV Community

Ogamba K
Ogamba K

Posted on

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

Introduction

In Part 1, we created a React application and uploaded it to a GitHub Repo. We also created an Elastic Beanstalk application. Now, we will pick up where we left off and create a continuous integration/continuous deployment pipeline using CodePipeline.

Create a pipeline

Type 'codepipeline' into the search bar. Select CodePipeline:

Search for Elastic Beanstalk

Then, click the Create pipeline button:

Click Create pipeline

Type in a name for your pipeline. Leave everything else as it is, then click next:

Type in Pipeline Name

Next, we will select the code source. Choose 'GitHub (Version 1)' for this tutorial. Click the Connect to GitHub button:

Connect to GitHub

You will be prompted to authorize a AWS CodePipeline connection:

Authorize AWS CodePipeline

Afterwards, confirm the new configurations made:

Confirm Changes

Choose the react-demo repo and the branch main from the drop-down menus. Then click 'Next':

Select Repo and Branch

Skip the build stage:

Skip the Build Stage

Skip the Build Stage

In the deployment stage, select the deploy provider as Elastic Beanstalk. Select the region where you launched the Elastic Beanstalk application. Choose the appropriate application name and environment:

Deployment Stage

Review the configurations, then click Create pipeline:

Review and Create pipeline

It will take a couple of minutes for your pipeline to finish setting up and deploy your application. You should see a success message once it's complete:

Pipeline Successfully Created

Navigate back to the Elastic Beanstalk application:

Elastic Beanstalk Application

Elastic Beanstalk Application

Click this link and it will redirect you to the deployed React application:

Deployed React Application

Deployed React Application

Now, we'll make a small change to the application and we'll see the changes reflected on the website. Make a change to your local repo and push it to the GitHub repo:

git add .
git commit -m "Update React application"
git push -u origin main
Enter fullscreen mode Exit fullscreen mode

In a couple of minutes, the website successfully updates:

React Application Updated

Congrats, you have successfully setup an automated continuous deployment and continuous integration pipeline. You can continue to make changes to your application and watch them get rolled out in near real-time.

Happy Coding!

Discussion (0)