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:

Then, click the Create pipeline button:

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

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

You will be prompted to authorize a AWS CodePipeline connection:

Afterwards, confirm the new configurations made:

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

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:

Review the configurations, then click 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:

Navigate back to the Elastic Beanstalk application:

Click this link and it will redirect you to the 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

In a couple of minutes, the website successfully updates:

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!