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 pipeline automates your software delivery process. The pipeline builds code, runs tests ( ), and deploys a new version of your application ( ) to the test or production environment. CI/CD CI CD How it works? Let's assume that you have received the task of implementing some functionality. You split off from the main branch (mainly or ) depending on the project, and then contribute your code, after you have completed writing for now, you make a (there will be a abbreviation later in the article) and submit it for . Let's assume that your passed all the manual tests and got approved and can now be merged into the master. But there is one thing - ‘but‘ during the , we can only guarantee the quality of the code, and we can’t guarantee that the changes will not break your application. main master Pull Request PR Code Review PR Code Review 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 is created, and that the developer who will conduct the would see if that passed the tests or not. And so that we can't merge our code into if the code doesn't pass all the checks. PR Code Review PR master We will see all the steps of the CI CD later in the article. Note: 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 to initialize package.json and then run npm init npm install express eslint prettier jest netlify-lambda serverless-http create Step 1: 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) keep in mind that - /api stands for your application's entry point. In our case, this is the file Note: /.netlify/functions/api api.js create Step 2: helper/sum.js function sum(a, b) {
  return Number(a) + Number(b)
}

module.exports = sum create Step 3: 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)
}) create file in the root of your project Step 4: netlify.toml [build]
  functions = "functions"

[dev]
  publish = "dist" we need this for . We'll talk about it in Note: Netlify Step 17 create an empty file Step 5: dist/index.html create scripts commands in the Step 6: 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"
  }
} run the project you should see in your terminal Step 7: npm start 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 after we init the project you have to create a new repository and push your project on Step 8: 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 create .yml config for the Step 9: GitHub Actions create a folder in the root of your project Step 10: .github create a folder in the .github folder Step 11: workflows add file Step 12: github-actions-demo.yml 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 }}." *.yml file can have any name Note: create a new commit and push it on the GitHub Step 13: Open Actions tab Step 14: your job name will be your latest commit Note: click on this job, you should see how your job starts Step 15: after your job is competed, you should see success status Step 16: this is a very basic configuration, if you want to add some complex behaviour you can take a look at the official Note: GitHub Actions documentation automatically deploys all code changes to a testing and/or production environment. At the current stage, we have dealt with CI and now we’ll set up CD. Continuous delivery is as an example of hosting, I chose Note: Netlify create a new account on , if you don’t have one Step 17: Netlify connect Netlify’s account to the GitHub repository. Step 18: Here is Netlify’s tutorial choose branch to deploy and click button Step 19: Customize build settings after you click you should see additional settings. Add to the and to the Step 20: Customize build settings npm run build Build command row dist Publish directory click button Step 21: Deploy site wait while your site is deployed Step 22: after your site is deployed, you should see a link to your application Step 23: copy this link, open a new browser tab, paste this link into browser url and add /.netlify/functions/api/test to your link Step 24: https://your app link.netlify.app/.netlify/functions/api/test Example: And finally your should see in the browser test /sum route, you should see RESULT: 5 Step 25: https://your app link.netlify.app/.netlify/functions/api/sum?a=2&b=2 Example: 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 . See you Conclusion: link P.S. Thanks for reading! More articles coming soon!

Keep

Mind

Is Lodash That Good? Performance Comparison of JavaScript and Lodash

Get It Done

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

Nominated for 2022 - HackerNoon Contributor of the Year - Cicd

Nominated for 2022 - HackerNoon Contributor of the Year - Performance

Nominated for 2022 - HackerNoon Contributor of the Year - Debugging

Nominated for 2022 - No No No Nodejs

Too Long; Didn't Read

CI CD Pipeline: How to Setup a CI CD Pipeline From Scratch with GitHub Actions.

CI CD Pipeline: How to Setup a CI CD Pipeline From Scratch with GitHub Actions.

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

How to Create and Publish Your First Private NPM Package

104 Stories To Learn About Continuous Integration

139 Stories To Learn About Cicd

15 of the Best Continuous Delivery Tools

5 Best Microservices CI/CD Tools You Need to Check Out

53 Stories To Learn About Continuous Deployment

How to Create and Publish Your First Private NPM Package

104 Stories To Learn About Continuous Integration

139 Stories To Learn About Cicd

15 of the Best Continuous Delivery Tools

5 Best Microservices CI/CD Tools You Need to Check Out

53 Stories To Learn About Continuous Deployment

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps