Nx monorepo : publish your libraries to Github Packages with Github Actions & Semantic release — Part 1/3

Hi everyone! 👋🏾

In this series of posts, we will see together how we can use Github Actions and semantic release to publish libraries on Github packages from Nx monorepo .

If you find an error, please leave a note or a comment.

1. Install Nx monorepo and configure Husky Git hooks
2. Configure Github Actions workflows
3. Create publishable libraries and configure semantic release

Part 1: Install Nx monorepo and configure Husky Git hooks

In this part, we will create a new project workspace and configure git hooks to intercept commits and check if commit messages meet conventional commits. The conventional commits are useful for semantic releasing.

Contents

• Create an Nx workspace
• Install husky
• Add husky git hooks
• Configure husky git hooks

Create an Nx workspace

Run the command below to create the Nx monorepo:

$ npx create-nx-workspace@latest --all-prompts

Enter your workspace name and choose an empty workspace.

Choose don’t use Nx Cloud.

Done.

Install husky

Run one of command below to init husky on the workspace:

$ npx husky-init && npm install       # npm 
$ npx husky-init && yarn              # Yarn 1 
$ yarn dlx husky-init --yarn2 && yarn # Yarn 2+ 
$ pnpm dlx husky-init && pnpm install # pnpm

This command setup husky, edit package.json and create a sample pre-commit hook that you can edit.

Add husky git hooks

To add a hook, use husky add command.

$ npx husky add .husky/{HOOK_NAME} '{CMD_TO_EXEC}'

Now add the commit-msg and prepare-commit-msg hooks.

$ npx husky add .husky/commit-msg ''
$ npx husky add .husky/prepare-commit-msg ''

After running these commands, you get now 3 files in .husky folder: commit-msg , pre-commit & prepare-commit-msg.

Configure husky git hooks

Now, let’s edit our hook files.

pre-commit

Edit pre-commit file like below:

.husky/pre-commit

Our pre-commit hook run lint-staged command, so you have to install and configure lint-staged.

Install the package below with your package manager.

lint-staged

Create a lint-staged.config.js at the workspace root and edit it like below:

lint-staged.config.js

commit-msg

Edit commit-msg file like below:

.husky/commit-msg

Here, the hook run commitlint command which checks if your commit message meet the conventional commits format. So you have to install and configure commitlint.

Install the packages below with your package manager:

@commitlint/cli @commitlint/config-conventional @commitlint/config-nx-scopes

Create a commitlint.config.js file at the workspace root and edit it like below:

commitlint.config.js

prepare-commit-msg

Edit prepare-commit-msg file like below:

.husky/prepare-commit-msg

This hook run commitizen on git commit command, so you have to install and configure commitizen.

Install the packages below with your package manager:

commitizen @commitlint/cz-commitlint

Create a .cz-config.js file at the workspace root and edit it like below:

.cz-config.js

You have now husky git hooks configured with lint-staged, commitlint and commitizen. When you run git commit command, you’ll be prompted to fill in any required fields, and your commit messages will be formatted according to the standards defined by your config.

Your monorepo is commitizen-friendly and ready for using with semantic-release.

There is a VSCode extension Conventional Commits that is useful to fill in commit message according to the conventional commits. It also supports commitlint config.

If this post was helpful to you, clap 👏🏾, thanks!

Next part: “Configure Github Actions workflows”.

Useful links

• Nx is Modern Angular
• Enforce JavaScript Code Quality with Husky and Hooks
• Validate commit message using Commitlint and husky
• Run linters on git staged files