2022-09: Guide de migration springboard

Motivations

Nous souhaitons uniformiser la gestion des dépendances front et alléger le build front qui n’est pas performant.

Pour cela nous allons alléger le tooling : suppression de bower et gulp => npm devient l’outil principale

Le thème gère ses overrides et le springboard ne tire que les dépendances déjà buildé: lib js, thème css, widgets.

Migration

Gestion des thèmes

Créer un dossier “assets/themes” contenant uniquement un fichier package.json comme suit:

{
    "name": "themes",
    "version": "1.0.0",
    "description": "",
    "license": "ISC",
    "dependencies": {
      "theme-open-ent":"npm:ode-csslib-openent@dev-produit",
      "panda":"npm:ode-csslib-panda@dev-produit",
      "paris":"npm:theme-open-ent-paris@dev-produit",
      "paris1d":"npm:panda-paris@dev-produit",
      "ode-bootstrap-neo":"npm:ode-bootstrap-neo@dev-produit",
      "ode-bootstrap-one":"npm:ode-bootstrap-one@dev-produit"
    }
  }

Pour chaque dépendance spécifier le tag (ici “dev-produit” ou le numéro de version).

Eventuellement il est possible de renommer le thème par exemple ici nous allons avoir le thème panda-paris installé dans le dossier “paris”

"paris":"npm:theme-open-ent-paris@dev-produit",

A noter que si assets/themes existait déjà, supprimer le contenu de ce dossier avant la migration

Gestion des lib JS

Créer un dossier “assets/js” contenant uniquement un fichier package.json comme suit:

{
    "name": "js",
    "version": "1.0.0",
    "description": "",
    "license": "ISC",
    "dependencies": {
      "ode-ngjs-front":"dev-produit",
      "ode-ts-client":"dev-produit",
      "entcore": "dev-produit"
    }
  }

Pour chaque dépendance spécifier le tag (ici “dev-produit” ou le numéro de version).

Gestion des widgets

Créer un dossier “assets/widgets” contenant uniquement un fichier package.json comme suit:

{
    "name": "widgets",
    "version": "1.0.0",
    "description": "",
    "license": "ISC",
    "dependencies": {
      "notes": "git+https://github.com/web-education/notes.git#master",
      "calendar-widget": "git+https://github.com/web-education/calendar-widget.git#master"
    }
}

Pour chaque dépendance spécifier la branche sur laquelle tirer le widget.

A noter que si assets/widgets existait déjà, supprimer le contenu de ce dossier avant la migration

Nettoyage

Supprimer les fichiers: bower.json, gulpfile.js

Déplacer le fichier “theme-conf.js” dans le dossier “assets” et ne conserver que cette section:

exports.conf = {
    overriding: [
        { }
    ]
}

Modification du build.sh

La fonction buildFront du build.sh devient:

buildFront() {
  set -e
  #prepare
  chmod -R 777 assets/ || true
  find assets/js/ -mindepth 1 -maxdepth 1 -not -name 'package.json' -not -name '.npmrc' -exec rm -rf {} \;
  find assets/themes/ -mindepth 1 -maxdepth 1 -not -name 'package.json' -not -name '.npmrc' -exec rm -rf {} \;
  find assets/widgets/ -mindepth 1 -maxdepth 1 -not -name 'package.json' -not -name '.npmrc' -exec rm -rf {} \;
  #run npm install
  docker run -e NPM_TOKEN --rm -v "$PWD":/home/node opendigitaleducation/node:16-alpine sh -c "cd /home/node/assets/themes && npm install && chmod -R 777 node_modules && cd /home/node/assets/widgets && npm install  && chmod -R 777 node_modules && cd /home/node/assets/js && npm install  && chmod -R 777 node_modules"
  #clean
  find assets/js/ -mindepth 1 -maxdepth 1 -not -name 'node_modules' -exec rm -rf {} \;
  find assets/themes/ -mindepth 1 -maxdepth 1 -not -name 'node_modules' -exec rm -rf {} \;
  find assets/widgets/ -mindepth 1 -maxdepth 1 -not -name 'node_modules' -exec rm -rf {} \;
  #move artefact
  mv assets/widgets/node_modules/* assets/widgets/
  find ./assets/js/node_modules/ -mindepth 1 -maxdepth 2 -type d -name "dist" | sed -e "s/assets\/js\/node_modules\///"  | sed -e "s/dist//" | xargs -i mv ./assets/js/node_modules/{}dist/ ./assets/js/{}
  find ./assets/themes/node_modules/ -mindepth 1 -maxdepth 2 -type d -name "dist" | sed -e "s/assets\/themes\/node_modules\///"  | sed -e "s/dist//" | xargs -i mv ./assets/themes/node_modules/{}dist/ ./assets/themes/{}
  #clean node_modules
  rm -rf assets/js/node_modules assets/themes/node_modules assets/widgets/node_modules
}

Migration vers déploiement auto (facultatif)

Motivations

Avec le déploiement auto nous n’avons plus besoin de packager un springboard avec des jar par conséquent gradle n’est plus nécessaire.

Supprimer gradle

Supprimer les fichiers et dossiers suivants: conf.properties, build.gradle, gradlew, gradlew.bat, gradle/.

Nettoyer gradle.properties

Le fichier gradle.properties ne contient que ces clés:

modowner=fr.wseduc
modname=paris
version=4.5-produit-SNAPSHOT

Nettoyer le build.sh

Le fichier build.sh ne contient que ces fonctions:

#!/bin/bash

GROUPID=`grep 'modowner=' gradle.properties | sed 's/modowner=//'`
NAME=`grep 'modname=' gradle.properties | sed 's/modname=//'`
VERSION=`grep 'version=' gradle.properties | sed 's/version=//'`

case `uname -s` in
  MINGW*)
    USER_UID=1000
    GROUP_UID=1000
    ;;
  *)
    if [ -z ${USER_UID:+x} ]
    then
      USER_UID=`id -u`
      GROUP_GID=`id -g`
    fi
esac


buildFront() {
  set -e
  #prepare
  chmod -R 777 assets/ || true
  find assets/js/ -mindepth 1 -maxdepth 1 -not -name 'package.json' -not -name '.npmrc' -exec rm -rf {} \;
  find assets/themes/ -mindepth 1 -maxdepth 1 -not -name 'package.json' -not -name '.npmrc' -exec rm -rf {} \;
  find assets/widgets/ -mindepth 1 -maxdepth 1 -not -name 'package.json' -not -name '.npmrc' -exec rm -rf {} \;
  #run npm install
  docker run -e NPM_TOKEN --rm -v "$PWD":/home/node opendigitaleducation/node:16-alpine sh -c "cd /home/node/assets/themes && npm install && chmod -R 777 node_modules && cd /home/node/assets/widgets && npm install  && chmod -R 777 node_modules && cd /home/node/assets/js && npm install  && chmod -R 777 node_modules"
  #clean
  find assets/js/ -mindepth 1 -maxdepth 1 -not -name 'node_modules' -exec rm -rf {} \;
  find assets/themes/ -mindepth 1 -maxdepth 1 -not -name 'node_modules' -exec rm -rf {} \;
  find assets/widgets/ -mindepth 1 -maxdepth 1 -not -name 'node_modules' -exec rm -rf {} \;
  #move artefact
  mv assets/widgets/node_modules/* assets/widgets/
  find ./assets/js/node_modules/ -mindepth 1 -maxdepth 2 -type d -name "dist" | sed -e "s/assets\/js\/node_modules\///"  | sed -e "s/dist//" | xargs -i mv ./assets/js/node_modules/{}dist/ ./assets/js/{}
  find ./assets/themes/node_modules/ -mindepth 1 -maxdepth 2 -type d -name "dist" | sed -e "s/assets\/themes\/node_modules\///"  | sed -e "s/dist//" | xargs -i mv ./assets/themes/node_modules/{}dist/ ./assets/themes/{}
  #clean node_modules
  rm -rf assets/js/node_modules assets/themes/node_modules assets/widgets/node_modules
}

archive() {
  #tar cfzh $NAME-static.tar.gz static
  tar cfzh ${NAME}.tar.gz assets/* conf.j2
}

publish() {
  case "$VERSION" in
    *SNAPSHOT) nexusRepository='snapshots' ;;
    *)         nexusRepository='releases' ;;
  esac
  mvn deploy:deploy-file -DgroupId=$GROUPID -DartifactId=$NAME -Dversion=$VERSION -Dpackaging=tar.gz -Dfile=${NAME}.tar.gz -DrepositoryId=wse -Durl=https://maven.opendigitaleducation.com/nexus/content/repositories/$nexusRepository/
}

for param in "$@"
do
  case $param in
    buildFront)
      buildFront
      ;;
    archive)
      archive
      ;;
    publish)
      publish
      ;;
    help)
      echo "
           buildFront : fetch wigets and themes using Bower and run Gulp build. (/!\ first run can be long becouse of node-sass's rebuild).
              archive : make an archive with folder /mods /assets /static
              publish : upload the archive on nexus
      "
    ;;
    *)
      echo "Invalid command : $param. Use one of next command [ help | clean | init | generateConf | run | stop | buildFront | archive | publish ]"
  esac
  if [ ! $? -eq 0 ]; then
    exit 1
  fi
done

Nettoyer le JenkinsFile

Le JenkinsFile ne contient que ces taches:

#!/usr/bin/env groovy
pipeline {
  agent any
    stages {
      stage('Build Front') {
        steps {
          sh './build.sh buildFront'
        }
      }
      stage('Archive') {
        steps {
          sh './build.sh archive'
        }
      }
      stage('Publish') {
        steps {
          sh './build.sh publish'
        }
      }
    }
}