Ever had an NPM package that never get’s updated even though you make changes from time to time. I do! It’s time to make my life just slightly easier and automate the publish / update step with Github Actions.

Since the release of GitHub Actions several people I know have been raving about how good they are, so In an attempt to learn a little bit, and solve a problem I have, I thought I could try it out 🤓

Oh and here’s the official GitHub Actions docs: [GH Actions Docs]

Goal

It’s important to know what you want to do, before starting configuring (or… doing anything, really!). For me it’s going to be something quite simple, but very useful.

This is my starting point and what I want to achieve:

1. I have an open source package which is published to NPM
2. → NPM: react-native-value-picker
3. → Github: ugglr/react-native-value-picker
4. When I publish a new release on Github I want to update / re-publish this package to NPM, so my updates go live.

To do this manually we need to login in and publish/re-publish through the NPM CLI, something like this:

## Authenticating with npm
$ npm login

## Publish the package
$ npm publish

I know, I know, it’s not a massive amount of work to do those two steps each time I want to push out an update to the package, but we are learning something here as well 🚀

Prior to GitHub Actions in order to automate this task, I would have needed to involve a third party CI/CD solution, and on top, it’s free.

So let’s get started with the config.

Preparing our repo

The execution chains or jobs which we want to run inside of our GitHub Actions are called workflows.

So GitHub will look inside .github/workflows for workflows / execution chains so let’s make a .github folder inside of our root, this folder is commonly used if there are special configurations to the repository, like code owners. Further we need to make a folder inside our .github folder called workflows.

TLDR: When all is done you’ll have a a root/.github/workflows folder.

Like most CI/CD solutions GitHub Actions workflows are configured using a .yml file, and we need to put that that file into the workflow folder we created above. I named my yml-file npm-publish.yml and here’s a badly made folder-tree to make it more clear.

--> root
   |--> .github
      |--> workflows
         |--> npm-publish.yml // contains our workflow.
   |--> rest of app

#github #programming #javascript #react #software-development