Migration des modules

Résumé

Suite à la migration 4.6, tous les modules n’ont pas été portés. Avec la fin de node 16, et les mises à jour récurrentes de Docker (v2++), il est nécessaire de mettre à jour en continue les modules sur lesquels nous travaillons.

De plus, le plan de rénovation frontend sur React suit son court mais se fera petit à petit.

Liste des modules

https://opendigitaleducation.atlassian.net/l/cp/roTLWHCW

Ticket JIRA et commit

Avant de toucher à un module, il faut créer un ticket JIRA avec comme titre :

[Nom de l’app] - Migration 4.6

Après chaque portage, le message de commit doit être le suivant :

"chore: #<NUM_TICKET>, up migration 4.6"

Portage

En attendant une image docker avec node 18 apportant stabilité et une installation + rapide avec pnpm, la migration suivante se fait avec node 16 et yarn 1.22.19. Ce sera d’autant plus facile de passer à node 18 par la suite grâce à la montée de version de Gulp 4

Sur chaque module, les fichiers impactés sont les suivants :

build.sh
gulpfile.js
docker-compose.yml
package.json

Package.json

Montée de versions des dependencies suivantes dans le package.json

"dependencies": {
  "gulp": "4.0.2",
  "gulp-clean": "0.4.0",
  "merge2": "1.1.0",
}

Figer toutes les versions des dependencies/devDependencies
- Retirer les ^
- Ajouter les champs suivants dans le package.json

"packageManager": "yarn@1.22.19",
"engines": {
  "node": "16 || 18"
}

Gulpfile

Attention, il peut y avoir des spécificités sur certains modules. Bien vérifier et à adapter

Remplacer le gulpfile de l’application par celui-ci :

const gulp = require("gulp");
const webpack = require("webpack-stream");
const merge = require("merge2");
const replace = require("gulp-replace");
const clean = require("gulp-clean");
const argv = require("yargs").argv;
const fs = require("fs");

function dropCache() {
  return gulp
    .src(["./src/main/resources/public/dist"], {
      read: false,
      allowEmpty: true,
    })
    .pipe(clean());
}

function buildDev() {
  return gulp
    .src("./src/main/resources/public")
    .pipe(webpack(require("./webpack.config.js")))
    .on("error", function handleError() {
      this.emit("end"); // Recover from errors
    })
    .pipe(gulp.dest("./src/main/resources/public/dist"));
}

function build(done) {
  const refs = gulp
    .src("./src/main/resources/view-src/**/*.+(html|json)")
    .pipe(replace("@@VERSION", Date.now()))
    .pipe(gulp.dest("./src/main/resources/view"));

  const copyBehaviours = gulp
    .src("./src/main/resources/public/dist/behaviours.js")
    .pipe(gulp.dest("./src/main/resources/public/js"));

  merge[(refs, copyBehaviours)];
  done();
}

gulp.task("drop-cache", dropCache);
gulp.task("build-dev", buildDev);
gulp.task("build", build);

function getModName(fileContent) {
  const getProp = function (prop) {
    return fileContent.split(prop + "=")[1].split(/\r?\n/)[0];
  };
  return (
    getProp("modowner") + "~" + getProp("modname") + "~" + getProp("version")
  );
}

function watchFiles() {
  let springboard = argv.springboard;
  if (!springboard) {
    springboard = "../springboard-open-ent/";
  }
  if (springboard[springboard.length - 1] !== "/") {
    springboard += "/";
  }

  gulp.watch(
    "./src/main/resources/public/ts/**/*.ts",
    gulp.series("drop-cache", "build-dev", "build")
  );

  fs.readFile("./gradle.properties", "utf8", function (err, content) {
    const modName = getModName(content);
    gulp.watch(["./src/main/resources/public/js"], () => {
      console.log("Copying resources to " + springboard + "mods/" + modName);
      gulp
        .src("./src/main/resources/**/*")
        .pipe(gulp.dest(springboard + "mods/" + modName));
    });
    gulp.watch(
      [
        "./src/main/resources/public/template/**/*.html",
        "!./src/main/resources/public/template/entcore/*.html",
      ],
      () => {
        console.log("Copying resources to " + springboard + "mods/" + modName);
        gulp
          .src("./src/main/resources/**/*")
          .pipe(gulp.dest(springboard + "mods/" + modName));
      }
    );

    gulp.watch("./src/main/resources/view/**/*.html", () => {
      console.log("Copying resources to " + springboard + "mods/" + modName);
      gulp
        .src("./src/main/resources/**/*")
        .pipe(gulp.dest(springboard + "mods/" + modName));
    });
  });
}

gulp.task("watch", watchFiles);

exports.watch = gulp.parallel("watch");
exports.build = gulp.series("drop-cache", "build-dev", "build");

build.sh et build-noDocker.sh

Supprimer le fichier build-noDocker.sh
Remplacer le build.sh par le fichier ci-dessous
Pour utiliser les commandes :
- Avec Docker : build.sh clean
- Sans Docker : build.sh --no-docker clean
- etc…

Docker Compose

Remplacer le fichier existant par celui-ci :

Tests

Pour s’assurer que tout fonctionne, suivre la démarche ci-dessous :

build.sh clean
build.sh buildNode
- va installer puis compiler l’application angularjs
build.sh buildGradle
build.sh watch
- penser à indiquer le bon chemin de son springboard / ode-dev-server
s’assurer que l’application démarre et fonctionnement normalement en local
s’assurer que le build Jenkins fonctionne à %
vérifier que l’application démarre et fonctionne normalement sur un environnement de recette

Framework

2023-07 : Guide de migration des modules (frontend)

Analytics