Node-Red in Browser via Stackblitz

Not really a question - but did you know that you can run Node-Red in the browser using Stackblitz -

just created a sample repo Node.js (forked) - StackBlitz

based on this sample https://nodered.org/docs/user-guide/runtime/embedding

5 Likes

Just run node index.js and navigate to /red

If the userDir points to a folder within the project the data is even persistent:

1 Like

Custom nodes are also possible by running npm install whatever-node

1 Like

:thinking: Interesting! So I could run up a template repo that contained a pre-configured node-red with uibuilder installed along with a simple flow and get people to click on a link to get a completely known environment that runs in their browser and where they can try to reproduce bugs!

Nice :smiley: :woman_mage:

yes. actually all the sample flows could be spinned up that way and users could start testing them interactive.

I LIKE it - thanks for sharing.

There are pre-configured starter-templates. Maybe node-red could also have one

That would be nice. Though (when I get time!), I'm going to create my own custom one so that I can get people to better test uibuilder. :wink:

1 Like

JavaScript SDK | StackBlitz Docs - so it looks like this could really be embedded in any website - so wiring up dynamically a node-red stackblitz for every sample flow for example should be possible

2 Likes

Nice,
if you set adminRoot to / and add a "start": "node index.js" to the scripts section of package.json it just fires straight up. Very simple.
I would also add

flowFile: 'flows.json',
flowFilePretty: true,

to the settings section of index.js to stop it creating random flow file names.

2 Likes

Only problem I have with this setup is, that it says "Not started" because I guess express tries to serve the page faster than node-red is spinning up.

Solution could be to start express a little bit later. Is there a callback / promise on the RED object which will be called when it's done spinning up so it can trigger the server startup?

// Start the runtime
RED.start();

setTimeout(() => {
  server.listen(8000);
}, 1500)

So you could have Node-RED running inside Node-RED Dashboard, .... :rofl:

2 Likes

Your A sick man @TotallyInformation :scream:

1 Like

ooops - I must be sick

( this is a useful page -Embedding projects | StackBlitz Docs )

2 Likes

What about "editor is not dashboard" now?

2 Likes

Please stop, my brain cannot handle this! :rofl:

I might watch inception this weekend! :wink:

1 Like

I think we need to add "… and the dashboard is not an editor..."

4 Likes