Need help with loading Node-RED without backend

Hello,

So I've gotten this far: (edit updated link to working version) https://mdkrieg.github.io/ReQUI/

Above GH page gets past the inital loading sequence; and for the most part the page looks good but very few of the controls are responding.

What I need to do from here:

  • Be able to drag nodes onto the page
  • Be able to open the node configuration for nodes on the page
  • Have the Deploy button save the flow in JSON to LocalStorage

That's basically it. This thread explains why I'm doing this.

Thanks in advance,
-Matt

Hi Matt,

I may have some answers that will help, based upon some work I did years ago and discussed in this thread.

Essentially, I needed to launch the Node-RED editor for multiple people, with url params that would redirect the editor to pull the flows.json data from a parameterized rest api (instead of the /admin/flows api using the local flows.jsp file). The net effect is that the full editor runs as-designed, but the actual runtime uses an "empty" flow. This way, the editor can be used as a flow drawing tool, and deployed changes are POSTed back to the external rest api (e.g. saved in a remote database).

So, as long as you don't need any functional back-end flows running, it works perfectly -- and since the server runtime is "empty", there is no need to worry about multiple user logins -- each user that loads the editor pulls their own flows directly into the editor... pretty cool, although not for most use cases!

Steve

Did you include jquery in the script as well, as i don't see it.

Huzzah, I think I just needed a couple days to sleep on it. updated link: https://mdkrieg.github.io/ReQUI/

Did you include jquery in the script as well, as i don't see it.

Yes, jQuery is packed into the vendor.js file by default

Since I got as far as I needed I'll explain what I did for posterity:

  • Used "wget" to get the base HTML from the http://localhost:1880/ endpoint of a running node-RED instance
    --NOTE: I'd originally used the browser's "save as" to get this which was a mistake and was causing a lot of the problems I was having
  • Started an iterative process of identifying any missing sources and then saving flat files in the correct places to satisfy all endpoints, sometimes this involved changing the endpoints in red.min.js to include the file extension
  • At this point the interface works but the websocket fails and the deploy button throws an error "cannot POST" - naturally...
  • To null-out the websocket I added a return; to the very beginning of the websocket's connect, subscribe, and unscubscribe functions. Effectively make the websocket do nothing (this doesn't seem to be a problem for me "yet")
  • To make the deploy button save to window.localStorage like I wanted I found both the ajax functions and inserted my simplistic window.localStorage.setItem("flows",JSON.strigify(c)) and then commented out the ajax including the .done .fail and .always functions being careful to leave the contents of the .done and .always functions (including a line to set var e = c; to spoof the input of this function.
  • Pulling the flow from localStorage was similar to above but a little simpler.

Thanks for the replies, now I can get back to the fun stuff :slight_smile:

I have to say, pretty awesome work! This could potentially come in quite handy like in (enterprise) environments where there is no access to npm/node or where there is no direct access to internet to install the requirements, but one can run things in the browser only.

There is no debug tab is that correct ? Or am I missing the scope of this project ?

I will follow this topic closely, thanks for your work!

There is no debug tab is that correct ? Or am I missing the scope of this project ?

Ah, I didn't even notice that, hmmm. Looks like there's some warning in the console related to the debug but it'll require some digging to figure out what's going on. all it took was adding in the stuff from nodes/core/lib/debug/* to the correct path. I made a branch for the headless NR ui called NRfront-only and I have no idea how to merge specific commits. So for now it's only fixed in the main branch which I'm now doing further work on (RE: below).

Ultimately what I'm trying to do is invent an IDE where you can design interactive html apps and the page logic is designed with NR. I'm using grapes.js for the HTML part and so far it looks to play nice in the browser next to NR.

EDIT - so to answer your question about scope, I think I'll want that functionality eventually but it may be one of the last things I iron out, in the meantime the browser console will suffice.