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.
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.
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.
We will check the node and yarn versions, and create a react app named reactcicd using yarn create react-app.
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.
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
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.
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.
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.
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
Now we will be able to access your Github repositories from our machine.
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.
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.
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.
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'.
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.
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...