Include js in dashboard custom widget frontend

Dashboard
1

I am writing a dashboard node and want include a script in frontend of dashboard. I can use script tag in HTML object. However this way required JS file must be in static folder or a cloud hosting so frontend can access.

if i distribute my widget, I must host my script for others to access or user must manual copy js file to static folder, none is good.

So anyone know how to include js in frontend of dashboard where js file in node module folder. The structure below. Tks for any help

Widget folder
——widget.html
——widget.js
——my-script-need-to-include-frontend.js

2

Nodes run inside the context of Node-RED which actually uses 2 ExpressJS web server "apps". In your case, you want to add a path (ExpressJS middleware) to the user-facing app that is also used by the http-in/-out and Dashboard (and uibuilder) nodes.

You will find some example code in the uibuilder node amongst others.

3

Could you explain more, or help me with sample code. I still not figure out how to do.

Tks a lot

4

Hi Zacharias,

You can have a look at the code of my node-red-contrib-ui-heatmap node. In that node I load a (third-party) javascript library from the server (where the Node-RED flow is running), and I also don't want users have to install anything manually...

  1. I have a javascript library file (heatmap.min.js) located inside a "lib" folder:

    ——heat_map.html
    ——heat_map.js
    ——lib
    ————heatmap.min.js

  2. On the server side a raw HTML string will be generated (which contains the html part for the client-side dashboard). In that code I generate a script tag to load that javascript library file:

    function HTML(config) { 
     var html = String.raw`
     <script src="heatmap/js/heatmap.min.js"></script>
     ...
     `;
     
     return html;
};

  3. And there is some server-side code to respond to the request (from point 2), and return the requested javascript library file:

    var uiPath = ((RED.settings.ui || {}).path) || 'ui';

RED.httpNode.get('/' + uiPath + '/heatmap/js/*', function(req, res){
     var options = {
         root: __dirname + '/lib/',
         dotfiles: 'deny'
     };
    
     // Send the requested file to the client (in this case it will be heatmap.min.js)
     res.sendFile(req.params[0], options)
 });

    The ui_path variable is required because by default the UI path in the settings.js file will be in comment:

    //ui: { path: "ui" },

    But as soon as the user has specified a custom UI path there, we will need to use his custom path:

    ui: { path: "mypath" },

Good luck with it !!!
Bart

5

Here is where I get a reference to the web server app:

Here is an example of adding a folder as a static folder to the web server. In uibuilder there are a number of these but this is the main one:

Anything you add as a path, you need to remove during the "close" event.


1 Like
6

Tks alot for your help. I will try now