Which IDE and/or tools are you using for creating / maintaining Node-RED nodes?

Developing Nodes
1

Hi,

For the people maintaining and creating Node-RED nodes:
which IDE (Integrated development environment) and/or tools are you using for doing this ?

It would love to hear more about this.
Jan.

2

Microsoft VSCode. It is, like Node-RED, built using Node.js and is ideal for developing nodes.

I use Vivaldi as a browser (Chromium based) and make extensive use of the developer tools.

Git and GitHub of course to manage source code.

As I develop on Windows, I use Kitty for SSH (an enhanced version of PuTTY) and WinSCP for file transfers and direct edits on server files.

I make full use of npm's capabilities for running scripts - especially it's ability to have a cross-platform Node.js "bin" scripts that run on Windows, Mac, Linux.

I now have a custom script that lets me develop a node's html file in its 3 constituent parts (JavaScript, admin panel html and help html) and automatically reconstitutes them into the full file. It includes a simple watcher.

3 Likes
3

I am using VSCode. The workspace contains the following:

  • a Node-RED git working copy
  • my nodes
  • a runtime directory for NR
  • a launch task for Node-RED which starts NR with the runtime dir in the workspace

My custom nodes are linked via npm link in the runtime directory. This way you can use the debugger integrated into VSCode.

The whole workspace is under git version control. My own nodes are in separate repos and added as git submodules.

1 Like
4

@kuema @TotallyInformation thanks a lot for your responses.

I don't dare to claim otherwise, while you both are pointing your arrow at my head in the footer of the top post :grinning:

A colleague of mine is also proposing Microsoft VSCode - that makes three in row. So I will give that a shot.

5

You're welcome!

I have tried many IDEs and enhanced text editors over the years. I have used Eclipse and Netbeans mainly for larger Java projects before, and wasn't satisfied with the tooling they provided for NodeJS, Typescript and web development. In my opinion VSCode suits this task very well!

I now use it a lot at work in a Windows environment, and at home under Linux for my private projects.

EDIT: When I find the time, I plan to create a template workspace with the structure I mentioned in my post and publish it on Github.

1 Like
6

I should have also said that I "install" my developing nodes using npm install /path/to/source/code which means that all I have to do is to restart Node-RED in order to get the latest update (and reload the browser tab containing the admin ui if I've changed the admin panel).

PM2 or NodeMon is useful to easily restart Node-RED.

If you need to get into the weeds debugging Node-RED code, you can do that direct from VScode though I've started simply using the --inspect argument when starting Node-RED since Vivaldi recognises that you are using it and presents a developer ui window that includes the stdout, etc so you can see the log output as well has do the usual debugging tasks.

1 Like
7

Say that last part again.... Where do you put the --inspect ?

8

From my master package.json, a selection of options for starting and debugging:

  "scripts": {
    "start": "nodemon --ext js,html node_modules/node-red/red.js --userDir ./data",
    "start2": "set DEBUG=express:* & nodemon node_modules/node-red/red.js --userDir ./data",
    "start3": "node node_modules/node-red/red.js --userDir ./data",
    "doctor": "clinic doctor -- node node_modules/node-red/red.js --userDir ./data",
    "bubble": "clinic bubbleprof -- node node_modules/node-red/red.js --userDir ./data",
    "inspect": "node --inspect node_modules/node-red/red.js --userDir ./data",
  },
3 Likes
9

hmm - so where does this panel appear (not getting yet....)
Though adding dashboard as a web panel it quite nice :slight_smile:

10

image

Ah, it is possible that I missed a configuration step for you :slight_smile:

From the debug menu, open or add a configuration, here is what I have for my main NR dev installation:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "Attach by Process ID",
            "processId": "${command:PickProcess}"
        },
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}\\node_modules\\node-red\\red.js"
        }
    ]
}

When I start with --inspect, I get this in the status bar:

image

So VSC worked out that I started something with --inspect and auto-attached to it.

11

Unpopular opinion probably :stuck_out_tongue:: I've been using InteliJ IDEs for years, so I'm still using those when working on nodes. I tried to use VS Code but I'm so used to code analysis/code assistance while typing (I often hit the wrong keys while trying to type) that a few tedious debugging sessions taught me that it might be better for me to stick with the tools I'm used to.

12

sorry - it was the bit about Vivaldi auto recognising it that piqued my interest... where does it auto open ?

13

Oh, sorry.

image

Once the debugger starts up (you might need to turn off the auto-break on exceptions), open the Node-RED editor. Then open the developer tools. You will see an extra, green, node.js icon:

image

Click on that and you get a new widow that shows you all sorts of interesting things such as the log output, sources, etc.

image
image.png802Ă—326 23.6 KB