Using js file with imported modules in html

Developing Nodes
1

In my node's html file I included script file
image

This file imports/requires npm packages, which I have listed in dependencies and I know they exist.
image

When I try loading this up in Node-RED it give's me error that it cannot find the module.

It also gives some errors about having /, ./ or ../ in the path, but that should not be necessary because it is a global module. If I include ./ws it still throws error.

Any idea on why it is behaving like this? And how shall it be done

2

The HTML file runs in the context of your browser and not the Node-RED server - it communicates back to the server via websockets.

So you cannot mix up node.js modules with the html code as that won't ever work.

If you describe what you are trying to achieve, someone may be able to help further.

3

Well I am trying to send a websocket or http request from onEditPrepare to alter some properties from server.

4

OK, the normal way to do this is for your node to include a REST API. You can then call that using jQueries helpers from the front end. There is a simple example in the code of the core serial node. More extensive examples are available in the uibuilder node.

25-serial.js - node-red/node-red-nodes - GitHub1s

25-serial.html - node-red/node-red-nodes - GitHub1s

5

Why are you attempting to affect something server side from the configurations page of your node?

Typically you might request something (like available com ports) but it's not the normal pattern to change something server-side.

6

Let me clarify, I am trying to populate a dropdown in node's properties, and I am doing it in onEditPrepare. The data that I want to get has to be parsed from the web, because it changes dynamicaly. So I need to make an update each time when I do onEditPrepare, thus websocket or http call.

7

In which case can't you use fetch to grab this data and process it client side?

8

I THINK I know what you are looking for.

you mean the config dialog in the Node-RED editor?

This is how I do it (don't know if it's right but works for me)

in your yourNode.js inside your main function you establish a listener for http requests

            RED.httpAdmin.get("/yourNode/"+node.id, RED.auth.needsPermission('your-node.read'), function(req,res) {
                console.log(`http request "${req.query.query}" from ip: ${req.headers.host}`);
                var returnItems = []; // list of Items to send back to the frontend
                var config = req.query;
                switch (config.query) {
                    case 'sendMe':
                        returnItems = ['take this'];
                        break;
                    default:
                        returnItems = `Error! query "${config.query}" unknown`;
                        break;
                }
                res.json(returnItems);
            })

and in your yourNode.html (where it suites you) you call your listener and get the data in the done callback

        $.getJSON("/yourNode/"+node.id, {'query': query, 'params': params })
        .done( (data => {console.log('I got this',data)}))
        .fail( function(e1, e2, e3) {
            console.log("Error : " + JSON.stringify(e1));
        });

I pulled the code out of one of my node and simplified it a little bit, hope I made no mistake as I did not tested it

If there is a better way perhaps someone can correct me :wink:

9

This is the method used by the Serial node that Julian linked to previously.

But a very important bit is to not start the path with a / in the html side. That means it will work even if httpAdminRoot has been set to move the editor to a different root URL.

So the above but if code should be:

$.getJSON("yourNode/

10

I got it working using browserify, not the cleanest solution but it works :smiley:

11

@knolleary, thank you for pointing me to this problem!

@TotallyInformation sorry for not following the provided links. Was reading on my mobile at the beginning.

12

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.