Sample flow for including JS file

I am trying to build a flow to generate and display an html-page with an included js files.

As this is on the edge of my capabilities and it took me a little effort to set up my docker system I would like to test it before digging into the real application.

So I set up a simple "hello world" flow. Could anyone help me with a very simple JS file that does just anything to show me if my setup works?

[{"id":"1ddb1a13.7a2ece","type":"http in","z":"66d2aa97.2a88b4","name":"/helloworld","url":"/helloworld","method":"get","upload":false,"swaggerDoc":"","x":810,"y":780,"wires":[["eec946da.dc757"]]},{"id":"c7a6dcd3.af8588","type":"inject","z":"66d2aa97.2a88b4","name":"Test","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":830,"y":820,"wires":[["eec946da.dc757"]]},{"id":"eec946da.dc757","type":"function","z":"66d2aa97.2a88b4","name":"Text","func":"\nmsg.helloworld = 'Hello World'\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":990,"y":780,"wires":[["b8c47711.60b948"]]},{"id":"b8c47711.60b948","type":"template","z":"66d2aa97.2a88b4","name":"Helloworld","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n<html>\n\n<head>\n    <meta charset=\"utf-8\">\n    <title>Hello World</title>\n</head>\n\n<body id=\"page-top\">\n    <div id=\"wrapper\">\n        <div id=\"content\">\n        {{{helloworld}}}\n        </div>\n    </div>\n</body>\n    <script src=\"/scripts/helloworld.js\"></script>\n</html>","output":"str","x":1150,"y":780,"wires":[["db257253.045928"]]},{"id":"db257253.045928","type":"http response","z":"66d2aa97.2a88b4","name":"","statusCode":"","headers":{},"x":1310,"y":780,"wires":[]}]

Something very simple would be:

console.log('Hli there world')

You would see the output in the developer console of your browser.

If you want to send information back to Node-RED though, you will need a lot more. Of course, you could always use Dashboard or uibuilder. Dashboard builds a single page (with multiple tabs so it looks like several pages but really it isn't). With uibuilder, you put your HTML and JS in files and use the provided front-end library to enable 2-way communications with Node-RED.

There are a few ways to do this, you could serve up the js files from a sever or from a http static folder.
You can also include the js direct in the template.
e.g.

[{"id":"1ddb1a13.7a2ece","type":"http in","z":"bf9e1e33.030598","name":"/helloworld","url":"/helloworld","method":"get","upload":false,"swaggerDoc":"","x":200,"y":1540,"wires":[["eec946da.dc757"]]},{"id":"eec946da.dc757","type":"function","z":"bf9e1e33.030598","name":"Text","func":"\nmsg.helloworld = 'Hello World';\nmsg.js = `alert('hi')`;\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":380,"y":1540,"wires":[["b8c47711.60b948"]]},{"id":"b8c47711.60b948","type":"template","z":"bf9e1e33.030598","name":"Helloworld","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n<html>\n\n<head>\n    <meta charset=\"utf-8\">\n    <title>Hello World</title>\n</head>\n\n<body id=\"page-top\">\n    <div id=\"wrapper\">\n        <div id=\"content\">\n        {{{helloworld}}}\n        </div>\n    </div>\n    <script>\n        {{{js}}}\n    </script>\n    </body>\n\n</html>","output":"str","x":540,"y":1540,"wires":[["db257253.045928"]]},{"id":"db257253.045928","type":"http response","z":"bf9e1e33.030598","name":"","statusCode":"","headers":{},"x":700,"y":1540,"wires":[]}]

a simple example the shows a pop up.

thanks.
I tried setting up a http static folder. To test this I would copy the single JS-command in a textfile and save it as helloworld.js - right?

... does not work - I seem to do something wrong accessing the static folder...

please help.
I set the httpStatic as:

    functionGlobalContext: {
        // os:require('os'),
        // jfive:require("johnny-five"),
        // j5board:require("johnny-five").Board({repl:false})
		httpStatic:'/data'
    },

My docker is set up as:
grafik

The http insert looks like:

    <script src="/scripts/helloworld.js"></script>

I copied the file here:
grafik

The content of the file is:

alert('hi')

Shouldn't this work?

You have put httpStatic inside the functionGlobalContext setting. That is incorrect.

Your settings file should already have a commented out httpStatic example - find it, update it and uncomment it.

thanks.
found it. changed it.
still does not work

now it works.

working setup:

httpStatic:'/data/static'

mounted path

/data

scripts in:

[origin path]/scripts

html code

 <script src="/scripts/helloworld.js"></script>

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