Automate JavaScript project versioning with commitizen and standard-version

Christian Ing Sunardi
Nov 1 · 5 min read
Photo by Martin Adams on Unsplash

It is such a hassle to manually update versions, changelogs, and create git tags. Ever wonder if there is a better way of doing this? Fear not, standard-version will do everything that is said in a single command line!! To implement the auto versioning, there are several configurations that need to be done though.


Install commitizen

  1. Install commitizen within your JavaScript project:
npm install -D commitizen

2. Setup adapter for changelog:

commitizen init cz-conventional-changelog --save-dev --save-exact

3. In package.json, add the following scripts:

"scripts": {  "commit" : "git-cz"}

To execute commitizen, we first do git add . files and then run npm run commit which will ask what kind of commits we are committing (feat, chore, fix, etc.) in the CLI, like the following:

CLI after running the command git-cz (1)

After we select the option, it will ask the details of that commit:

CLI after running the command git-cz (2)

At this point, our changes have been committed and we are ready to configure standard-version.

Install standard-version

1. Install standard-version through npm:

npm install -D standard-version

2. Setup a customised script command within package.json:

"scripts": {  "commit" : "git-cz",  "release": "standard-version"}

To use standard-version properly, we first git add . files, commit using npm run commit, and finally run the command npm run release.

CHANGELOG.md configuration specs

  • Create a new file in the root folder called .versionrc and paste the following configuration specs:
Example standard-version configuration specs
  • "type" → refers to the commit types
  • "section" → is what the corresponding commit types heading would be in the CHANGELOG.md
  • "hidden" → determines whether a commit type should appear or not in the CHANGELOG.md

Development Workflow

A summary of development workflow with standard-version involving multiple git branches

1. [feature-branch] Stage modified files using:

git add .

2. [feature-branch] Commit the files using git-cz package:

npm run commit
  • Choose the type of the commits (feat, refactor, fix, etc.).
  • Provides a short description of the commits.
  • (Optional) Provides a longer description.
  • Determine whether the commit is a BREAKING CHANGES or not (by answering ‘y’ and fill up BREAKING CHANGES descriptions in the CLI).
  • (Optional) Mentions the JIRA issue in (by answering ‘y’ and fill up the issue descriptions in the CLI).

3. [feature-branch] Now that all files have been committed, they are ready to be pushed to the remote:

git push origin <feature-branch>

4. [Bitbucket]Create a Pull Request to master branch.

5. [master] After it is merged, the following steps are done within the master branch:

  • Run the command npm run release (which will bump versions based on commit types, add commit descriptions to CHANGELOG.md, and create git tags according to the current version).
  • Push changes and git tags to master branch using :
git push --follow-tags origin master

6. Relax and enjoy 🍕


Conclusion

Facts and Common Pitfalls🤔

  • To bump major version properly (via standard-version), we first need to explicitly release a major version using the command:
standard-version -- --release-as major

Note: the double hyphen -- after standard-version is required and there is a space in between --release-as and major .

  • Then, if we release another BREAKING CHANGES commit type, it will now bump the major version properly 👍🎉.
  • By default, standard-version only records commit type feat and fix to the CHANGELOG.md. To record other commit types, create a config file called .versionrc in the root project folder.
  • Running the command npm run release when there are multiple commit types (e.g. feat - bumps minor version, and then fix - bump patch version), upon merging the commits, the version is bumped according to the following precedence:

major or BREAKING CHANGES over minor and patch

minor over patch

Example Changelogs

Example CHANGELOG.md in Bitbucket

References

Tunaiku Tech

Stories behind Tunaiku Products, Engineering and Data Team

Christian Ing Sunardi

Written by

Just a regular front-end developer.

Tunaiku Tech

Stories behind Tunaiku Products, Engineering and Data Team

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade