Connecting HTML,CSS, & JS Nodes together

General
1

Hi all, I am still new to NodeRed although I do have HTML/CSS experience I am now learning JS and trying to create 3 different nodes to mimick what I would traditionally do with a basic website with seperate .html, .css, & .js files. I tried connecting 3 template nodes and it sort of worked except the CSS & JS just post as plain text and don't actually register as code.

Below is a screenshot of my current flow(at the top, all HTML,CSS, JS written in a single node) and the bottom one is what I am trying to achieve as writing everything inside one HTML file with SCRIPT & STYLE tags gets bloated really quickly and will make coding larger projects very tough. I have made the bottom flow before but this setup posts the CSS & JS code as just plain text.

I tried making 3 separate HTTP In nodes, one for each file and that did not seem to work either. please note that Javascript is not my strong suit yet, so I could be overlooking something super simple. I am able to make basic calculators, text adventures, etc in a traditional environment with JS but I am stuck on how to get this to work in NodeRed.

Screenshot (1)
Screenshot (1)1920Ă—1080 147 KB

any help appreciated!

2

There are multiple ways to do this.

I prefer to keep javascript and styles separated and serve them as files, something like this:

image
image1670Ă—506 51.5 KB

example flow

[{"id":"6071f0af2ed211e6","type":"http in","z":"8aa61ed1e94ccd2a","name":"","url":"/mysite/lib/:file","method":"get","upload":false,"swaggerDoc":"","x":170,"y":140,"wires":[["9491f5feaa274515"]]},{"id":"dba413b62e31dbce","type":"http response","z":"8aa61ed1e94ccd2a","name":"","statusCode":"","headers":{},"x":790,"y":140,"wires":[]},{"id":"9491f5feaa274515","type":"switch","z":"8aa61ed1e94ccd2a","name":"","property":"req.params.file","propertyType":"msg","rules":[{"t":"eq","v":"alpine.min.js","vt":"str"},{"t":"eq","v":"echarts.min.js","vt":"str"},{"t":"eq","v":"styles.css","vt":"str"}],"checkall":"false","repair":false,"outputs":3,"x":350,"y":140,"wires":[["9328b0100f258fea"],["074b686e07ec3001"],["e224b10b34c612f5"]]},{"id":"9328b0100f258fea","type":"template","z":"8aa61ed1e94ccd2a","name":"alpine.min.js","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"console.log('file: alpinejs')\n","output":"str","x":550,"y":100,"wires":[["dba413b62e31dbce"]]},{"id":"074b686e07ec3001","type":"template","z":"8aa61ed1e94ccd2a","name":"echarts.min.js","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"console.log('file: echarts')\n","output":"str","x":560,"y":140,"wires":[["dba413b62e31dbce"]]},{"id":"e224b10b34c612f5","type":"template","z":"8aa61ed1e94ccd2a","name":"styles.css","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"body{\n    font-family:sans-serif;\n    background:#999;\n}\nh1{color:#fff;}","output":"str","x":540,"y":180,"wires":[["dba413b62e31dbce"]]},{"id":"6d09e297c6b043bb","type":"template","z":"8aa61ed1e94ccd2a","name":"html","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<html>\n<head>\n    <script src=\"lib/alpine.min.js\"  type=\"text/javascript\" ></script>\n    <script src=\"lib/echarts.min.js\" type=\"text/javascript\"></script>\n    <link rel=\"stylesheet\" href=\"lib/styles.css\" >\n</head>\n<body>\n<h1>Test</h1>\n</body>\n\n</html>","output":"str","x":530,"y":260,"wires":[["dba413b62e31dbce"]]},{"id":"a83c4339d5cc13af","type":"http in","z":"8aa61ed1e94ccd2a","name":"","url":"/mysite","method":"get","upload":false,"swaggerDoc":"","x":370,"y":260,"wires":[["6d09e297c6b043bb"]]}]
3

Without wishing to sidetrack you too much. Have you considered using UIBUILDER? That gives you the ability to work on your "traditional" files since that's exactly what it uses. There is a web editor built into the node but you also get a link to use your own editor (pre-configured for local VScode at present, the next release will let you customise the link).

You get lots of other helpers as well but basically, you get to work with your standard web development workflow but also get integrated data comms between node-red and the client browsers.

I think you may find it easier to work with than the core http nodes for what you've stated.

In addition, it gives you options for minimising JS code but it follows HTML/CSS/JS standards and so lets you mix and match approaches however you like and helps you learn as you go.

4

Thank you, that's what I was trying to go for!

5

Thanks! This works perfect for me and much simpler!

1 Like
6

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