cannot add JS source from tutorial, ERR_ABORTED 404 / blocked due to MIME type (“text/html”) mismatch

[Kokodora]

Hello everyone,

when I try to add a JS file, i get the error 'GET http://localhost:8080/dist/http.js net::ERR_ABORTED 404 (Not Found)'.
I want to use the 'html.js' file from the tutorial to load my dictionary, but can't get it to work with adding the line
<script src="dist/http.js"></script> to the head of index.html.
The file is definetly there. In firefox I get the error 'The resource from “http://localhost:8080/dist/http.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff)'.
I also get the same errors when I try to load the Plugins from the tutorial the same way.

When I add the plugins to '/src/plugins.js' I can install them via, for example, 'openmct.install(openmct.plugins.FLEXOPPlugin());' in the index.html. But then I get stuck in the plugin, since 'html' is used in the 'getDictionary()' function from the tutorial, but is here not defined. The error I get: 'FLEXOP-plugin.js?511e:12 Uncaught (in promise) ReferenceError: html is not defined'

I am quite new to programming in HTML/JS, so maybe it is something obvious I am missing.

My general use-case:
I set up a telemetry display based on the OpenMCT Tutorial for monitoring UAV data at my University. As the application is now working, I wanted to implement the plugins in the new OpenMCT v1.0. If this is a wrong approach altogether, any guidance on how to achieve this would also be greatly appreciated.

If this is the wrong place to ask such questions, or if the question was not asked the right way, feel free to tell me and maybe suggest a better place/way to ask.

Thanks in advance!
Marius

[mudinthewater]

Hey @Kokodora! Glad to see people using MCT in a university setting.

Okay so a couple things to break down here.

First off, it sounds like you're using the http.js file in the tutorial. I'd recommend instead of doing that, to replace that library with fetch calls in javascript.

For example:

return fetch('url').then(function(response){
return response.json()
}

would roughly accomplish the same thing that the http.js file does, with no need to source another file!

But assuming you want to include that library, there are some intricacies you need to keep in mind.

When using "npm start" in development mode, you need to source it in index.html with the path to the file you're developing on relative to the base openmct folder. For example, lets say you are keeping it in lib/http.js like the tutorial, you'd need to source it as:

<script src="lib/http.js"></script>

from openmct/index.html

Now, when you're running from dist after a build, it's different.

When you run npm run prepare to dist, you would need to include all of your files in webpack so that they are minimized and delivered to dist along with your application. Then the index.html in dist needs to source those files instead. Note that index.html in dist isn't the same as index.html in /openmct, as it needs to source minimized files, not your dev ones.

So basically, if you store your development files in /lib/http.js,mytlmplugin.js and configure webpack to minimize and put them in dist, you would end up with a package in dist that looks like this:
openmct.js
... (css favicon/etc)
mytlmplugin.min.js (has both http.js, and your plugin along with any other *.js files you told webpack to put in it)

then in index.html, you'd need to include a

<script src = "mytlmplugin.min.js"></script> along with a source openmct.js

That way you can cd into the "dist" folder and run "serve" from there, or have a webserver serve that folder directly.

Another option is to build your plugin into the openmct.js file directly - I tend not to do that so that I can build MCT off whichever release/commit I want, but also separately rebuild my minimized plugins.

Hope that helps!

[mudinthewater]

Oh yeah, one more thing!

If you're developing without a prebuilt MCT, you'll want to update your app.js so that it serves your development files.

I do this the lazy way with:

app.use(express['static'](options.directory));

This is probably what resulted in your error above.

[Kokodora]

Hey @mudinthewater,

thank you very much for this thorough answer! It really helped me a lot, and I got it now going with fetch commands and the additional app.use command.
If you have the time, I got some other questions:
I need to adapt plugins regularily to different UAVs, so I have to change some code regularily. If I am already satisfied with the performance, is there any reason I should not run in developement mode (npm start)?
In some other issue I read, that I should not use the node.js servers from the tutorial in any production environment, but an industry standard web server like Apache. In my case, I planned to have a node.js telemetry server running in the GCS providing telemetry (only telemetry, nothing big like video, 20 channels, ca. 10Hz) to up to three subscribers. The subscribers are GCS Laptops, each running an instance of OpenMCT. Since this is not a very high performance application, do you think the node.js servers will be sufficient?

Greetings and thanks again!
Marius

[mudinthewater]

Glad that worked for you! The issue with running node in a production environment is largely security related and reliability related. With apache or nginx you can set up authorization and SSL to harden your web server. And they are both very reliable and have multitudes of tutorials set up to help you.

I generally don't recommend running on node except for development.

When you run npm run prepare, everything you'd need to have apache/nginx serve is placed in the dist folder (may need to modify webpack config to copy your plug in code in or copy it yourself). Every time you start with node it does the same build process that npm run prepare does, so there's no time lost except the installation of a server, and it will get you security, compression, reliability, and speed.

[Kokodora]

Hey, thanks for your swift and very helpful answers and sorry for the late reply. I finished my semester thesis now and we want to do a workshop about how to use OpenMCT at TUM now. For this purpose it would be very helpful, if we would know, whether we can make my repository public. Additionally I did a Youtube Playlist on how to implement OpenMCT with my repo (https://www.youtube.com/playlist?list=PLoL0AZZFIPrAHuTyXgufCHGhMFOKY5Sz0) at the moment it is not public and only people with the link can watch it.
I contacted NASA about this via [email protected], but did not get any answer. Could you maybe point me once again in the right direction on who to contact to verify, that I can make it public.

Greetings,
Marius

[mudinthewater]

Hey @Kokodora - I'm not sure I can provide an answer to that. You'd most likely need to contact your organization's export control department about publishing your code and any markings/copyright associated with it. I looked at the videos and your adaptation looks great!

[Kokodora]

Okay, so it should not be a problem from the NASA side? Since it is distributed with the Apachw 2.0 Licence, I need to mark modified files. Does this include modifications, like the installing/adding of plugins and changing of styles?
Sorry to bother you with those questions, if you don't know, no problem and thanks again for the rapid answers.