📺 Live streaming some Node-RED development work

Trying something a bit different tonight....

If you're interested in how to get started developing Node-RED itself, I'm doing a live stream this evening to walk through adding a new feature to the editor.

It's all pretty informal - I have a rough idea what I'll be doing. And if it goes well, I'll make it a semi-regular thing.

All being well (and the kids obliging at bedtime) I'll be going live at 8pm BST here: https://www.twitch.tv/knolleary - you can join the chat there.

Don't worry if you miss it - a replay will be available afterwards.

10 Likes

Really interesting thanks for sharing Nick, really great insight into how it all works and the effort that you all go to to make this such a fantastic platform. Thank you.

Hi Nick,

this was a lot of fun! Thank you! And I totally agree that a great step forward for NR would be to enable other people to contribute to the core/editor.

I created a PR https://github.com/node-red/node-red/pull/2570 which implements two new editor actions to disable all debug nodes either on the current flow or globally.
I know that I have not discussed that properly on the forum first (I mentioned it in a thread, but no real discussion), but I wanted to give you feedback that the stream actually enabled me to implement this, which I would not have been able to do so in this short amount of time. Especially getting things right like the history.
On the other hand, I would be interested whether this is actually correct what I have done there.

3 Likes

Ah i missed this :frowning:

I had a question on core development - would have been the perfect time to ask.

You're always welcome to ask here :blush:

Will be doing it again next week (all being well...)

@cinhcet thanks. Great to see a PR arrive so soon. Will review the details in the morning. At a glance, the concept is fine, but in this instance, the action needs to live in the debug node's html as it's debug node specific.

1 Like

Just watched the replay, thanks! I can't think of a better way to bring up the confidence of would be future contributors.

1 Like

Bumping this topic as I'll be streaming again tonight.

With the 1.1.0 beta coming very soon, I'm not 100% sure what I'll be working on, so if there's something in particular you'd like me to cover, let me know.

7 Likes

Nick, i noticed in your latest showcase you were using grunt dev so that the client side src isnt minified.

What do you do if you need to debug server side (debug-step debugging in IDE) at the same time?

My preference is to F5 (run) but in order to do this I have to npm run build first - which as you said minifies the src.

So I often do a quick mod to grunt file to include sourceMap: true

image

This helps when debugging both client and server side (as I can see unminified in chrome & i can step debug server side) but any changes I make+save, I then need to...

  • stop debugging
  • npm run build
  • F5 start debugging

(note: I use VSCode not Atom)

I am thinking there must be a way of setting this up so that debug in IDE causes sourceMaps to be built, npm run build to be executed & debug begins.

It is no major chore as it is but I wonder if you or anyone have any ideas on making this a more seamless operation?

I have found a bit of a solution...

  1. VSCODE: Modify launch.json ...
{
    // 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": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "env": { "NODE_ENV": "development" },
            "preLaunchTask": "npm: build",
            "program": "${workspaceFolder}\\packages\\node_modules\\node-red\\red.js"
        }
    ]
}
  1. VSCODE: Add an entry in tasks.json
{
	"version": "2.0.0",
	"tasks": [
		{
			"type": "npm",
			"script": "build",
			"group": "build",
			"problemMatcher": [],
			"label": "npm: build",
			"detail": "dev build"
		}
	]
}

Now when you hit F5, npm run build is executed before the debugger launches.

Its not ideal as the build task does a whole bunch of other things like 'clean:build','jsonlint','concat:build','concat:vendor','copy:build','uglify:build','sass:build','attachCopyright'


Alternative / better solution...

An alternative solution is to add a new grunt task that does the required joining etc (skips the minification)

  1. Modify grunfile.js to include another task (its the same as grunt dev but without nodemon)
  grunt.registerTask('build-dev',
      'Developer mode: build dev version',
      ['clean:build','concat:build','concat:vendor','copy:build','sass:build','setDevEnv']);
  1. in package.json add a new npm script
  "build-dev": "grunt build-dev",
  1. VSCODE: Modify launch.json ...
  {
     "version": "0.2.0",
     "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "env": { "NODE_ENV": "development" },
            "preLaunchTask": "npm: build-dev",
            "program": "${workspaceFolder}\\packages\\node_modules\\node-red\\red.js"
        }
     ]
  }
  1. VSCODE: Add an entry in tasks.json
{
    "version": "2.0.0",
    "tasks": [
         {
			"type": "npm",
			"script": "build-dev",
			"group": "build",
			"problemMatcher": [],
			"label": "npm: build-dev",
			"detail": "build-dev"
         }
    ]
}

This has the benefit of being much quicker due to not minifying the files.

@knolleary would you consider adding this grunt (build-dev) task to improve the development experience?

1 Like

Hi Nick (@knolleary) / Dave (@dceejay) would you mind if I raise a PR for this?

In summary...

  • Adds "build-dev": "grunt build-dev" to package.json scripts
    • this permits npm run build-dev
    • skips minification & doesnt launch dev server - perfect for VSCodoe / Atom F5 step debugging in IDE
  • Adds "dev": "grunt dev" to package.json scripts
    • this permits npm run dev for those without grunt installed globally

gruntfile.js...

    grunt.registerTask('build-dev',
        'Developer mode: build dev version',
        ['clean:build','concat:build','concat:vendor','copy:build','sass:build','setDevEnv']);

package.json...

        "build-dev": "grunt build-dev",
        "dev": "grunt dev",

Thanks for the consideration.

1 Like

@Steve-Mcl i saw your previous message. There is no need to keep tagging me. I'm away from my laptop, I'll reply later.

Sorry Nick. I blame the current situation - I sometimes forget what day it is :confused: .

Look forward to feedback / discussion.

Bumping this thread to say I'll be streaming again in about 40 minutes. Do come say hi.

1 Like

Hi Nick, I realise how busy you will be with release 1.1.0 fast approaching. Have you had a moment to consider allowing a PR or slipping the small package/grunt file mods in to ease debug?

Raise a PR with your proposals. Otherwise it drops off my radar and gets forgotten.

Will do ta.

Ps, which branch nick? Dev? Master?

At this point, dev.

Done Nick

PR

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

Nick, Dave,

regarding the grunt-dev addition, it would probably be prudent for me to add some info the the docs for anyone trying to get to grips with F5 debug running node-red in VSCode as described above.

Are you ok with me doing a PR for this?

1 Like