COMP0016 Team 15

CI stands for Continuous Integration and CD stands for Continuous deployment which are common practices in modern-day DevOps. The pipeline automates the steps of building, testing and deployment whenenever incremental code changes were made, and the goal is to increases productivity of software developemnt.

GitHub Actions is a DevOps tool that is embedded into GitHub which we used to create our CI/CD pipeline. Although there are other choices out there such as Jenkins which is also a very popular tool, but GitHub Actions is much simpler and is powerful enough to fit our needs as you would see later on...

To create a CI/CD pipeline on GitHub Actions, you would need to create a yml file.

Jokes aside, the image below is what a typical yml file would look like:

The common structure is first specify on what kind of action would the pipeline be ran, here I have specified that whenenever I push my commits to the branch master, run the pipeline.

Then you need to specify the jobs that would be involved , the important code here to note are the ones under steps, which first instals the dependencies that I have specified in the package.json file in my project folder, it then builds a production build of my project (the building stage), and uses npm test to run unit tests that I have written using React's own testing library (testing)

You may be wondering where's the deployment stage, we decided to use Netlify as our deployment platform, which monitors the project repository and deploys the application on updates. Note that we are only using Netlify for experimental purposes, and we plan on deploying using NGINX at a later stage.

Other than unit tests, we have also managed to make some simple end to end tests using Cypress.io, which is an amazing tool to use for E2E tests. As the main focus here is CI/CD pipeline, I'll talk more about this wonderful tool in a separate post.

The image below shows the yml file that I have written for running the pipeline but with the testing phase running cypress E2E tests, I've used npm run dev here which is a script that I have defined to concurrently do npm start as well as startup the backend Express server that I am developing with, which is required to do any E2E tests.

Looks pretty similar to the previous one right? And now that you have seen what it is like to do CI/CD with GitHub Actions (and Netlify), they really do make the overall developemnt workflow much more efficient after these simple set-ups.