Zum Hauptinhalt gehen

Frontend / UI

Die verschiedenen Front-End-Umgebungen​

Voraussetzungen​

  • VM mit BlueMind in Version 5.0 oder höher bereit zur Nutzung.

VueJS-Umgebung​

Voraussetzungen​

Um den Entwicklungsserver zu starten :​

  • Wechseln Sie in das Plugin, das die Anwendung enthält, in den Ordner, in dem sich die Datei package.json befindet (normalerweise ist sie im Stammverzeichnis des Vue.js-Plugins)
  • Führen Sie dann "yarn dev" aus (oder "npm run dev", wenn Sie sich nicht im Repository bluemind-all befinden): Ein Entwicklungsserver (Live-Reload aktiviert) wird dann ausgeführt. Der Server läuft unter http://*:9180/

VSCode-Konfiguration (empfohlener Herausgeber)​

  • Bearbeiten Sie über Datei > Einstellungen > Einstellungen
{
    "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",
        ]
    },
}
Achtung

Wenn der Webpack-Entwicklungsserver nicht automatisch die Quelldateien neu kompiliert, wenn sie geändert werden, liegt dies wahrscheinlich an einer unzureichenden Anzahl von "inotify Watchern": https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers

GWT-Umgebung​

Voraussetzungen​

  • Eclipse 2022-09 installiert.

Installation :​

Wenn ein Fehler mit Mylin Commons auftritt:

Um den Entwicklungsserver zu starten :​

  • Klicken Sie mit der rechten Maustaste auf das Projekt, das das JS-Bündel bereitstellt (zum Beispiel net.bluemind.ui.adminconsole.main für die AC), dann "Als" und schließlich "GWT-Entwicklungsmodus mit Jetty"
Achtung
  • Wenn eine Meldung wie diese "could not find any host pages in project" beim Start des Servers erscheint: Klicken Sie mit der rechten Maustaste auf das Projekt / Eigenschaften / GWT / Web Application und wählen Sie die Option "This directory has a WAR directory" (und konfigurieren Sie den Ordner, z.B. web-resources).
  • Wenn diese Fehlermeldung erscheint:

    Es gibt mehrere mögliche Gründe:
    • Mit dem devmode kann es notwendig sein, eine IP-Adresse für den GWT-Dev-Server anzugeben. Es kann in Run Configuration / Argumenten festgelegt werden, indem ein Parameter "-bindAddress 0.0.0.0" angegeben wird (zum Beispiel)
    • Sie haben ein Problem mit der Content Security Policy (schauen Sie in die Konsole). Lesen Sie den Abschnitt "Bei Problemen mit CSP" im devmode.
    • Sie haben ein Problem mit Mixed Content Security (überprüfen Sie die Konsole). Lesen Sie den Abschnitt "Bei Problemen mit HTTPS" im devmode.
  • Wenn diese Fehlermeldung erscheint : 
    [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)

Sie können ihn getrost ignorieren. Die umliegenden Kontrollen sollen dies verhindern - die verwendete JRE-Implementierung hat diese Funktion entfernt.

Umgebung Closure​

Voraussetzungen​

  • Erstellen Sie die leeren Dateien /root/dev-unsecure-cookies und /root/dev-no-csp auf Ihrer VM und starten Sie den Dienst bm-webserver neu
  • Kompiliert in open/ui : 
    mvn -Dmaven.test.skip=true clean install

Um den Entwicklungsserver zu starten :

  • Führen Sie im Ordner open/ui das Skript plovr.sh aus
  • Auf http://localhost:9810 sind die verschiedenen Konfigurationen (~Anwendungen) aufgeführt, die von plovr verwaltet werden
info
  • Praktische Plovr-Konfigurationen (in die URL einfügen, direkt nach index.html, zum Beispiel: https://virt.bluemind.loc/contact/index.html?mode=RAW)
    • ?level=QUIET, um die Warnungen nicht über der Anwendung anzuzeigen,
    • ?mode=RAW, der es ermöglicht, im unkompilierten Modus zu sein (alle JS im Klartext).
  • Weitere Informationen zur Konfiguration und den verfügbaren Optionen in plovr: http://plovr.com/options.html

Den Reverse Proxy konfigurieren​

info

Konfigurieren Sie Ihre Entwicklungsumgebung so, dass die richtige JS-Datei (die in Entwicklung befindliche) vom BlueMind Webserver, der auf Ihrer VM installiert ist, konsumiert wird.

Über das devmode-Plugin (empfohlene Methode)​

Vorteil

Erfordert keinen Reverse Proxy auf dem Entwicklungsrechner.

Voraussetzungen​

Paket bm-plugin-webserver-devfilter auf seiner VM installiert.

Umsetzung​

  • Eine Konfigurationsdatei wird automatisch erstellt (/etc/bm/dev.json) beim Installieren des Pakets (nur, wenn keine vorhandene Konfigurationsdatei erkannt wird).
  • Fügen Sie "IP_DE_VOTRE_HOST_SUR_RESEAU_VM dev.bluemind.test" in die /etc/hosts Ihres Hosts ein.
  • Starten Sie auf dem Host den Entwicklungsserver.

Anmerkungen​

  • Ändern Sie im Konfigurationsdokument das Feld 'active' der Filter, um sie zu aktivieren.
  • Starten Sie bei jeder Änderung der conf-Datei den bm-webserver neu oder fügen Sie "?reload-devmode" zur URL hinzu (z. B.: /cal/index.html?reload-devmode).
  • Zwei besondere Filter, die immer aktiv bleiben können, um in Closure zu entwickeln: der Filter zum Deaktivieren von Appcache und der andere auf /input/.
  • Sie können die Standardeinstellungen für den Entwicklungsmodus über den folgenden Link konfigurieren konsultieren oder herunterladen.

Im Falle eines Problems mit HTTPS / Mixed Content Security​

Es gibt zwei Möglichkeiten:

  • Starten Sie den Browser im "unsecure-Modus" :
  • Wechseln Sie in den vollen HTTP-Modus:
    Standardmäßig leitet BlueMind HTTP zu HTTPS um. Sie müssen daher die folgende Konfiguration zu Ihrem Nginx (auf Ihrer VM) hinzufügen.
    In diesem Beispiel ist bluemind.virt die URL für den Zugriff auf Ihre VM und bluemind-dev.virt die URL für den Zugriff über HTTP. 
    server {
     listen 80;
     server_name bluemind-dev.virt;

     location / {
       proxy_pass https://bluemind.virt;
      }
    }

Bei einem Problem mit CSP​

BlueMind CSP blockiert die Anfrage?

Sie müssen touch **/root/dev-no-csp** ausführen und bm-webserver neu starten

Authentifizierung mit HTTP:// nicht möglich​

Löschen Sie den Anwendungscache, insbesondere die Cookies, erstellen Sie die Datei /root/dev-unsecure-cookies und starten Sie bm-webserver neu.

Bei Problemen mit HSTS​

  • In der VM muss die Zeile, die den Header add_header Strict-Transport-Security max-age=15768000; in der nginx-Konfiguration hinzufügt, entfernt werden: /etc/nginx/sites-enabled/bm-client-access
  • Dann starten Sie nginx neu: nginx -s reload
  • In google-chrome/chromium ist es notwendig, den HSTS-Cache zu leeren (chrome://net-internals / Domain Security Policy / Delete domain security policies).

Debug​

Wenn der devmode nicht funktioniert, ist dies wahrscheinlich auf die beiden oben genannten Probleme zurückzuführen.

Wenn nicht, versuchen Sie die folgenden Schritte, um Ihr Problem zu qualifizieren:

  • Ist die VM in Ordnung?
  • Entwicklungsserver gut gestartet?
  • Ping des Hosts von der VM?
  • Curl die JS von der VM aus gesucht (Firewall-Problem?)
  • Regeln in /etc/bm/dev.json korrekt?

Über einen Reverse-Proxy​

Voraussetzungen​

Der Reverse Proxy Nginx, Apache oder Caddy muss auf seiner Entwicklungsmaschine installiert sein.

Hinweise:

  • bluemind.host : URL für den Zugriff auf den installierten BM-Server auf seiner VM
  • bluemind.virt : URL, um den richtigen aktiven JS zu erhalten (denjenigen, den wir auf unserer Dev-Maschine ändern, kompiliert und per live-reload von webpack-dev-server bereitgestellt).
  • Beispiel für /etc/hosts (für ein Linux):

Nginx​

Hinweis : Die geänderte Konfiguration ist die von Nginx auf der Entwicklungsmaschine ****, nicht auf der VM.

Beispiel:

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

Mit Caddy und dieser Konfiguration sind die Dateien /root/dev-unsecure-cookies und /root/dev-no-csp NICHT erforderlich.

{
    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
    }
}
Letztes Update