Cómo publicar mi librería de Angular en un NPM privado con Verdaccio

Cuando trabajamos con librerías, el objetivo principal es compartir nuestro código con el equipo y no dejarlo solo en nuestra computadora. La forma más sencilla de compartir y probar nuestro código es usar npm pack para generar una versión comprimida.

Otra opción es publicar el paquete en Azure Artifacts o usar la versión pública gratuita de npm. Pero si queremos que sea privado, tenemos que pagar o configurar nuestro propio registro privado de npm. En este punto es donde Verdaccio nos ayuda a resolver la situación.

Qué es Verdaccio

Verdaccio nos permite registrar nuestras librerías localmente de forma sencilla, gracias a una interfaz web limpia que soporta npm, yarn y pnpm. También funciona como un proxy para npm: cuando solicitamos una librería, puede buscar primero en Verdaccio (con una pequeña configuración) antes de consultar npm, funcionando como una caché local muy práctica para nuestras librerías.

Cómo funciona

Verdaccio está disponible como paquete de npm y también cuenta con una imagen de Docker. En mi caso, ejecuto la versión de npm para mantener el ejemplo simple y fácil de seguir.

Primero instalamos el paquete de Verdaccio:

npm i verdaccio

Después de la instalación, podemos ejecutar el comando verdaccio para iniciar el servidor del registro local.

Al abrir la URL en el navegador, la página nos muestra los siguientes pasos para completar la configuración.

En otra terminal, creamos nuestro usuario ejecutando el siguiente comando:

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

Ya tenemos Verdaccio listo para operar. El siguiente paso es publicar nuestra primera librería.

Crear y publicar

Antes de usar Verdaccio, vamos a crear una librería de ejemplo llamada donweb-ui. Para esto, configuramos el espacio de trabajo, generamos la librería y la compilamos.

Creamos el espacio de trabajo de ejemplo:

ng new my-company --create-application=false

Generamos y compilamos la librería desde la terminal:

ng g library donweb-ui
ng build donweb-ui

Después de crear y compilar la librería, navegamos al directorio dist/donweb-ui y ejecutamos el comando $ npm publish --registry http://localhost:4873/ para publicarla en Verdaccio.

$ npm publish --registry http://localhost:4873/

El resultado en la terminal se verá así:

Al terminar, podemos visitar la interfaz web de Verdaccio para ver nuestro paquete con todos sus detalles y la versión lista para su instalación.

Instalar el paquete desde Verdaccio

Si intentamos instalar la versión de nuestra librería ejecutando, por ejemplo, npm install donweb-ui@0.0.14, vamos a recibir un error. ¿Por qué ocurre esto?

Por defecto, npm busca los paquetes en el registro oficial de npm. Para indicarle a npm que use el proxy de Verdaccio, agregamos un archivo .npmrc con la URL de Verdaccio. Colocamos este archivo al mismo nivel del package.json e intentamos instalar la librería de nuevo.

¡Listo! Ya tenemos nuestra librería instalada directamente desde Verdaccio. 🥳

Resumen

Verdaccio nos permite crear nuestro propio registro de npm de forma sencilla, evitando la complejidad y los costos asociados con opciones como Azure Artifacts o la versión privada de npm. Aunque Azure Artifacts ofrece muchas funciones avanzadas, Verdaccio es ideal para escenarios simples y directos.

¡Feliz publicación!