Back

Automatic release using gitmoji

DRAFT • ––– views
DevOps
GitOps

In today’s article, we will look into auto generating changelogs, commits conventions and automation in all of this.

TLDR; Using Gitmoji, and Semantic Release we are generating version number and a full changelog.

This is a test

And another test

#
But first, a note on semantic versioning

Semantic Versioning (also called semver) is a conventions that is widely used in software development to describe a version of a software or library. It consists of three main blocks : MAJOR.MINOR.PATCH, for example, 2.24.1 is a correct version, but what does the blocks means ?

Patch is for bug fixes and doesn’t introduce new features.

Minor is for new feature that are backward compatible.

Major is for breaking changes.

But what is a breaking change ? Here are some examples for a software

  • One config key was removed
  • The config format changed
  • A feature was removed
  • A runtime dependency upgrade (for example a newer Nodejs version, or a new major version of Docker)
  • The database format changed, and it’s not compatible with last version

And some for libraries :

  • The public API changed in a breaking way (removing a function or a key, or uses a new format)
  • A peer dependency was upgraded to a major version (React 17 => 18 for example)
  • A removal of a feature

Basically, everything that is not compatible with the previous version.

What does it mean for a consumer of a library / app that adhere to semantic versioning ?
You should be able to update from 2.0.0 to 2.192.43 without any issue since there is no breaking change.

The only catch is, it’s dependent on the maintainer to choose the correct version on the update.

But what if it could be automated ?

#
Introducing semantic-release

Semantic Release

Todo !!

#
What is gitmoji ?

Gitmoji is a commit convention that use an emoji as a prefix. One of the nice things about gitmoji is the fine grain scope it provides (eg, 💄 for styling updates).

Here is a subset of the most common gitmoji meanings :

💥 - :boom: - Introduce breaking changes.
✨ - :sparkles: - Introduce new features.
🔧 - :wrench: - Add or update configuration files.
⚡️ - :zap: - Improve performance.
🔥 - :fire: - Remove code or files.
🐛 - :bug: - Fix a bug.
🚑 - :ambulance: - Critical hotfix.
🔖 - :bookmark: - Release / Version tags.
💥 - :boom: - Introduce breaking changes.
✨ - :sparkles: - Introduce new features.
🔧 - :wrench: - Add or update configuration files.
⚡️ - :zap: - Improve performance.
🔥 - :fire: - Remove code or files.
🐛 - :bug: - Fix a bug.
🚑 - :ambulance: - Critical hotfix.
🔖 - :bookmark: - Release / Version tags.

It’s recommended to use the :zap: way of writing the emoji because it’s not a direct emoji, but will be shown as one on many website (including GitHub), while not causing issue with encoding the emoji itself.

TODO add more

#
How does it tie together ?

Todo !!

#
What can it also do ?

Todo !!

Release NPM Commit the changelog generate a changelog.md file

#
Let’s recap

Todo !!

Pro
  • Makes a good enouth changelog out of the box
  • Automate the version bump automatically
  • Remove the thought process of getting right the next semver bump
  • Automate and normalize the release process
  • Will inform every pull request when it's released (see example (TODO))
Con
  • If there is external contributors, their either have to follow the commit convention, or squash the PR with a commit that follow the convention
  • It's not a perfect changelog, it gets 90% good, but you will need to add more context

#
What is Gitmoji?

#
What is Gitmoji?

Hey !

#
What is Gitmoji?

#
What is Gitmoji?

Some example of gitmoji :

💥 - :boom: - Introduce breaking changes.
✨ - :sparkles: - Introduce new features.
🔧 - :wrench: - Add or update configuration files.
⚡️ - :zap: - Improve performance.
🔥 - :fire: - Remove code or files.
🐛 - :bug: - Fix a bug.
🚑 - :ambulance: - Critical hotfix.
🔖 - :bookmark: - Release / Version tags.
💥 - :boom: - Introduce breaking changes.
✨ - :sparkles: - Introduce new features.
🔧 - :wrench: - Add or update configuration files.
⚡️ - :zap: - Improve performance.
🔥 - :fire: - Remove code or files.
🐛 - :bug: - Fix a bug.
🚑 - :ambulance: - Critical hotfix.
🔖 - :bookmark: - Release / Version tags.

Hello world world ?

.releaserc.js
const { readFileSync } = require('fs');
const path = require('path');
 
const releaseTemplate = readFileSync(
  path.join('.', '.github', 'release-template.hbs'),
);
 
module.exports = {
  plugins: [
    [
      'semantic-release-gitmoji',
      {
        releaseRules: {
          major: [':boom:'],
          minor: [':sparkles:'],
          patch: [
            ':bug:',
            ':ambulance:',
            ':lipstick:',
            ':lock:',
            ':zap:',
            ':chart_with_upwards_trend:',
            ':globe_with_meridians:',
            ':alien:',
            ':wheelchair:',
            ':mag:',
            ':children_crossing:',
            ':speech_balloon:',
            ':iphone:',
            ':pencil2:',
            ':bento:',
          ],
        },
        releaseNotes: {
          template: releaseTemplate,
        },
      },
    ],
  ],
};
.releaserc.js
const { readFileSync } = require('fs');
const path = require('path');
 
const releaseTemplate = readFileSync(
  path.join('.', '.github', 'release-template.hbs'),
);
 
module.exports = {
  plugins: [
    [
      'semantic-release-gitmoji',
      {
        releaseRules: {
          major: [':boom:'],
          minor: [':sparkles:'],
          patch: [
            ':bug:',
            ':ambulance:',
            ':lipstick:',
            ':lock:',
            ':zap:',
            ':chart_with_upwards_trend:',
            ':globe_with_meridians:',
            ':alien:',
            ':wheelchair:',
            ':mag:',
            ':children_crossing:',
            ':speech_balloon:',
            ':iphone:',
            ':pencil2:',
            ':bento:',
          ],
        },
        releaseNotes: {
          template: releaseTemplate,
        },
      },
    ],
  ],
};
const [age, setAge] = useState(50);
const [name, setName] = useState('Taylor');
const [age, setAge] = useState(50);
const [name, setName] = useState('Taylor');
some.js
const { readFileSync } = require('fs');
const path = require('path');
some.js
const { readFileSync } = require('fs');
const path = require('path');
{{#if compareUrl}}
# [v{{nextRelease.version}}]({{compareUrl}}) ({{datetime "UTC:yyyy-mm-dd"}})
{{else}}
# v{{nextRelease.version}} ({{datetime "UTC:yyyy-mm-dd"}})
{{/if}}
 
{{#with commits}}
{{#if sparkles}}
## ✨ New Features
 
{{#each sparkles}}
- {{> commitTemplate}}
{{/each}}
{{/if}}
 
{{#if bug}}
## 🐛 Bug Fixes
 
{{#each bug}}
- {{> commitTemplate}}
{{/each}}
{{/if}}
 
{{#if lipstick}}
## 💄 Style and UI updates
{{#each lipstick}}
- {{> commitTemplate}}
{{/each}}
{{/if}}
 
{{#if ambulance}}
## 🚑 Critical Hotfixes
 
{{#each ambulance}}
- {{> commitTemplate}}
{{/each}}
{{/if}}
 
{{#if lock}}
## 🔒 Security Issues
 
{{#each lock}}
- {{> commitTemplate}}
{{/each}}
{{/if}}
 
{{#if boom}}
## 💥 Breaking Changes
 
{{#each boom}}
- {{> commitTemplate}}
{{/each}}
{{/if}}
 
{{#if zap}}
## ⚡ Improved performance
 
{{#each zap}}
- {{> commitTemplate}}
{{/each}}
{{/if}}
 
{{#if chart_with_upwards_trend}}
## 📈 Added analytics or tracking
 
{{#each chart_with_upwards_trend}}
- {{> commitTemplate}}
{{/each}}
{{/if}}
 
{{#if globe_with_meridians}}
## 🌐 Internationalization and localization work
 
{{#each globe_with_meridians}}
- {{> commitTemplate}}
{{/each}}
{{/if}}
 
{{#if alien}}
## 👽 Update code due to external API changes
 
{{#each alien}}
- {{> commitTemplate}}
{{/each}}
{{/if}}
 
{{#if wheelchair}}
## ♿ Improved accessibility.
 
{{#each wheelchair}}
- {{> commitTemplate}}
{{/each}}
{{/if}}
 
{{#if mag}}
## 🔍 Improved SEO
 
{{#each mag}}
- {{> commitTemplate}}
{{/each}}
{{/if}}
 
{{#if children_crossing}}
## 🚸 Improved user experience / usability
 
{{#each children_crossing}}
- {{> commitTemplate}}
{{/each}}
{{/if}}
 
{{#if speech_balloon}}
## 💬 Updated text and literals
 
{{#each speech_balloon}}
- {{> commitTemplate}}
{{/each}}
{{/if}}
 
{{#if iphone}}
## 📱 Worked on responsive design
 
{{#each iphone}}
- {{> commitTemplate}}
{{/each}}
{{/if}}
 
{{#if pencil2}}
## ✏️ Fixed typos
 
{{#each pencil2}}
- {{> commitTemplate}}
{{/each}}
{{/if}}
 
{{#if arrow_up}}
## ⬆️ Upgraded dependencies
 
{{#each arrow_up}}
- {{> commitTemplate}}
{{/each}}
{{/if}}
 
{{#if bento}}
## 🍱 Added or updated assets
 
{{#each bento}}
- {{> commitTemplate}}
{{/each}}
{{/if}}
{{/with}}
{{#if compareUrl}}
# [v{{nextRelease.version}}]({{compareUrl}}) ({{datetime "UTC:yyyy-mm-dd"}})
{{else}}
# v{{nextRelease.version}} ({{datetime "UTC:yyyy-mm-dd"}})
{{/if}}
 
{{#with commits}}
{{#if sparkles}}
## ✨ New Features
 
{{#each sparkles}}
- {{> commitTemplate}}
{{/each}}
{{/if}}
 
{{#if bug}}
## 🐛 Bug Fixes
 
{{#each bug}}
- {{> commitTemplate}}
{{/each}}
{{/if}}
 
{{#if lipstick}}
## 💄 Style and UI updates
{{#each lipstick}}
- {{> commitTemplate}}
{{/each}}
{{/if}}
 
{{#if ambulance}}
## 🚑 Critical Hotfixes
 
{{#each ambulance}}
- {{> commitTemplate}}
{{/each}}
{{/if}}
 
{{#if lock}}
## 🔒 Security Issues
 
{{#each lock}}
- {{> commitTemplate}}
{{/each}}
{{/if}}
 
{{#if boom}}
## 💥 Breaking Changes
 
{{#each boom}}
- {{> commitTemplate}}
{{/each}}
{{/if}}
 
{{#if zap}}
## ⚡ Improved performance
 
{{#each zap}}
- {{> commitTemplate}}
{{/each}}
{{/if}}
 
{{#if chart_with_upwards_trend}}
## 📈 Added analytics or tracking
 
{{#each chart_with_upwards_trend}}
- {{> commitTemplate}}
{{/each}}
{{/if}}
 
{{#if globe_with_meridians}}
## 🌐 Internationalization and localization work
 
{{#each globe_with_meridians}}
- {{> commitTemplate}}
{{/each}}
{{/if}}
 
{{#if alien}}
## 👽 Update code due to external API changes
 
{{#each alien}}
- {{> commitTemplate}}
{{/each}}
{{/if}}
 
{{#if wheelchair}}
## ♿ Improved accessibility.
 
{{#each wheelchair}}
- {{> commitTemplate}}
{{/each}}
{{/if}}
 
{{#if mag}}
## 🔍 Improved SEO
 
{{#each mag}}
- {{> commitTemplate}}
{{/each}}
{{/if}}
 
{{#if children_crossing}}
## 🚸 Improved user experience / usability
 
{{#each children_crossing}}
- {{> commitTemplate}}
{{/each}}
{{/if}}
 
{{#if speech_balloon}}
## 💬 Updated text and literals
 
{{#each speech_balloon}}
- {{> commitTemplate}}
{{/each}}
{{/if}}
 
{{#if iphone}}
## 📱 Worked on responsive design
 
{{#each iphone}}
- {{> commitTemplate}}
{{/each}}
{{/if}}
 
{{#if pencil2}}
## ✏️ Fixed typos
 
{{#each pencil2}}
- {{> commitTemplate}}
{{/each}}
{{/if}}
 
{{#if arrow_up}}
## ⬆️ Upgraded dependencies
 
{{#each arrow_up}}
- {{> commitTemplate}}
{{/each}}
{{/if}}
 
{{#if bento}}
## 🍱 Added or updated assets
 
{{#each bento}}
- {{> commitTemplate}}
{{/each}}
{{/if}}
{{/with}}
Share this article on Twitter, and more!
Tweet this post Leave a comment DM me on Twitter