In software engineering, CI/CD or CICD is the combined practices of continuous integration and continuous delivery or continuous deployment. CI/CD bridges the gaps between development and operation activities and teams by enforcing automation in building, testing and deployment of applications.
What is CI CD Pipeline?
A CI/CD pipeline automates your software delivery process. The pipeline builds code, runs tests (CI), and deploys a new version of your application (CD) to the test or production environment.
How it works?
Let's assume that you have received the task of implementing some functionality. You split off from the main branch (mainly main or master) depending on the project, and then contribute your code, after you have completed writing for now, you make a Pull Request (there will be a abbreviation PR later in the article) and submit it for Code Review. Let's assume that your PR passed all the manual tests and got approved and can now be merged into the master. But there is one thing - ‘but‘ during the Code Review, we can only guarantee the quality of the code, and we can’t guarantee that the changes will not break your application.
How can we ensure that changes don’t break the application?
Options:
- Build the application;
- Run tests (run test);
- Check code quality (eslint | prettier | type check);
As you can see, there are quite a few actions here, and it is very easy to forget or miss a step. And if this happens, then new changes can break your application. Especially on projects where there are a lot of checks. And, of course, it would be better to automate this process.
When should CI CD be run?
I think a good option would be to have the checks run when the PR is created, and that the developer who will conduct the Code Review would see if that PR passed the tests or not. And so that we can't merge our code into master if the code doesn't pass all the checks.
Note: We will see all the steps of the CI CD later in the article.
This has been a brief description of CI CD and now let’s set up our CI CD process.
The first thing to do is to initialize the project. Create an empty folder, then run npm init to initialize package.json and then run npm install express eslint prettier jest netlify-lambda serverless-http
Step 1: create src/api.js
const express = require('express')
const serverless = require('serverless-http')
const sum = require('../helper/sum')
const app = express()
const router = express.Router()
router.get('/test', (req, res) => {
res.send('Hello World')
})
router.use(express.static('dist'))
router.get('/sum', (req, res) => {
const { a, b } = req.query
res.send(`RESULT: ${sum(a, b)}`)
})
app.use(`/.netlify/functions/api`, router)
module.exports = app
module.exports.handler = serverless(app)
Note: keep in mind that /.netlify/functions/api - /api stands for your application's entry point. In our case, this is the api.js file
Step 2: create helper/sum.js
function sum(a, b) {
return Number(a) + Number(b)
}
module.exports = sum
Step 3: create test/sum.test.js
const sum = require('../helper/sum')
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3)
})
test('adds 2 + 2 to equal 4', () => {
expect(sum(2, 2)).toBe(4)
})
test('adds 1 + 1 to equal 2', () => {
expect(sum(1, 1)).toBe(2)
})
Step 4: create netlify.toml file in the root of your project
[build]
functions = "functions"
[dev]
publish = "dist"
Note: we need this for Netlify. We'll talk about it in Step 17
Step 5: create an empty dist/index.html file
Step 6: create scripts commands in the package.json
{
"name": "cicd",
"version": "1.0.0",
"description": "CI/CD example",
"main": "src/api.js",
"scripts": {
"lint": "./node_modules/.bin/eslint . --ext .js",
"lint:fix": "./node_modules/.bin/eslint --fix . --ext .js",
"prettier": "./node_modules/.bin/prettier --check .",
"prettier:fix": "./node_modules/.bin/prettier --write .",
"test": "./node_modules/.bin/jest",
"start": "NODE_ENV=development ./node_modules/.bin/netlify-lambda serve src",
"build": "NODE_ENV=production ./node_modules/.bin/netlify-lambda build src"
},
"dependencies": {
"express": "4.18.1",
"prettier": "2.6.2",
"eslint": "8.17.0",
"jest": "28.1.1",
"netlify-lambda": "2.0.15",
"serverless-http": "3.0.1"
}
}
Step 7: run the project npm start you should see in your terminal
Lambda server is listening on 9000
Project structure
your project/
--package.json
--.eslintrc
--netlify.toml
--.prettierrc
--jest.config.js
--test/
--sum.test.js
--helper/
--sum.js
--dist/
--index.html
--src/
--api.js
Step 8: after we init the project you have to create a new repository and push your project on GitHub
If you are not familiar with creating a GitHub repository, you can follow the GitHub tutorial
After you’ve pushed your project on GitHub you can see it on the GitHub
Step 9: create .yml config for the GitHub Actions
Step 10: create a .github folder in the root of your project
Step 11: create a workflows folder in the .github folder
Step 12: add github-actions-demo.yml file
name: CI/CD configure tutorial
on: [push]
jobs:
Explore-GitHub-Actions:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [16.x]
steps:
- name: Check out repository code
uses: actions/checkout@v3
- name: installing node_modules
run: npm install
- name: building project
run: npm run build
- name: running prettier
run: npm run prettier
- name: running eslint
run: npm run lint
- name: running tests
run: npm run test
- run: echo "This job's status is ${{ job.status }}."
Note: *.yml file can have any name
Step 13: create a new commit and push it on the GitHub
Step 14: Open Actions tab
Note: your job name will be your latest commit
Step 15: click on this job, you should see how your job starts
Step 16: after your job is competed, you should see success status
Note: this is a very basic configuration, if you want to add some complex behaviour you can take a look at the official GitHub Actions documentation
At the current stage, we have dealt with CI and now we’ll set up CD. Continuous delivery is automatically deploys all code changes to a testing and/or production environment.
Note: as an example of hosting, I chose Netlify
Step 17: create a new account on Netlify, if you don’t have one
Step 18: connect Netlify’s account to the GitHub repository. Here is Netlify’s tutorial
Step 19: choose branch to deploy and click Customize build settings button
Step 20: after you click Customize build settings you should see additional settings. Add npm run build to the Build command row and dist to the Publish directory
Step 21: click Deploy site button
Step 22: wait while your site is deployed
Step 23: after your site is deployed, you should see a link to your application
Step 24: copy this link, open a new browser tab, paste this link into browser url and add /.netlify/functions/api/test to your link
Example: https://your app link.netlify.app/.netlify/functions/api/test
And finally your should see in the browser
Step 25: test /sum route, you should see RESULT: 5
Example: https://your app link.netlify.app/.netlify/functions/api/sum?a=2&b=2
Conclusion: As you can see CI CD is a very powerful and at the same time easily customizable tool. You can find my code sample by following this link. See you
P.S. Thanks for reading! More articles coming soon!