Git pre-commits hooks and Continous Integration / Continous Deployment.

In today’s article I am going to discuss and hopefully give an idea about the importance of pre-commit hooks especially if you work in an environment where a pipeline is used for Continous Integration a project.

Okay first of all, what are pre-commit hooks?

If you are reading this article then I assume that you have a clear understanding of a version control system like GitHub or GitLab and you know that a commit is used to save the updates done to your code to the local repository. Pre-commit hooks are some pre-defined scripts that start to run when we run the command.

git commit -m “you commit message”

There are many git hooks other than pre-commit hooks. Since this article is about pre-commit hooks they will not be included here, but if you are interested please do check out this link.

What scripts can be run with pre-commit hooks?

We can run scripts like linting scripts, tests or even prettier for formatting all your code before committing your program. Why this is so great is, every commit you make will be as clean as possible although it can be quite painful for the junior developers since they won’t be able to code however they want and commit their programs. But this will ultimately save your time when the pipeline starts to run for CI/CD. Because you won’t have to wait for 5 to 10 minutes to get an error because there are some unused imports or one of the unit tests failed unexpectedly.

As a demonstration for this article, I am going to use all of the above-mentioned scripts with an existing angular project. And I will be using husky as the plugin to run these scripts. Husky is basically a plugin that lets you add pre-commit and pre-push hooks easily to your project.

Okay, first let’s add the dev dependencies.

npm install husky --save-dev
npm install prettier --save-dev

Installing prettier alone won’t be sufficient because as we know prettier’s default rule has some conflicts with tslint. Therefore we need tslint-prettier-config. So as usual do,

npm install tslint-config-prettier --save-dev

Now You have to update the tslint.json file and extend it to “tslint-config-prettier”

"extends": ["tslint:recommended", "tslint-config-prettier"],

Then add .prettierrc in the root with these configurations.

{
  "bracketSpacing": true,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 80
}

Now we should add the following script to the package.json.

"prettier": "prettier --write src/**/*.{ts,js,css,html}"

NOTE: If you are using pretty-quick to run prettier above script is not necessary checkout prettier precommit hooks docs.

Finally, add husky pre-commit and pre-push git hooks to the package.json file.

"husky": {
  "hooks": {
    "pre-commit": "npm run prettier --staged && ng lint && npm test",
    "pre-push": "ng build --aot true"
  }
}

So with the above script when we run git commit command it will run prettier on all the available files and format them. Then run lint and see if there are any linting violations finally it will run all the tests ( spec ) files and see if there are any test fails. If all the above conditions become true then it will let you commit.

In the pre-push hook, we have added ng build with aot to create an “ahead of time build”. If you prefer to create a production build, use “prod” instead of aot. See angular documentation to get the different types of builds and what they mean.

Since you are here, I hope you enjoyed the article. By the way, if you want to hire a quality freelancer for any types of assistance with web development just let me know.

Fiverr: https://www.fiverr.com/share/Wk1E0R

email: charith.r@icloud.com