Issue while attempting to open the MQTT Board from localhost

Hi here,

I was able to launch the simplematter/waterstream-kafka-devbox:beta version on my Intel Ubuntu machine, but unluckly I am facing the following issue while attempting to open the MQTT Board from localhost:

...
State transition from REBALANCING to RUNNING
/opt/http/content/mqttboard/index.html:  Wrote 1383 bytes.
File does not exist:  /opt/http/content/js/app.4f4ce8e8.js
File does not exist:  /opt/http/content/css/app.614fd5f4.css
File does not exist:  /opt/http/content/js/vendor.e0e2cf4d.js
File does not exist:  /opt/http/content/js/runtime.2fc17b8c.js
File does not exist:  /opt/http/content/js/app.4f4ce8e8.js
File does not exist:  /opt/http/content/js/runtime.2fc17b8c.js
/opt/http/content/mqttboard/index.html:  Wrote 1383 bytes.
File does not exist:  /opt/http/content/css/app.614fd5f4.css
File does not exist:  /opt/http/content/js/vendor.e0e2cf4d.js
File does not exist:  /opt/http/content/js/runtime.2fc17b8c.js
File does not exist:  /opt/http/content/js/app.4f4ce8e8.js
File does not exist:  /opt/http/content/js/app.4f4ce8e8.js
File does not exist:  /opt/http/content/js/runtime.2fc17b8c.js

the outcome of these not existing resources, of course, is that the MQTT Board UI is not rendering on my host.


Inspecting the content of the Docker container, I noticed that the static resources of the MQTT Board client are not under /opt/http/content/, but under /opt/http/content/mqttboard:

bash-4.4> pwd
/opt/http/content/mqttboard/js
bash-4.4> ls
2.41f55c08.js  5.adf841ee.js  6.e0252515.js  7.141d53d9.js  app.4f4ce8e8.js  chunk-common.8b5f601c.js  runtime.2fc17b8c.js  vendor.e0e2cf4d.js

Hi @upescatore
are you working with Chrome?
I noticed that the rendering problem is with this browser.
Firefox (I use by default) works well.

Some screenshot

Firefox

Chrome

Thanks @emmecilab, I am on Firefox as well.
I don’t know if It matters, but I am using Ubuntu 20.04

Ok, I spotted the issue. I think it’s due to the Vue router library used for the front end application. Basically, it looks like it’s using the default hash mode (i.e.: in order to browse through the SPA routes, it uses an anchor element in the URL, see here).

So, browsing through http://localhost:8080/mqttboard does not work, but using http://localhost:8080/mqttboard/#/ (please, mind the #) works without issues.

It works both on Firefox and Chrome.

As a matter of completeness, I suggest to edit the <a> tag in the front page to link to http://localhost:8080/mqttboard/#/.

1 Like

Thanks @upescatore.
With your suggestion it works on Firefox and Chrome.
Great analysis!!

2 Likes

Thanks @upescatore for spotting the problem and suggesting the solution.

Nice catch, thanks! This will go in the next release.

1 Like