Move from npmjs to Github Package Registry in 5 steps

The Github Package Registry allows you to keep your project code and packages in one single place. In this article we’ll explore how we can move our Javascript packages from npmjs to the npm registry of Github.

The service is still in beta and you can signup to access it at https://github.com/features/package-registry

The project can be found at https://github.com/manupeco/github-registry-ex.git

Step 1: configure .npmrc

The first step we need to do is to configure our npm installation to use the Github registry. In order to do that we need to modify the .npmrc file located in our “home” directory (in my case /Users/Emanuele/)

In my case I would run from the terminal command line the following:

vi /Users/Emanuele/.npmrc

and I will replace the file content with the following:

//npm.pkg.github.com/:_authToken=<PERSONAL_ACCESS_TOKEN>
registry=https://npm.pkg.github.com/<ORGANIZATION_OR_OWNER_NAME>

The personal access token should have the “write_repo” and “read_repo” repository. To get a personal access token you can follow the instructions at https://help.github.com/en/articles/creating-a-personal-access-token-for-the-command-line

Now, your npm is ready to use the Github registry.

Step 2: modify the package.json of your library

Suppose your javascript package has the following package.json:

{
   "name": "nameprinter",
   "version": "1.0.0",
   "description": "Our first package",
   "main": "index.js",
   "author": "Emanuele Pecorari",
   "license": "ISC"
}

What you will need is:

• add the prefix “<ORGANIZATION_OR_OWNER_NAME>/” to the “name” attribute (all in lowercase letter. So if the owner name is “Manupeco”, it will become “manupeco”);
• add/modify the “repository” attribute and make it pointing to the repository where you want to keep your package;
• add the “publishConfig” section with the registry url to use.

So, the new package.json will be something like this:

{
   "name": "@manupeco/nameprinter",
   "version": "1.0.0",
   "description": "Our first package",
   "main": "index.js",
   "repository": {
      "type": "git",
      "url": "https://github.com/manupeco/github-registry-ex.git"
   },
   "publishConfig": {
      "registry":"https://npm.pkg.github.com/manupeco"
    },
   "author": "Emanuele Pecorari", 
   "license": "ISC"
}

Step 3: publish

Now we can publish our package on the Github Package Manager with the usual command

npm publish

Going to your Github account page (for me https://github.com/manupeco) under the “packages” tab you should see now your package:

Step 4: change dependencies in your application’s package.json

Now that your package is on Github, you need to change the dependencies block of applications that want to use it to take into account the prefix “<ORGANIZATION_OR_OWNER_NAME>/” added to the package’s name attribute in the Step2.

So, if in an hypothetical application using our “nameprinter” package we had:

....
"dependencies": {   
   "nameprinter": "^1.0.0"
}
....

we’ll end with

....
"dependencies": {   
   "@manupeco/nameprinter": "^1.0.0"
}
....

Step 5: update the require directives

As we have updated the dependencies name in the package.json file, we’ll need to change also the require directives in our hypothetical application code:

So from:

const NamePrinter = require('nameprinter')

we’ll go to:

const NamePrinter = require('@manupeco/nameprinter')