Split custom node HMTL file to make it easier to develop

Hi Nick & Dave,

A request that I didn't manage to get into the questionaire recently.

When developing custom nodes, it is much harder than it should be to work with the admin front-end code (the html file).

This is because it uses <script type="text/x-red" ... sections to hold the actual html and this doesn't play nicely with code editors and IDE's.

I actually think that it would be much easier to develop if that file could be split into its 3 component parts - perhaps with a naming convention so that Node-RED can assemble things as expected.

This would need to be optional of course since otherwise lots of things would break so both methods would need to be supported. However, it really would make things a lot easier.

I guess one way of achieving this would be to allow the script tags to use src= to allow the code to be loaded from another file. That would actually work well since it would hopefully require minimal changes to Node-RED itself.



No official response as yet. However, I finally got fed up enough to do something locally.

I've created a simple script that lets me develop the node's html file as 3 separate files, 1 for each of the script tags. The script is run via npm which makes it fully cross-platform.

It isn't ideal since I have to remember to run the script before pushing to GitHub but I use npm's automation to also run it automatically before publishing.

I have documented everything in the following blog post in case anyone else wants to do something similar:

1 Like

Hi. I too dislike this arrangement...

... And would prefer the sections to be separated to permit easier editing.

+1 from me however I hope your workaround is not the final solution. Not that it's bad, if just prefer it to be baked in.

1 Like

Nice solution using npm.

Before I found your idea, I have developed my own T4 templates for building custom Node-Red nodes. They use separate .tt files, each generating either .js or .html file and then the main .tt that combines all files from all custom nodes into a single .js and a single .html with proper headers...

On top of combining the files, it also automates some of the common tasks, such as building editor foms using a simple C# template code, which then generates the final .js handling all ids...

Same with the registration or event handling - I've added a set of useful template methods so these common areas use a single line or so instead of repeating similar code for each node.

Unfortunately this solution isn't as portable as yours as it relies on t4 processing using Microsoft texttemplating ... however, it may be possible to build this as a dedicated command-line tool to perform all transformations - still, it would use C# internally for templates.

You should note that I've now been informed that the old <script type="text/x-red" sections are no longer required.

You can now use <script type="text/javascript" for the Javascript section and <script type="text/html" for the 2 HTML sections. That means that, even as a single file, your IDE or code editor should highlight and lint them correctly.

Personally, I still tend to keep them in 3 parts because I find it easier to navigate.