Aplicar CI / CD desarrollando un paquete NPM
Tags: npm, ci, cd, travisci
Published: 2020-08-18 06:01:36

---
title: Aplicar CI / CD desarrollando un paquete NPM
published: true
description: Pasos que seguiremos para publicar un paquete NPM aplicando los principios de Integración Contínua (CI) y Despliegue Contínuo (CD)
tags: npm, ci, cd, travisci
//cover_image: https://direct_url_to_image.jpg
---

<article class="h-entry">

<header>

# Aplicar CI / CD desarrollando un paquete NPM

</header>

<section data-field="subtitle" class="p-summary">Pasos que seguiremos para publicar un paquete NPM aplicando los principios de Integración Contínua (CI) y Despliegue Contínuo (CD)</section>

<section data-field="body" class="e-content">

<section name="6e14" class="section section--body section--first">

<div class="section-divider">

* * *

</div>

<div class="section-content">

<div class="section-inner sectionLayout--insetColumn">

### Aplicar CI / CD desarrollando un paquete NPM

#### Pasos que seguiremos para publicar un paquete NPM aplicando los principios de Integración Contínua (CI) y Despliegue Contínuo (CD)

#### 0.- Introducción

Vamos a comenzar un artículo en el que vamos a aprender a trabajar con unas prácticas y principios que nos van a hacer nuestro trabajo diario mucho más sencillo.

En este caso, os voy a enseñar como trabajar con los principios y prácticas de CI y CD.

Llegados a este punto, quizás nunca habéis escuchado ni leido nada sobre las siglas CI y CD (aunque espero que después de este artículo tengáis una idea más clara), por lo que os estaréis preguntando “¿y este de qué nos está hablando? ¡¡Queremos respuestas!!”

Como el objetivo del artículo es enseñaros como funcionan estos principios y prácticas, lo ideal es empezar hablando sobre que es cada uno de ellos y para que sirven.

#### 1.- CI/CD: integración continua y despliegue continuo al detalle

La integración y la entrega continua (CI y CD, respectivamente) son unos principios y prácticas que permiten a los desarrolladores de aplicaciones entregar cambios de código de manera más frecuente y fiable, con lo que la calidad del software tenderá a ser de mayor calidad gracias a trabajar de esta manera.

_CI: Integración Contínua_. **Filosofía de codificación y un conjunto de prácticas** que impulsan a los equipos de desarrollo a implementar con frecuencia pequeños cambios y registrar el código en los repositorios de control de versiones.

_CD: Despliegue Contínuo_. Proceso que comienza cuando el CI finaliza. Automatiza la entrega de aplicaciones a determinados entornos de infraestructura. La mayoría de los equipos trabajan con múltiples entornos además de la producción, como los entornos de pruebas y desarrollo, y CD garantiza que haya una forma automatizada de enviarles los cambios de código.

Para comenzar, por lo menos ya sabemos más sobre ello y seguramente tengamos dudas que uso le podremos dar en nuestros proyectos y los ejemplos a los que se podría aplicar, son:

*   Publicar librerías en NPM (que es lo que voy a enseñar), después de comprobar automáticamente los test definidos y ver que estos son los correctos, asegurándonos que no haya errores.
*   Publicar webs públicas en Firebase Hosting, Zeit Now,…

</div>

</div>

</section>

<section name="d4a9" class="section section--body section--last">

<div class="section-divider">

* * *

</div>

<div class="section-content">

<div class="section-inner sectionLayout--insetColumn">

Si queréis saber más al detalle, acerca de estos principios y prácticas, os invito a que leáis el siguiente artículo.

<div name="78aa" id="78aa" class="graf graf--mixtapeEmbed graf-after--p">[**CI/CD: integración continua y entrega continua al detalle**  
_CI/CD es una de las mejores prácticas que pueden implementar los equipos de desarrollo. También es una práctica…_www.computerworld.es](https://www.computerworld.es/tecnologia/cicd-integracion-continua-y-entrega-continua-al-detalle "https://www.computerworld.es/tecnologia/cicd-integracion-continua-y-entrega-continua-al-detalle")[](https://www.computerworld.es/tecnologia/cicd-integracion-continua-y-entrega-continua-al-detalle)</div>

#### 2.- Requisitos antes de empezar a trabajar

*   [Node y NPM](https://nodejs.org/es/download/) instalados.
*   Conocimientos de Git básicos.
*   Cuenta en Github.

#### 3.- Crear repositorio en Github.

Lo primero que necesitamos para utilizar el servicio de [Travis](https://travis-ci.org/) (accedemos con nuestra cuenta de Github), es tener la cuenta de Github y posteriormente crear el repositorio donde vamos a gestionar el control de versiones.

Una vez creado el repositorio, clonamos el repositorio en el directorio que queremos añadirlo para trabajar dentro de el.

<figure name="8cc1" id="8cc1" class="graf graf--figure graf-after--p">

<div class="aspectRatioPlaceholder is-locked" style="max-width: 561px; max-height: 363px;">![](https://cdn-images-1.medium.com/max/800/1*gyVVEulcr-2TmPuV3rR7Cg.png)</div>

</figure>

#### 4.- Activar nuestro repositorio para ejecutar CI / CD

Tenemos que estar en el “[Settings](https://travis-ci.org/account/repositories)”.

Una vez que estamos ahí, tenemos que buscar el repositorio que vamos a usar (el que hemos creado ahora mismo). Tener en cuenta vuestro usuario / organización, en mi caso es una organización. Si no la teneís a la vista, pulsáis **“Sync account”** para refrescar y que aparezca.

<figure name="5c41" id="5c41" class="graf graf--figure graf-after--p">

<div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 412px;">![](https://cdn-images-1.medium.com/max/800/1*SaovyoCklP-RZ-Evl3Kzuw.png)</div>

</figure>

Por defecto, nos aparece la lista de los repositorios asociados al usuario que tenemos asociada la cuenta, que en mi caso es **“mugan86”**. Si tenéis el repositorio asociado a vuestro usuario, sin haber usado una organización, simplemente buscáis en el apartado **“Legacy Services Integration”** y en el buscador añadís las palabras clave para filtrar ese repositorio.

<figure name="6142" id="6142" class="graf graf--figure graf-after--p">

<div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 169px;">![](https://cdn-images-1.medium.com/max/800/1*CNPta_ecKmUY7tYmE_SinQ.png)</div>

</figure>

Así ya tenemos activado el repositorio y no tendremos que tocar nada más.

#### 5.- Empezando con nuestro proyecto.

Una vez que ya tenemos claro los conceptos iniciales, tenemos todo lo necesario instalado y configurado, accedemos al directorio que acabamos de clonar, para trabajar con el control de versiones.

Ejecutamos el siguiente comando para crear nuestro fichero del manifiesto de cualquier proyecto de NPM, que es el **package.json**

`npm init`

Respondemos las preguntas que nos va haciendo el asistente, quedando algo como lo siguiente:

El resultado será un nuevo fichero llamado package.json con este contenido:

#### 6.- Desarrollando la librería

Ahora creamos el fichero index.js en la raíz del proyecto junto con el package.json que acabamos de crear, donde vamos a definir las funciones del paquete / librería que usaremos para utilizar en este artículo y así aprender sobre CI / CD. Añadimos el siguiente contenido:

#### 7.- Definiendo los tests

Creamos la carpeta **“test”** y dentro un fichero llamado **“index.js”** con el siguiente contenido:

Ahora, para ejecutar los test, necesitamos instalar las dependencias de chai y mocha.

`npm install -D mocha chai`

#### 8.- Comenzando con la configuración de Travis para aplicar CI

Creamos el fichero de llamado “.travis.yml” donde vamos a añadir la configuración necesaria para poner en marcha el sistema automatizado donde va a ejecutar las ordenes que especifiquemos en dicho archivo, como la ejecución de tests, la publicación en NPM,…

Teniendo en cuenta lo mencionado en el punto 4, tenemos que tener de la siguiente manera el repositorio que queremos utilizar para este proceso, ya que si no está activo, no funcionará.

<figure name="7412" id="7412" class="graf graf--figure graf-after--p">

<div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 375px;">![](https://cdn-images-1.medium.com/max/800/1*dVpcIAdeYCUKxsdveDslGQ.png)</div>

</figure>

Subimos el primer commit al repositorio de Github:

<pre name="1cf6" id="1cf6" class="graf graf--pre graf-after--p">git add — all</pre>

<pre name="10af" id="10af" class="graf graf--pre graf-after--pre">git commit -m “First version”</pre>

<pre name="a139" id="a139" class="graf graf--pre graf-after--pre">git push origin master</pre>

Una vez activado, pulsamos en **“Settings”** y vemos que ya ha ejecutado la integración contínua, pero topdavía no hemos desplegado el paquete en NPM de manera automática, y eso será lo que se realizará con el despliegue continuo (CD).

<figure name="f0eb" id="f0eb" class="graf graf--figure graf-after--p">

<div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 264px;">![](https://cdn-images-1.medium.com/max/800/1*dJj_F0pW149TIsfOcs5zHA.png)</div>

</figure>

#### 9.- Despligue Contínuo (CD)

Una vez que ya hemos probado que se ejecutan los test de manera automática mediante la Integración contínua y las primeras configuraciones del fichero **.travis.yml** lo que vamos a hacer es configurar para que se despligue la nueva actualización de ese paquete y lo publique en NPM.

**9.1.- Instalar Ruby:**

Tenemos que instalar Ruby para poder instalar las gemas CLI de Travis, para ejecutar el setup necesario para configurar el apartado del despliegue contínuo

> Dependiendo de nuestro sistema operativo, tendremos que seguir unas instrucciones u otras y para saber como debemos de hacerlo seguimos el siguiente [enlace](https://www.ruby-lang.org/es/documentation/installation/). En Windows actualmente la versión que funciona bien es la [Ruby+Devkit 2.6.5–1 (x64)](https://github.com/oneclick/rubyinstaller2/releases/download/RubyInstaller-2.6.5-1/rubyinstaller-devkit-2.6.5-1-x64.exe)

**9.2.- Instalar Travis CLI:**

Una vez instalado Ruby en nuestra máquina, debemos de instalar travis mediante el siguiente comando:

<pre name="eb45" id="eb45" class="graf graf--pre graf-after--p">gem install travis</pre>

Una vez instalado, ejecutamos “travis” para comprobar que está correctamente añadida a nuestra máquina. En el caso de que nos diga que no lo tenemos, reiniciar el terminal o consola por si acaso.

Antes de configurar de NPM, tenemos que tener en cuenta que tenemos creada una cuenta en [https://www.npmjs.com/](https://www.npmjs.com/)

#### 10.- Configurar NPM con Travis

Ahora para hacer la configuración de NPM, debemos de ejecutar el siguiente comando

<pre name="1830" id="1830" class="graf graf--pre graf-after--p">travis setup npm</pre>

<figure name="2841" id="2841" class="graf graf--figure graf--iframe graf-after--pre">

<figcaption class="imageCaption">Pasos para configurar Travis con los ajustes de NPM</figcaption>

</figure>

Nos quedará el fichero .travis.yml de la siguiente manera:

<figure name="d433" id="d433" class="graf graf--figure graf--iframe graf-after--p">

<figcaption class="imageCaption">Después de la configuración</figcaption>

</figure>

En el apartado “on”, añadimos antes que repo “branches: master”, quedando de la siguiente manera:

Con esto, ya estamos preparados para publicar nuestro paquete en NPM, en el repositorio que encontramos en [npmjs.com](https://www.npmjs.com/)

#### 11.- Publicar en NPM

Antes de publicar, vamos a hacer un par de cambios y comprobaciones, para dejar todo listo para hacer los despliegues automáticamente siempre y cuando, pase el apartado de la CI, cuando ejecuta los tests.

Vamos al fichero package.json y añadimos al nombre (name) en las propiedades el nombre siguiendo el siguiente formato:

**@<usuario>/nombre-actual**

En mi caso:

*   <usuario> : mugan86
*   nombre-actual: hello-world-ci-cd

Quedando así: **@mugan86/hello-world-ci-cd**

Añadimos otra propiedad (en el package.json) para publicar como público nuestro paquete:

<pre name="a517" id="a517" class="graf graf--pre graf-after--p">"publishConfig": { "access": "public" }</pre>

Asi estará actualmente nuestro package.json:

#### 12.- Comprobar existencia del paquete y últimos pasos

Vamos a [https://www.npmjs.com/](https://www.npmjs.com/).

Y dentro de la barra de la navegador, comprobamos si existe ese paquete, ya que si existe, no vamos a poder publicarlo NUNCA.

Si nos aparece algo de este estilo ejecutando la URL: [https://www.npmjs.com/package/@mugan86/hello-world-ci-cd](https://www.npmjs.com/package/@mugan86/hello-world-ci-cd)

<figure name="9ba4" id="9ba4" class="graf graf--figure graf-after--p">

<div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 460px;">![](https://cdn-images-1.medium.com/max/800/1*REPnOCr6w3LZ3sWP8GuU0g.png)</div>

</figure>

No está diciendo que no existe y **QUE SI PODREMOS PUBLICAR**.

Por lo tanto, dejaré como nombre de paquete ese nombre.

Añadimos los cambios en git, y hacemos el backup:

<pre name="d45e" id="d45e" class="graf graf--pre graf-after--p">git add — all</pre>

<pre name="1771" id="1771" class="graf graf--pre graf-after--pre">git commit -m “Publish 1.0.0”</pre>

<pre name="a64e" id="a64e" class="graf graf--pre graf-after--pre">git push origin master</pre>

Con esto, se activa de nuevo el sistema de Integración Contínua, ejecuta los tests y si los pasa, procede a desplegarlo en NPM mediante el despligue contínuo y publicará la versión de ese paquete:

<figure name="1a9c" id="1a9c" class="graf graf--figure graf-after--p">

<div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 209px;">![](https://cdn-images-1.medium.com/max/800/1*pR3In0prgMg77Y-3wbEaLw.png)</div>

</figure>

Podéis ver el log de ese proceso automatizado desde [aquí](https://travis-ci.org/npm-js-ts-angular-modules-course/hello-world-ci-cd/builds/659658442).

#### 13.- Resultado

*   [Paquete en NPMJS](https://www.npmjs.com/package/@mugan86/hello-world-ci-cd).
*   [Repositorio en Github](https://github.com/npm-js-ts-angular-modules-course/hello-world-ci-cd).

</div>

</div>

</section>

</section>

<footer>

[Canonical link](https://medium.com/@mugan86/aplicar-ci-cd-desarrollando-un-paquete-npm-3111770ef763)

</footer>

</article>