Reusable components in a private npm registry

So you need to create private npm packages? It’s great when you don’t want to rely on git submodules for example, or just want to standardize and/or reutilize some pieces of code. It can be UI plugins, css utilities or other reusable components, used in multiple projects across different projects.

There is a number of different options, you can of course get yourself a private npm organization — which costs US$ 7 per user per month. Another option is to use Verdaccio.

At work we have a private npm registry on Nexus. Since we alread have other private repos up there, we keep the private npm modules in the same place. I won’t go into the details on how to setup the registry, but more on how to use it and to publish packages.

We also have a proxy repository pointing to the official npm registry in our Nexus account.

Setup

Authenticate with the private npm registry

npm login --registry https://nexus.coolcompanyio.net/repository/coolcompany-npm-registry/

Authenticate with the proxied npm registry

npm login --registry https://nexus.coolcompanyio.net/repository/npm-registry/

This will update your ~/.npmrc with the authTokens. For example:

//registry.npmjs.org/:_authToken=XXXXXX
//nexus.coolcompanyio.net/repository/coolcompany-npm-registry/:_authToken=NpmToken.XXXXX
//nexus.coolcompanyio.net/repository/npm-registry/:_authToken=NpmToken.XXXXX

In your project

Create a local .npmrc in the project root

@coolcompany:registry=https://nexus.coolcompanyio.net/repository/coolcompany-npm-registry/
registry=https://nexus.coolcompanyio.net/repository/npm-registry/

Install package

Install package as a dependency

npm install @coolcompany/coolcompany-coolplugin

Install package (here as a devDependency)

npm install -D @coolcompany/coolcompany-coolplugin

Of course, you can also add an entry directly in package.json like this:

  "devDependencies": {
    "@coolcompany/coolcompany-coolplugin": "^0.1.0"
  },
	...

And then do npm install

Publish a package

Configure your repo

Create a `.npmrc` in the project root

@coolcompany:registry=https://nexus.coolcompanyio.net/repository/coolcompany-npm-registry/
registry=https://nexus.coolcompanyio.net/repository/npm-registry/

Scoped Packages is a way to group related npm packages together, much like namespaces.

Create a package.json

In your repo, create a package.json if you already didn’t have one.

npm init

Set a name

"name": "@coolcompany/coolcompany-coolplugin",

Set the registry URL

...
"publishConfig": {
    "registry": "https://nexus.coolcompanyio.net/repository/coolcompany-npm-registry/"
},

We need to specify this URL to publish the package.

Publish

npm publish

Screenshot

Now the package is now uploaded in Nexus

Update a package

npm version 0.2.0
npm publish

Run this in a package directory to bump the version and write the new data back to package.json and package-lock.json

Great! the package is published and can now be installed using:

npm install @coolcompany/coolcompany-coolplugin