Créer son propre package NPM

developpement devops Sep 29, 2022

Salut,

 

Créer son propre Package NPM en entreprise, c'est super top. 

Ca permet de mutualiser une lib "interne"

Certaines fonctions sont utilisées par tout le monde.

Par exemple : 

  • Des wrapper pour axios (get, post et put), pour les BDD
  • Des helpers : sanitize de chaines de caractères maison, faire des hash
  • Des fonctions pour manipuler des Bucket S3
  • Des loggers uniformes
  • Des events vers Slack/OpsGenie/Teams

La lib interne te permet de faire en sorte que tout le monde utilise les mêmes choses de la même façon quand tu as des projets/repo distincts

Pour faire ça : 

  • Tu héberge ta lib dans ton repo privé gitlab
  • Tu buildes ton package NPM avec ta cicd
  • Tu la mets à dispo de tes dev

C'est ce qu'on voit aujourd'hui

On commence par le package.json : 

{
  "name": "@MONGROUPE/malib",
  "version": "1.0",
  "description": "Ma Lib Core library",
  "main": "dist/index.js",
  "publishConfig": {
    "@MONGROUPE:registry": "https://gitlab.com/api/v4/projects/IDDETONPROJECT/packages/npm/"
  },
  "scripts": {
    "build": "echo \"Building package\""
  },
  "author": "Imrane DESSAI",
  "license": "ISC",
  "dependencies": {},
  "directories": {
    "lib": "lib"
  },
  "devDependencies": {},
  "repository": {
    "type": "git",
    "url": "git+ssh://[email protected]/MONGROUPE/malib.git"
  },
  "bugs": {},
  "homepage": "https://gitlab.com/MONGROUPE/malib#readme"
}
 

Le seul truc : IDDETONPROJECT se trouve dans "settings" -> General

MONGROUPE étant ton groupe gitlab si tu en as un

malib étant le nom de ton projet

C'est assez parlant

J'ai donc cette arborescence : 

Et dans "dist", mon code source : (on retrouve le dossier lib déclaré dans directories du json)

Jusque là, rien de bien nouveau.

En local pour enregistrer ton NPM dans le "package registry" de ton projet, il te suffit dans lancer ces commandes : 

npm i
npm run build
touch .npmrc
echo @MONGROUPE:registry=https://gitlab.com/api/v4/projects/IDDETONPROJECT/packages/npm/ >> .npmrc
echo //gitlab.com/api/v4/projects/IDDETONPROJECT/packages/npm/:_authToken=TONTOKENAUTH >> .npmrc
npm publish

TONTOKENAUTH : tu peux le créer dans "settings" -> repository -> Deploy Token

Il faut donner les droits :

- read_repository

- read_package_registry

- write_package_registry

Si tout se passe bien, tu peux aller dans ton repos : Packages and Registries -> Package Registry

Et tu dois voir la V1 de ton package dispo

A ce stade, quand tu veux publier une nouvelle version de ton package, tu changes la version dans le json

Puis tu lances les commandes. Et tu auras une nouvelle version de dispo sur ton repo.

Mais comme tu as lu le précédent article sur le CI/CD (que tu peux retrouver là : https://imranesubstack.dev/blog)

tu sais bien qu'on va pas se contenter de faire des actions manuelles

Mon dockerfile est juste une image Node, que je builde et que je publie sur mon repo (Container Registry)

Pour ça, il suffit de cliquer sur Container Registry et de suivre les insctructions

Ensuite, on configure notre .gitlab-ci.yml pour la CI/CD : 

image: registry.gitlab.com/MONGROUPE/malib:latest

# Cache our node_modules between stages so that it runs faster.
cache:
  paths:
    - node_modules/

# declare our stages. If you do not need tests, remove the tests line.
stages:
  - dist

# This runs before each stage.
before_script:
  - npm i

# Required. Runs a build script and sets up the npmrc to point to the GitLab project.
dist:
  stage: dist
  script:
    - npm run build
    - touch .npmrc
    - |
      {
        echo "@${CI_PROJECT_ROOT_NAMESPACE}:registry=${CI_API_V4_URL}/projects/${CI_PROJECT_ID}/packages/npm/"
        echo "${CI_API_V4_URL#https?}/projects/${CI_PROJECT_ID}/packages/npm/:_authToken=${CI_JOB_TOKEN}"
      } | tee --append .npmrc      
	- npm publish
  only:
    refs:
      - main
  artifacts:
    paths:
      - dist/

 

On retrouve les commandes que l'on a lancé plus tôt.

Cette fois-ci on utilise les variables d'environnement dispo dans gitlab pour rendre notre CI secure et robust

Normalement, tu peux copier/coller comme ça, ça fonctionnera pour ton projet.

Maintenant, dès qu'il y a un commit dans la branch main (via push ou MR par exemple), la CI se lance

Elle build et deploy le package pour nous.

Donc, tu peux gérer le développement de ta lib comme un vrai projet 

Il faudra quand même ajouter les tests et toutes les bonnes pratiques qui garantissent la qualité

Maintenant, dans un autre projet, tu veux pouvoir utiliser ce package.

Dans le dossier parent, tu mets un fichier .npmrc : 

@MONGROUPE:registry=https://gitlab.com/api/v4/projects/IDDETONPROJECT/packages/npm/
//gitlab.com/api/v4/projects/IDDETONPROJECT/packages/npm/:_authToken=TONTOKENAUTH 

Tu peux utiliser un autre token qui n'a les droit qu'en lecture par exemple

Et dans ton package.json :

    "dependencies": {
    "@MONGROUPE/malib": "1.0",

Avec un "npm i" tu peux tester que ton package s'installe bien et que tout fonctionne.

Voilà  

On se revoit la semaine prochaine

Imrane 🏖

La newsletter pour ne rien louper

Rejoins les 2500 lecteurs de  la newsletter pour obtenir des conseils, des stratégies et des ressources pour développer et monétiser tes compétences Tech.