Cockpit-greetings-plugin error: Loading module from “http://localhost:8080/camunda/app/scripts/config.js” was blocked because of a disallowed MIME type (“text/html”)

Camunda 7 Topics Discussion & Questions
,
1

Hello!

I was following the blog article at: https://camunda.com/blog/2020/08/all-new-frontend-plugin-system-for-cockpit-starting-with-camunda-bpm-7-14/ to learn how to develop plugins for Camunda Cockpit.

In order to try out the plugin I followed the finished example on github, mentioned in the blogpost.

OS: MacOS Catalina
NPM version: 6.14.4
Container: camunda-bpm-tomcat-7.14.0-alpha2
git repo example name: cockpit-greetings-plugin

How to reproduce:

npm i
npm run build
from folder /dist/% cp plugin.js camunda-bpm-tomcat-7.14.0-alpha2/server/apache-tomcat-9.0.36/webapps/camunda/app/cockpit/scripts

I edited the config.js file in folder: camunda-bpm-tomcat-7.14.0-alpha2/server/apache-tomcat-9.0.36/webapps/camunda/app/cockpit/scripts
to contain: 

export default {
  customScripts: [
    '/scripts/plugin.js'
  ]
}

then starting the server: ./start-camunda.sh

using firefox “inspect element”/developer tools, starting up the apache tomcat server, logging in with demo and navigating to cockpit gives the following error:

Screenshot 2020-09-20 at 22.33.43
Screenshot 2020-09-20 at 22.33.432566×1458 345 KB

Errors from screenshot in text:

1. GET localhost:8080/camunda/app/scripts/config.js - [HTTP/1.1 404  7ms]
2. Loading module from “localhost:8080/camunda/app/scripts/config.js” was blocked because of a disallowed MIME type (“text/html”)
3. Uncaught (in promise) TypeError: error loading dynamically imported module

Full error message for GEThttp://localhost:8080/camunda/app/scripts/config.js

GEThttp://localhost:8080/camunda/app/scripts/config.js
[HTTP/1.1 404  7ms]

	
GET
	http://localhost:8080/camunda/app/scripts/config.js
Status404
VersionHTTP/1.1
Transferred257 B (0 B size)

    	
    Connection
    	keep-alive
    Content-Length
    	3940
    Content-Security-Policy
    	base-uri 'self'
    Content-Type
    	text/html
    Date
    	Sun, 20 Sep 2020 19:21:48 GMT
    Keep-Alive
    	timeout=20
    X-Content-Type-Options
    	nosniff
    X-XSS-Protection
    	1; mode=block
    	
    Accept
    	*/*
    Accept-Encoding
    	gzip, deflate
    Accept-Language
    	en-US,en;q=0.5
    Connection
    	keep-alive
    Cookie
    	JSESSIONID=1BE5BC22C867F9EABA2952F12996BEBA; XSRF-TOKEN=41A06E296FED840F5B9DCE27CF0C5648
    Host
    	localhost:8080
    Referer
    	http://localhost:8080/camunda/app/cockpit/default/
    User-Agent
    	Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:80.0) Gecko/20100101 Firefox/80.0

Is there a setting/configuration of the server/plugin that I missed in the tutorial?
Would the http header: “X-Content-Type-Options” with value “nosniff” have to be changed for this to work or what am I missing?

Thanks in advance for any help on this matter,
Kind regards,
André

2

Hi @andre.norrgard, thank you for trying out the tutorial. I am sorry to hear that it is not working for you.

The requested URL seems to be off - it should be /camunda/app/**cockpit**/scripts/config.js. To find out why this happens, could you please check:

  1. Does the alpha work without changes to the config.js file?
  2. Do you use the Tomcat with camunda pre-installed from our download center or did you deploy the standalone WAR on a tomcat?

You can also try out to run the example from github on alpha3 and see if it works with a newer release. Thank you for your time :slight_smile:

Cheers
Martin

1 Like
3

Thanks for the quick reply!

  1. Yes, the alpha2 works as far as I can login and see process definitions and start a new process, so looking good.
  2. I used tomcat with camunda pre-installed from the download center: https://downloads.camunda.cloud/release/camunda-bpm/tomcat/7.14/camunda-bpm-tomcat-7.14.0-alpha2.zip (also tested alpha3.zip)
    -I still have the same issue when trying to complete the finished example github project.

But I’ve made some progress, using the plugin.js code:

export default {
  id: "myDemoPlugin",
  pluginPoint: "cockpit.dashboard",
  priority: 10,
  render: (node, { CSRFToken }) => {
    node.innerHTML = `Hello World!`;
  }
};

I now got the plugin tutorial working up to “Hello World” (without adding a frontend library):

Screenshot 2020-09-21 at 23.51.40
Screenshot 2020-09-21 at 23.51.403506×2378 1010 KB

(in the working example, the file plugin.css seems to be missing or blocked though)

Will try to continue by completing the “Adding a frontend library” part of the tutorial as well.