Node-Red in Browser via Stackblitz

General
1

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
2

Just run node index.js and navigate to /red

image
image1920Ă—937 95.3 KB

3

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

image
image1920Ă—937 97.7 KB

1 Like
4

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

image
image1920Ă—937 98.5 KB

1 Like
5

: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:

6

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

7

I LIKE it - thanks for sharing.

8

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

image
image1920Ă—937 45.8 KB

9

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
10

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
11

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
12

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.

13

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)
14

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

2 Likes
15

Your A sick man @TotallyInformation :scream:

1 Like
16

ooops - I must be sick

image
image1774Ă—1386 206 KB

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

2 Likes
17

What about "editor is not dashboard" now?

2 Likes
18

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

19

I might watch inception this weekend! :wink:

1 Like
20

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

4 Likes