Skip to main content

Frontend/UI

Frontend Environments​

Prerequisite

VM with Bluemind version 4.8 or above up and running.

VueJS Environment​

Prerequisite

NodeJS installed from the official website (version 8 or above). NPM installed with NodeJS. Yarn installed from the official website (version 1.12 or above).

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",
        ]
    },
}
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​

Prerequisite

Eclipse 2022-03 (minimum) installed

Installation:​

  • Install the "GWT Eclipse Plugin" (via Eclipse Marketplace)
  • During the installation of the plugin, check GWT 2.8 only.

To launch 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"
danger
  • If a message such as "could not find any host pages in project" appears when the server starts: right-click the project / Properties / GWT / Web Application and select "This directory has a WAR directory" (and configure the folder, e.g. web-resources).
  • If this 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

Closure Environment​

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

To launch 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

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: doesn't require a reverse proxy on the development machine.

Prerequisite

The bm-plugin-webserver-devfilter package installed in your VM. If you don't have access to devmode, you just need to compile the package by going to the "devmode/" folder.

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:

Just do a touch /root/dev-no-csp and restart HPS.

Unable to authenticate with HTTP://​

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

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

Either Nginx or Apache reverse proxy must be installed on your 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).
  • /etc/hosts example (for Linux):

Nginx​

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

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]
 
Last updated on