Using verdaccio to build an enterprise private NPM Library

Time:2021-5-2

preface

Private NPM library, I think, is a stage that every team will practice and experience. There are many ways to realize private NPM, such as based on private git warehouse, based on the private function (payment) officially provided by NPM, verdaccio and so on. However, after a comprehensive comparison of various factors (no money, easy to use), verdaccio is slightly better than the former two.

So, this article will also take you to use verdaccio to build an enterprise private NPM library!

1、 Installation and start up

The installation and startup process of verdaccio is relatively simple. First, install verdaccio globally

npm i -g verdaccio

Then, input in the terminalverdaccioCommand to start verdaccio:

verdaccio

Then verdaccio will output a prompt in the terminal, such as the location of its configuration file and the address of the service started

Using verdaccio to build an enterprise private NPM Library

By default, all services started by verdaccio will be in the4873Open this port in the browser and we will see the interface of the private library NPM built by verdaccio

Using verdaccio to build an enterprise private NPM Library

As you can see, the default interface style is still very simple and beautiful. In addition, we will be prompted to execute the command to log in and publish the NPM package.

2、 Configuration modification

Although, verdaccio is installed and started. However, since the default configuration of verdaccio is inconsistent with our production requirements, we need to modify the configuration of verdaccio.

In the production environment, the private NPM library needs to have the following three functions:

  • Support the search of NPM package
  • The access of NPM package can only be registered users. And in some scenarios, users need to be deleted
  • After the NPM package is released, it is pushed to the nail group to tell which NPM package has been released

The configuration file of verdaccio is in the~/.config/VerdaccioThe default configuration is as follows:

storage: ./storage
plugins: ./plugins
web:
  title: Verdaccio
auth:
  htpasswd:
    file: ./htpasswd
uplinks:
  npmjs:
    url: https://registry.npmjs.org/
packages:
  '@*/*':
    access: $all
    publish: $authenticated
    unpublish: $authenticated
    proxy: npmjs
  '**':
    access: $all
    publish: $authenticated
    unpublish: $authenticated
    proxy: npmjs
server:
  keepAliveTimeout: 60
middlewares:
  audit:
    enabled: true
logs:
  - { type: stdout, format: pretty, level: http }

Here, let’s understand the meaning of several values in the default configuration one by one

  • storageThe storage location of the published package. The default storage location is~/.config/Verdaccio/Under the folder
  • pluginsThe directory where the plug-in is located
  • webInterface related configuration
  • authUser related, such as registration, authentication plug-ins (default ishtpasswd
  • uplinksIt is used to provide access to external packages, such as the source corresponding to NPM and cnpm
  • packagesIt is used to configure the permissions of publishing package, deleting package and viewing package
  • serverConfiguration of private library server
  • middlewaresMiddleware related configuration will be introduced by defaultauitMiddleware to supportnpm auditcommand
  • logsConfiguration of terminal output information

Next, we will modify the corresponding values in verdaccio’s configuration file to support the above functions one by one.

2.1 Open Search

When we have many private NPM packages in stock, we have trouble finding a package. Verdaccio supports the search function, which is created bysearchControlled, default tofalseSo here we need to turn it on:

search: true

After opening, we can conduct normal search operation in the search bar on the page of the private NPM library.

2.2 authority control

Permission control refers to the package that we need to publish on the private NPM libraryCan only be viewed by team membersIn addition, people can’t see all the information. So, back to verdaccio, we need to do these two things:

  • The view of NPM package is restricted to registered users only
  • Prohibit user registration (after team members have registered)

Accordingly, here we need to modify the configuration filepacakgesandauth. We mentioned it earlierpackagesIt is used to configure the permissions related to publishing package, viewing package and deleting package. Let’s look at the default configuration first

packages:
  '@*/*':
    access: $all
    publish: $authenticated
    unpublish: $authenticated
    proxy: npmjs
  '**':
    access: $all
    publish: $authenticated
    unpublish: $authenticated
    proxy: npmjs

The key here represents the package name that the corresponding permissions need to match. For example, for the first one, if the package name we publish is like this@wjc/testIt will hit. Each rule has four parameters. amongproxyIf it cannot be found in the private NPM library, it will proxy to npmjs (corresponding tounlinksInnpmjsOfhttps://registry.npmjs.org/)。 The remaining three parameters are used to set package related permissions, which have three optional values$all(all of you)$anonymous(unregistered users), “$authenticated(registered user). Now, let’s take a look at the meaning of these three parameters:

  • accessControl access to packages
  • publishControl the publishing rights of the package
  • unpublishControl the deletion permission of the package

Obviously, what we need here is that only the user can have the above three permissions, that is, all set to$authenticated

packages:
  '@*/*':
    access: $authenticated
    publish: $authenticated
    unpublish: $authenticated
    proxy: npmjs
  '**':
    access: $authenticated
    publish: $authenticated
    unpublish: $authenticated
    proxy: npmjs

Set it uppackagesAfter that, we have to change itauthIn other words, if your private NPM library is deployed in an external network environment, anyone can use itnpm adduserCommand to register users.

Obviously, this is not allowed to happen, so we need to set it hereauthOfmax_usersby-1, which means disable registered users:

auth:
  max_users: -1

To enable user registration, set the specified number (greater than 0)

2.3 release package push nail group

Publishing package push nail group means that every time we publish a package, the robot of nail group can inform us of the published package information.

First of all, we need to have a robot corresponding to the nail groupWebhook(you can view the pinned document for access). Then, add thenotify

notify:
  'dingtalk':
    method: POST
    headers: [{'Content-Type': 'application/json;charset=utf-8'}]
    endpoint:  https://oapi.dingtalk.com/robot/send?access_ Token = * *, webhook of nailing robot
    Content: '{"color": "green", "message": "new package released: * {name} *", "notify": true, "message"_ format":"text"}'

Among them,methodandheadersRepresents the type of the requested method and entity, respectively.endpointIndicating the requestedWebhookAddress.contentThen it means to obtain the basic template of publishing informationmessageThe value of will be the content of the message sent by the robots of the nail group(nameRepresents the package name of the publication.

Suppose we publish a package calledverdaccio-npm-demoFor the private package of, we will receive a notice in the nail group accordingly:

Using verdaccio to build an enterprise private NPM Library

3、 Basic use

Now that verdaccio is configured. So, we can start publishing the first private package.

3.1 registered users

First, we need to register a user:

npm adduser --registry http://localhost:4873/

Next, it will ask you to fill in your user name, password and email address to log in to the private NPM Library:

Using verdaccio to build an enterprise private NPM Library

3.2 deleting users

Since there are registered users, the inevitable requirement is that in some scenarios, we need to delete a user to prohibit him from logging into the private NPM library.

As mentioned earlier, verdaccio uses thehtpasswdTo achieve authentication. Accordingly, the registered user information is stored in the~/.config/verdaccio/htpasswdIn the document:

wuliu:pWxgur/1w5v1I:autocreated 2021-02-18T07:58:57.827Z

Here, a record corresponds to a user, that is, if the record is deleted, the user cannot log in, that is, the user is deleted.

3.3 add and switch sources

Here, for the sake of operation, throughnrmTo switch the source. not installednrmYou can install it first

npm i -g nrm

Then, use thenrmAdd a source:

nrm add mynpm http://localhostm:4873/

theremynpmThe abbreviation for your source, you can name it according to your own preference.

Then, we can runnrm lsCommand to view existing sources:

Using verdaccio to build an enterprise private NPM Library

You can see that by default, the source used by NPM ishttps://registry.npmjs.org/Then we need to switch it to the source corresponding to the private NPM Library:

nrm use mynpm

After switching the source, we’ll follownpm iIt willFirst go to the private library to find the packageIf it doesn’t exist, it willhttps://registry.npmjs.org/(because it’s configured withproxy)Find the package.

3.4 release

If you want to publish a package, you can do it directly in a project that needs to publish a packageverdaccio-npm-demo2)Run under the root directory of:

npm publish

Then, on the interface of the private NPM library, you can see our published package:

Using verdaccio to build an enterprise private NPM Library

epilogue

Of course, verdaccio can do a lot, such as integrating git action automatic contract, custom authentication plug-ins, etc. However, after our above ups and downs, the private NPM library has begun to take shape and can be put into production. Finally, if there are improper or wrong expressions in the article, you are welcome to raise issue.

give the thumbs-up

Through reading this article, if you have any harvest, you canLike itThis will be my motivation to share. Thank you

I’m Wuliu. I like to innovate and tamper with source code. I focus on learning and sharing source code (Vue 3, VitE), front-end engineering, cross end and other technologies. Welcome to pay attention to my workWeChat official account: Code Center

Using verdaccio to build an enterprise private NPM Library