Skip to main content
Updated on · 2 min read

Publishing React Component Library - Configure Auto and Github Actions - [2/3]

In this post, I will walk you through building and publishing a React component library. The article focuses on automating the release process using Auto and GitHub Actions.

This is part 2 of the series. Here are the parts:

Configure Auto​

npm install -D auto @auto-it/all-contributors @auto-it/conventional-commits @auto-it/npm @auto-it/omit-commits @auto-it/omit-release-notes @auto-it/released

Add labels

Auto depends on labels that are added to PR to decide to release. So, we need to create labels on our repo.

Run npx auto create-labels

Add the following files

Note: Change author

Canary Release​

Make a canary release

  • Create a new branch from the main
  • Run npx auto canary --force, and it should be successful
  • At this point, you should find a version in npm similar to 0.1.0--canary.457943b.0 -D

Release Action​

Let's add a release action to Github which can handle releasing.

Before you push the following file, add a secret NPM_TOKEN in your repo settings. This token would be used to publish to npm.

.github/workflows/release.yml
loading...

Test Release​

Action: Raise a PR with "release" label, and merge it.

Outcomes:

  • An action should run on Github (Check Actions tab for running)
  • You should see a new version on npmjs
  • You should see a new release on Github with release notes
info

We have an npm package configured with Vite to build and Auto to version and ship.