Deploy your React projects to AWS Elastic Beanstalk using CI/CD AWS CodePipeline (Part 2)
Tags: devops, aws, react, tutorial
Published: 2022-01-19 17:46:15

## Introduction
In [Part 1](https://dev.to/ogambakerubo/deploy-your-react-projects-to-aws-elastic-beanstalk-using-cicd-aws-codepipeline-part-1-1nne), 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/40xy1x7evqfanp2cx9mr.png)

Then, click the `Create pipeline` button:

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

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

![Type in Pipeline Name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j77kkb01zuob3c9v9zms.png)

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

![Connect to GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5rtn0lmkf77s1d9ht4tw.png)

You will be prompted to authorize a AWS CodePipeline connection:

![Authorize AWS CodePipeline](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6f91gavzurcor1d7i3x5.png)

Afterwards, confirm the new configurations made:

![Confirm Changes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qt7v7mw1jfg8encednxn.png)

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

![Select Repo and Branch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w0ij91wlzmn3het3lmso.png)

Skip the build stage:

![Skip the Build Stage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s812m72kqpp8sxqtklan.png)

![Skip the Build Stage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gush9stpwvsjkvhk0qoa.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0b3y4e57m7akus1mo2de.png)

Review the configurations, then click `Create pipeline`:

![Review and Create pipeline](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/azi2ukkw59nfnk9w0fbr.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nfrpzzckkq207v8w81rf.png)

Navigate back to the Elastic Beanstalk application:

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

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

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

![Deployed React Application](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ya6yug0v960l68ndliy6.png)

![Deployed React Application](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fp708vedafwvqylw1n7g.png)

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:

```bash
git add .
git commit -m "Update React application"
git push -u origin main
```
In a couple of minutes, the website successfully updates:

![React Application Updated](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ovzchhcua95vc0fdvc26.png)

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!