Verdaccio builds the NPM private warehouse

preface

Why build a private warehouse?

In daily development we will certainly encapsulate some common components, most of which will be in the Components directory; Imagine if we have two systems A and B, how do we encapsulate the components that both systems use?

In this case, we still develop a package to host NPM is more reliable, with the download. But these components have a certain privacy that we don’t want others to see. This is where Verdaccio’s benefits come into play.

Verdaccio is a lightweight NPM repository created by Node.js. This will quickly help us build an NPm-like web application to host our packages

precondition

This article introduces Verdaccio as 5.x version; The example demonstration system is Ali Cloud CentOS. Since the software is based on Node.js, you need to install Node.js on your server and make sure the version is 12.x.

Tip: It is recommended to use NVM to manage node versions. Install the NVM

The installationVerdaccio

-g global installation is mandatory
npm install verdaccio -g
Copy the code

After the installation is successful, we will print verdaccio on the command line and we will see that the service is running; The following appears

Based on the post-service information, two important pieces of information are readily available

• Verdaccio configuration file: / root/config/verdaccio/config. The yaml

• Verdaccio starts by default: it occupies port 4873 by default (remember to enable security group if you use cloud server).

Note: it is possible for some friends to enable the port before the display of localhost:4873, if this situation, opening the security group will not take effect, the following attached solution.

Use vim to open the configuration file. Add listen 0.0.0.0:4873 in the last line. The port can be specified arbitrarily. 0.0.0.0 is the IPV4 address of the current host. Then restart the service, in the browser input server IP plus port can access.

The installation is complete by accessing the service boot address.

usepm2managementverdaccio

At this point, we can access the NPM private server, but there is a serious problem, after starting the service in the command line can not do other operations. Pm2 is recommended to manage the Verdaccio process. Of course, the website also recommends using another tool, Forever.

Pm2 process management tool based on Node.js. Common commands are briefly listed here.

NPM install pm2 -g

Launch parameters

Verdaccio is just the default startup mode. It also contains some other parameters.

verdaccio --listen 4000 --config ~./config.yaml
Copy the code

The configuration file

Here’s the entire configuration file, in the form of comments, to make it as complete as possible. It is recommended to watch it repeatedly

# This is the default config file. It allows all users to do anything,
# so don't use it on production systems.
#
# Look here for more config file examples:
# https://github.com/verdaccio/verdaccio/tree/master/conf
#

The default location for storing packages in the repository, which does not exist by default, will be in /root/.config/verdaccio after publishing private packages
# path to a directory with all packages
storage: ./storage
# path to a directory with plugins to include
plugins: ./plugins

web:
  # page title
  title: Verdaccio
  # comment out to disable gravatar support
  # gravatar: false
  Sort packets by asC descending desc ascending
  # by default packages are ordercer ascendant (asc|desc)
  # sort_packages: asc
  # Enable dark mode
  # convert your UI to the dark side
  # darkMode: true
  # page logo
  # logo: http://somedomain/somelogo.png
  # page favicon
  # favicon: http://somedomain/favicon.ico | /path/favicon.ico
  # maximum number of links on a web page
  # rateLimit:
  # windowMs: 1000
  # max: 10000

# translate your registry, api i18n not available yet
# i18n:
# internationalization related, also 404.
# list of the available translations https://github.com/verdaccio/ui/tree/master/i18n/translations
  # supports zh_CN
  # web: en-US

auth:
  # Location of registered users' information
  htpasswd:
    file: ./htpasswd
    # Maximum amount of users allowed to register, defaults to "+inf".
    # You can set this to -1 to disable registration.
    # by default, the number of registered users is unlimited. If set to -1, no registration is allowed. The user qualification method is as follows
    # 1, first register n users, then change the configuration file to -1, subsequent registration is not allowed
    # 2, open n user registration interfaces
    # max_users: 1000

# a list of other known repositories we can talk to
If the private library does not exist, look for the following library.
uplinks:
  npmjs:
    url: https://registry.npmjs.org/

packages:
  # @*/ is the scope of the package for example @vue/cli then @vue is the scope of the package, usually prefixed by some organization or some company, so this is an internal package
  '@ * / *':
    # scoped packages
    access: $all
    publish: $authenticated
    unpublish: $authenticated
    If the private library does not exist, go to NPM to find the library.
    proxy: npmjs
  # Plain NPM package
  '* *':
    Allow all users to publish and access packages
    # allow all users (including non-authenticated users) to read and
    # publish all packages
    #
    # you can also specify a scope similar to @xxx/ XXX
    # you can specify usernames/groupnames (depending on your auth plugin)
    $authenticated users are only authenticated by NPM adduser.
    # and three keywords: "$all", "$anonymous", "$authenticated"
    access: $all

    # allow all known users to publish/publish packages
    # (anyone can register by default, remember?)
    publish: $authenticated
    unpublish: $authenticated

     # if package is not available locally, proxy requests to 'npmjs' registry
    proxy: npmjs

# You can specify HTTP/1.1 server keep alive timeout in seconds for incoming connections
# A value of 0 makes the http server behave similarly to Node.js versions prior to 8.0.0, which did not have a keep-alive timeout.
# WORKAROUND: Through given configuration you can workaround following issue https://github.com/verdaccio/verdaccio/issues/301. Set to  0 in case 60 is not enough.
server:
  keepAliveTimeout: 60

middlewares:
  audit:
    enabled: true

# log settings
logs: { type: stdout, format: pretty, level: http }
#experiments:
# # support for npm token command
# token: false
# # disable writing body size to logs, read more on ticket 1912
# bytesin_off: false
# # enable tarball URL redirect for hosting tarball with a different server, the tarball_url_redirect can be a template string
# tarball_url_redirect: 'https://mycdn.com/verdaccio/${packageName}/${filename}'
# # the tarball_url_redirect can be a function, takes packageName and filename and returns the url, when working with a js configuration file
# tarball_url_redirect(packageName, filename) {
# const signedUrl = // generate a signed url
# return signedUrl;
#}

# This affect the web and api (not developed yet)
#i18n:
#web: en-USListen: 0.0.0.0:4873Copy the code

Rights management

According to the above configuration content, we take 🌰.

packages:
 # you can customize the package name rule. Represents the package starting with local-, can only be operated after login.
  'local-*':
    access: $authenticated
    publish: $authenticated
    unpublish: $authenticated
    proxy: npmjs
  # indicates that the owner of a private library can publish, access, and revoke packages.
  '* *':
    access: $all
    publish: $all
    unpublish: $all
    proxy: npmjs
Copy the code

Publish packages to private libraries

Forced interpolated ads, please go to the end of the article to download the code, as a test use of the library 😏. Develop a component library based on VueCli.

NRM manages NPM sources

NRM can easily switch between multiple NPM addresses. npm, cnpm … . The following is a brief list of common instructions in NRM.

npm install -g nrm
Copy the code

package.json

Since verdaccio is used, it is hosting a private warehouse. Since it is a private warehouse, it is as standardized as possible. It is well known that some of the bread displayed on NPM is based on the field names in package.json, but here are some of the key things.

The above content contains most of the commonly used attributes, but you can refer to packs.json yourself if you need more

Publish a package

After knowing the above, publishing the NPM package is relatively simple.

• Publish package: NPM publish at the root of the project, depending on the configuration of the private library above, may require login.

• NPM Login: NPM login then follow the prompts step by step.

• Logout NPM: NPM logout.

• Delete published package: NPM unpublish [packageName] If –force cannot be added. Note: This directive only applies to packages published within 24 hours

• NPM deprecate < PKG >[@
  
  ]
  
  can be used if this package is not maintained and will contain warning messages if downloaded later.