Introduction to setting up a CI / CD Pipeline for React Apps
Tags: devops, react, aws, cicd
Published: 2020-07-07 11:43:05

---
series: Setup a CI/CD pipeline for React App
---
The goal of this tutorial is to give an introduction to setting up a CI/CD pipeline for react apps. This tutorial is geared towards beginners and assumes no previous experience in CI/CD. The CI/CD pipeline is one of the best practices for DevOps teams to implement, for delivering code changes more frequently and reliably.

##What is Continous Integration / Continuous Deployment?
**Continuous integration** is the process of pushing code changes regularly to the source code management repository, which is followed by a set of activities like static code analysis for checking code quality, building the application, perform tests against test cases, ensuring every code push is as per the requirement and follows the industry standard. In case of any failures, the team will be informed immediately. A developer’s job typically ends at reviewing a pull request from a teammate and merging it to the master branch. A CI/CD service takes over from there by running all tests and deploying the code to production, while keeping the team informed about outcome of every important event. This will allow us to fix the issue in the early phases of our development. 

**Continuous deployment** is the automated process of deploying the builds from CI process, directly to the production environment.

**The below image depicts the architecture of the ci/cd pipeline service we are going to set up.**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mlf3akidole08hlw6lxj.jpg)

We are going to use git for source code management. From the local repository, we will push the code to Github. Circle CI will be our CI/CD tool. We will use AWS S3 buckets for storing the react application build and AWS CloudFront, which is a CDN(content delivery network) for delivering the content. 

We will start the process by creating a react app.

##1> create a new react app
We will check the node and yarn versions, and create a react app named reactcicd using yarn create react-app.
```powershell
PS C:\react> node -v
v12.13.0
PS C:\react> yarn -v
1.22.4
PS C:\react> yarn create react-app reactcicd
yarn create v1.22.4
[1/4] Resolving packages...
[2/4] Fetching packages...
```
Once react app is created, check the directory structure.

```powershell
PS C:\react> cd reactcicd
PS C:\react\reactcicd> ls
    Directory: C:\react\reactcicd
Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----         7/7/2020   1:42 PM                node_modules
d-----         7/7/2020   1:41 PM                public
d-----         7/7/2020   1:41 PM                src
-a----        6/29/2020   9:58 PM            310 .gitignore
-a----         7/7/2020   1:42 PM            745 package.json
-a----         7/7/2020   1:41 PM           2884 README.md
-a----         7/7/2020   1:42 PM         473034 yarn.lock
```


##2> Create SSH keys to connect to GitHub account
ssh keys provide a secure way to establish communication between our machine and the GitHub server. Watch the below video, if you want to understand how ssh key works.
{% youtube y2SWzw9D4RA %}

Create an ssh key in the system using ssh-keygen command. In windows, use PowerShell to run this command. In mac / Linux, we can run in the terminal.
```powershell
PS C:\react\reactcicd> ssh-keygen
Generating public/private rsa key pair.
Enter file in which to save the key (C:\Users\preeth\.ssh\id_rsa):
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
```
Once the keys are created, we can verify it in the .ssh directory of the user. id_rsa is the private key and id_rsa.pub is the public key.
```powershell
PS C:\react\reactcicd> ls C:\Users\1022786\.ssh
    Directory: C:\Users\1022786\.ssh
Mode                LastWriteTime         Length Name
----                -------------         ------ ----
-a----         7/7/2020   7:58 AM           1692 awsKey.pem
-a----         6/4/2020   9:44 AM           2610 id_rsa
-a----         6/4/2020   9:44 AM            576 id_rsa.pub
-a----         7/7/2020   8:12 AM            587 known_hosts
```


##3> Add the public key in Github
Login to the GitHub account and click on the profile icon in the top right corner and select the settings
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gywcsm63znhes4quoh4x.PNG)

Click SSH and GPG keys and click New SSH key
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8sw8c88qkkzvw9tsst32.PNG)

open the previously created public key (id_rsa.pub) in a text editor and copy the public key. Paste the ssh key on the page and click Add SSH Key.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/o2m1cd1v9v1tfgtvr68n.PNG)

Now we will be able to access your Github repositories from our machine.

##4> Create a new repository in Github
Give the repository a name, description(optional), choose private or public repository, and create a repository.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7zidjeuqf0h30fwlifb1.PNG)

Once the repository is created, copy the GitHub URL.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/q6szeqqnh44uydrwara0.PNG)

Now come back to the terminal and change to the folder where react app is created.
Initiate the git, add all the files to staging and perform the first commit.
```powershell
PS C:\react\reactcicd> git init
Reinitialized existing Git repository in C:/react/reactcicd/.git/
PS C:\react\reactcicd> git add .
PS C:\react\reactcicd> git commit -m "initial commit"
On branch master
nothing to commit, working tree clean
```
Using the previously copied URL, add the remote repository.
```powershell
PS C:\react\reactcicd> git remote add origin https://github.com/preethamsathyamurthy/reactCICD.git
```
Now push the code from local repository to the remote repository.
```powershell
PS C:\react\reactcicd> git push -u origin master
Enumerating objects: 22, done.
Counting objects: 100% (22/22), done.
Delta compression using up to 12 threads
Compressing objects: 100% (22/22), done.
Writing objects: 100% (22/22), 201.01 KiB | 6.93 MiB/s, done.
Total 22 (delta 0), reused 0 (delta 0), pack-reused 0
To https://github.com/preethamsathyamurthy/reactCICD.git
 * [new branch]      master -> master
Branch 'master' set up to track remote branch 'master' from 'origin'.
```
Now we can see that the code is pushed from local to our GitHub repository.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wncpi6hkfyc4u3ostyix.PNG)

```powershell
PS C:\react\reactcicd> git branch
* master
```
when we check our git branches, we can see that we only have the master branch.

So by default, we have the master branch. 

So while writing this tutorial, I thought that branching and branching strategies can be explained in a separate post and wrote it.
{% link https://dev.to/preethamsathyamurthy/git-branching-and-branching-strategy-4mci %}

By now, we will be having an understanding of the branching and branching strategy. We will follow the same branching strategy for this tutorial

Stay tuned!!! To be continued...