Aller au contenu principal

Frontend / UI

Les différents environnements front​

Prérequis​

  • VM avec Bluemind en version 5.0 ou supérieure prête à l'utilisation.

Environnement VueJS​

Prérequis​

  • NodeJS installé depuis le site officiel (version 8 ou supérieure).
  • NPM est installé avec NodeJS.
  • Yarn installé depuis le site officiel (version 1.12 ou supérieure).

Pour lancer le serveur de développement :​

  • Se placer dans le plugin contenant l'application, dans le dossier où se trouve le fichier package.json (normalement il est à la racine du plugin Vue.js)
  • Lancer ensuite "yarn dev" (ou "npm run dev" si vous n'êtes pas dans le repo bluemind-all) : un serveur de développement (live-reload enabled) est alors exécuté. Le serveur est lancé sur http://*:9180/

Configuration VSCode (éditeur conseillé)​

  • Éditer via Fichier > Préférences > Paramètres
{
    "settings": {
        "prettier.eslintIntegration": true,
        "editor.tabSize": 4,
        "eslint.autoFixOnSave": true,
        "eslint.validate": [
            {
                "autoFix": true,
                "language": "javascript"
            },
            {
                "autoFix": true,
                "language": "vue"
            }
        ],
    },
    "extensions": {
        "recommendations": [
            "formulahendry.auto-close-tag",
            "formulahendry.auto-rename-tag",
            "msjsdiag.debugger-for-chrome",
            "dbaeumer.vscode-eslint",
            "eg2.vscode-npm-script",
            "christian-kohler.npm-intellisense",
            "esbenp.prettier-vscode",
            "dariofuzinato.vue-peek",
            "octref.vetur",
        ]
    },
}
attention

Si le serveur de dev Webpack ne recompile pas à chaud les fichiers sources lorsqu'ils sont modifiés, c'est probablement à cause d'un nombre de "inotify watchers" insuffisant : https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers

Environnement GWT​

Prérequis​

  • Eclipse 2022-09 installé.

Installation :​

Si une erreur se produit concernant Mylin commons:

Pour lancer le serveur de développement :​

  • Clic-droit sur le projet qui fournit le bundle JS (par exemple net.bluemind.ui.adminconsole.main pour l'AC), puis "Run As" et enfin, "GWT Development Mode with Jetty"
attention
  • Si un message de ce type "could not find any host pages in project" apparaît au lancement du server : faire un clic-droit sur le projet / Propriétés / GWT / Web Application et sélectionner l'option "This directory has a WAR directory" (et configurer le dossier, web-resources par exemple).
  • Si ce message d'erreur apparaît :

    Il y a plusieurs raisons possibles :
    • Avec le devmode il peut être nécessaire de préciser une adresse IP au serveur de dev GWT. Elle peut être définie dans Run Configuration / Arguments en précisant un paramètre "-bindAddress 0.0.0.0" (par exemple)
    • Vous avez un problème de Content Security Policy (regarder dans la console). Allez voir dans la section "En cas de problème de CSP" du devmode
    • Vous avez un problème de Mixed Content Security (regarder dans la console). Allez voir dans la section "En cas de problème avec HTTPS" du devmode
  • Si ce message d'erreur apparaît : 
    [ERROR] jreLeakPrevention.gcDaemonFail
    java.lang.ClassNotFoundException: sun.misc.GC
        at java.base/jdk.internal.loader.BuiltinClassLoader.loadClass(BuiltinClassLoader.java:641)
        at java.base/jdk.internal.loader.ClassLoaders$AppClassLoader.loadClass(ClassLoaders.java:188)
        at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:520)
        at java.base/java.lang.Class.forName0(Native Method)
        at java.base/java.lang.Class.forName(Class.java:375)
        at com.google.gwt.dev.shell.jetty.JettyLauncher.jreLeakPrevention(JettyLauncher.java:915)
        at com.google.gwt.dev.shell.jetty.JettyLauncher.start(JettyLauncher.java:737)
        at com.google.gwt.dev.DevMode.doStartUpServer(DevMode.java:636)
        at com.google.gwt.dev.DevModeBase.startUp(DevModeBase.java:898)
        at com.google.gwt.dev.DevModeBase.run(DevModeBase.java:705)
        at com.google.gwt.dev.DevMode.main(DevMode.java:432)

Vous pouvez l'ignorer sans risque. Les contrôles qui l'entourent sont là pour éviter que cette situation ne se produise - l'implémentation de JRE utilisée a supprimé cette fonctionnalité.

Environnement Closure​

Prérequis​

  • Créer les fichiers vides /root/dev-unsecure-cookies et /root/dev-no-csp sur sa VM et redémarrer le service bm-webserver
  • Compilation effectuée dans open/ui : 
    mvn -Dmaven.test.skip=true clean install

Pour lancer le serveur de développement :

  • Dans open/ui exécuter le script plovr.sh
  • Sur http://localhost:9810 sont listées les différentes configurations (~applications) gérées par plovr
info
  • Configurations Plovr pratiques (à ajouter dans l'URL, juste après index.html, par exemple : https://virt.bluemind.loc/contact/index.html?mode=RAW)
    • ?level=QUIET pour ne pas afficher les warnings au-dessus de l'application,
    • ?mode=RAW qui permet d'être en mode non-compilé (tout le JS en clair)
  • Plus d'informations sur la config et les options disponibles dans plovr : http://plovr.com/options.html

Configurer le reverse proxy​

info

Configurer son environnement de développement pour que le bon fichier JS (celui en cours de développement) soit consommé par le webserver du Bluemind installé sur sa VM.

Via le plugin devmode (méthode conseillée)​

Avantage

Ne nécessite pas de reverse proxy sur la machine de développement.

Prérequis​

Paquet bm-plugin-webserver-devfilter installé sur sa VM.

Mise en œuvre​

  • Un fichier de conf est automatiquement créé (/etc/bm/dev.json) lors de l'installation du paquet (seulement si aucun fichier de conf existant n'est détecté)
  • Ajouter "IP_DE_VOTRE_HOST_SUR_RESEAU_VM dev.bluemind.test" dans le /etc/hosts de votre host
  • Toujours sur l'host, démarrer le serveur de développement

Remarques​

  • Dans le fichier de conf, modifier le champ 'active' des filtres pour les activer.
  • À chaque modification du fichier de conf, redémarrer bm-webserver ou ajouter "?reload-devmode" à l'URL (par exemple : /cal/index.html?reload-devmode)
  • Deux filtres particuliers qui peuvent être laissés toujours actifs pour développer en Closure : celui pour désactiver les appcache et l'autre sur /input/
  • Vous pouvez consulter ou télécharger sur le lien suivant la configuration par défaut du devmode

En cas de problème avec HTTPS / Mixed Content Security​

Deux solutions sont possibles :

En cas de problème de CSP​

La CSP de Bluemind bloque la requête ?

Il vous faut faire un touch /root/dev-no-csp et de redémarrer bm-webserver

Impossible de s'authentifier avec HTTP://​

Vider le cache de l'application, en particulier les cookies, créér le fichier /root/dev-unsecure-cookies et redémarrer bm-webserver.

En cas de problème avec HSTS​

  • Sur la VM, il faut supprimer la ligne qui ajoute le header add_header Strict-Transport-Security max-age=15768000; dans la configuration nginx : /etc/nginx/sites-enabled/bm-client-access
  • Puis redémarrer nginx : nginx -s reload
  • Dans google-chrome/chromium, il est nécessaire de vider le cache HSTS (chrome://net-internals / Domain Security Policy / Delete domain security policies)

Debug​

Si le devmode ne fonctionne pas, c'est probablement à cause des 2 problèmes ci-dessus.

Sinon, tentez les étapes suivantes pour qualifier votre problème :

  • Est-ce que la VM est ok ?
  • Serveur de développement bien lancé ?
  • Ping l'host depuis la VM ?
  • Curl le JS recherché depuis la VM (problème de pare-feu ?)
  • règles définies dans /etc/bm/dev.json correctes ?

Via un reverse proxy​

Prérequis​

Le reverse proxy Nginx, Apache ou Caddy doit être installé sur sa machine de développement.

Remarques :

  • bluemind.host : URL pour accéder au server BM installé sur sa VM
  • bluemind.virt : URL utilisée pour avoir le bon JS actif (celui qu'on modifie sur sa machine de dev, compilé et servi en live-reload par webpack-dev-server).
  • Exemple de /etc/hosts (pour un Linux) :

Nginx​

Remarque : la configuration modifiée est celle du Nginx sur la machine de développement, pas sur la VM.

Exemple :

upstream core2 {
  server bluemind.virt:443;
}

server {
  	listen 80;
  	server_name bluemind.host;

	# SIGNATURE
	location /signature/js/compile/net.bluemind.ui.signature.application.js {
		proxy_pass http://127.0.0.1:8080/signature/js/compile/net.bluemind.ui.signature.application.js;
	}
}

Apache​

RewriteEngine On

# SIGNATURE
RewriteRule "^/signature/js/compile/net.bluemind.ui.signature.application.js$" "http://127.0.0.1:8080/signature/js/compile/net.bluemind.ui.signature.application.js" [R]

Caddy​

info

Avec Caddy et cette configuration, les fichiers /root/dev-unsecure-cookies et /root/dev-no-csp ne sont PAS nécessaires.

{
    auto_https disable_redirects
}
localhost:2080 {
    header {
            -Strict-Transport-Security
            -Content-Security-Policy
    }
    reverse_proxy * {
            to https://[address_du_serveur]:443
            transport http {
                    keepalive off
                    tls_insecure_skip_verify
            }
    }
    handle_path /adminconsole/net.bluemind.ui.adminconsole.main/* {
            rewrite * /net.bluemind.ui.adminconsole.main{path}
            reverse_proxy http://localhost:9876
    }
}
Dernière mise à jour le