Skip to main content

Frontend / UI

Frontend Environments​

Prerequisites​

  • VM with BlueMind version 5.0 or above up and running.

VueJS Environment​

Prerequisites​

To start the development server:​

  • Go to the plugin that contains the application, in the folder where the package.json is located (typically, it is in the root of the Vue.js plugin)
  • Run "yarn dev" (or "npm run dev" if you aren't in the bluemind-all repository): a development server (live-reload enabled) starts. The server is launched at http://*:9180/
  • Edit via Files > Preferences > Settings
{
    "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",
        ]
    },
}
caution

If a Webpack Dev server doesn't recompile the source files immediately when they are modified, this is probably caused by an insufficient number of "inotify watchers": https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers

GWT Environment​

Prerequisites​

  • Eclipse 2022-09 installed.

Installation:​

If an error occurs concerning Mylin commons:

To start the development server:​

  • Right-click the project that provides the JS bundle (e.g. net.bluemind.ui.adminconsole.main for the AC), then "Run As" and "GWT Development Mode with Jetty"
caution
  • If a message of this type "could not find any host pages in project" appears when the server is launched: right-click on the project / Properties / GWT / Web Application and select the "This directory has a WAR directory" option (and configure the folder, web-resources for example).
  • If this error message appears:

    There are several possible reasons:
    • With devmode, you might have to specify an IP address for the GWT dev server. This is done in Run Configuration / Arguments, by adding a parameter "-bindAddress 0.0.0.0" (for example)
    • You have a Content Security Policy issue (check in the console). Go to devmode's CSP issues section
    • You have a Mixed Content Security issue (check in the console). Go to devmode's HTTPS issues section
  • If this message appears: 
    [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)

You can safely ignore it. The surrounding controls are there to prevent this from happening - the JRE implementation used has removed this feature.

Closure Environment​

Prerequisites​

  • Create empty files /root/dev-unsecure-cookies and /root/dev-no-csp on your VM and restart the bm-webserver service
  • Compilation in open/ui: 
    mvn -Dmaven.test.skip=true clean install

To start the development server:

  • In open/ui, run the script plovr.sh
  • The list of the different configurations (applications) managed by plovr can be found at http://localhost:9810
info
  • Useful Plovr configurations (to add to the URL, right after "index.html", e.g.: https://virt.bluemind.loc/contact/index.html?mode=RAW)
    • ?level=QUIET to stop warnings being displayed above the application,
    • ?mode=RAW puts you in uncompiled mode (the entire JS essentially)
  • For more information on Plovr configuration and options, visit: http://plovr.com/options.html

Configuring the reverse proxy​

info

You must configure your development environment so that the correct JS file (the one that is being developed) is consumed by the BlueMind webserver installed on your VM.

Advantage

No need for a reverse proxy on the development machine.

Prerequisites​

The bm-plugin-webserver-devfilter package installed in your VM.

Implementation​

  • A conf file is automatically created (/etc/bm/dev.json) when the package is installed (only if no existing conf file is detected)
  • Add "YOUR_HOST_IP_ON_THE_VM_NETWORK dev.bluemind.test" in your host's /etc/hosts folder
  • Still in the host, start the development server

Remarks​

  • In the conf file, change the filters' "active" field to activate them.
  • Every time you change the conf file, restart bm-webserver or add "?reload-devmode" to the URL (e.g.: /cal/index.html?reload-devmode)
  • Two specific filters can be left active to develop in Closure: the one that deactivates the appcache and the other on /input/
  • You can view or download devmode default configuration here

Issues with HTTPS/Mixed Content Security​

There are two solutions:

Issues with CSP​

If the BlueMind CSP blocks the request?

You need to touch /root/dev-no-csp and restart bm-webserver

Unable to authenticate with HTTP://​

Empty the application cache, especially cookies, create the file /root/dev-unsecure-cookies and restart bm-webserver.

Issues with HSTS​

  • On the VM, you must delete the line that adds the header add_header Strict-Transport-Security max-age=15768000; in the nginx configuration: /etc/nginx/sites-enabled/bm-client-access
  • Restart nginx: nginx -s reload
  • In google-chrome/chromium, you must empty the HSTS cache (chrome://net-internals / Domain Security Policy / Delete domain security policies)

Debugging​

If devmode doesn't work, the cause is probably either of the two issues mentioned above.

Otherwise, try the following steps to pinpoint your issue:

  • Is the VM ok?
  • Has the development server been launched?
  • Ping the host from the VM?
  • Curl the JS you want from the VM (firewall issue?)
  • Are the rules defined in /etc/bm/dev.json correct?

Via un reverse proxy​

Prerequisites​

The reverse proxy Nginx, Apache or Caddy must be installed on the development machine.

Remarks:

  • bluemind.host: BM server access URL installed on your VM
  • bluemind.virt: URL used to have the correct JS active (the one yo modify on your dev machine, compiled and served in live-reload by webpack-dev-server).
  • Example of /etc/hosts (for Linux):

Nginx​

Remark: the modified configuration is the Nginx configuration on the development machine, not the VM.

For example:

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

With Caddy and this configuration, the /root/dev-unsecure-cookies and /root/dev-no-csp files are NOT required.

{
    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
    }
}
Last updated on