Hello everyone, I have just started to get into Node-Red and I am super newbie to most stuff about it. I wanted to ask if you can give me any information on how can I put my already written code(for example a React App) in Node-red instead of using Template to write the whole code in Node-Red itself? Or is this whole thing I have mentioned goes into "creating your own nodes" category? I hope this made sense to you.. Any help is appreciated, thank you ! 
Hi and welcome to the community.
You will probably be best looking at my node-red-contrib-uibuilder nodes. These have just had a major upgrade.
uibuilder provides you with a simple to integrate framework that lets you create data-driven web apps.
Since you already have the app, it should be a fairly simple matter to add and integrate with the uibuilder client library and a uibuilder node.
1 Like
Thank you for your fast reply! It's nice to see the Node-Red community is active ! I will take a look at it ! But just to make sure : Can I also use this node for opening my code files in node-red? Because I am super overwhelmed and surprised with the possibilities of this technology 
To start integrating, all you need to do is install the Node, add a uibuilder node instance to your flow, give it a URL and deploy.
That creates all of the folders for you.
Normally, uibuilder expects its front-end code to be in its own folders but there are ways to work around that if you need to.
Taking the simple case of using the default folders, you then need to adjust your HTML to include the client library and in your app, add a uibuilder.start() function. That kicks off the controlled Socket.IO communications with Node-RED. From there you can add listeners for new messages and send messages back to node-red.
1 Like
The uibuilder node does have a basic code editor included. You access this from the Node-RED Editor (admin) interface. It will use either the ACE (node-red default) or Monaco code editors and has a very simplistic capability for managing files.
For more complex apps though, I would strongly recommend the use of VScode with Microsoft's remote editing extensions.
Me too! 
1 Like
Thank you for your patience and knowledge! I will explore it further according to this information.
PS: Do you have any recommendation on which extension I can use within VScode? Because I mostly write my stuff there.
Just search for "microsoft remote". You will find a collection of extensions for remote editing in WSL, Docker and SSH (which is the one you probably want).
Of course, best if you set up certificate-based login over SSH rather than user id/password but not essential.
If you are used to VScode, I also recommend changing your Node-RED settings to use the Monaco editor (as this is the core editor using in VScode).
For uibuilder, I recommend trying out the "Blank" template first (which is the default anyway), just to get a feel for the basics. There are also a couple of begginner guides in the Tech Docs which are available both online and from within uibuilder.
1 Like
Thank you for your time! I hope I can manage this. I really appreciate the detailed explanations !
An alternative is to create your own REST architecture using the NR http nodes for example. This is what I did with my React app. The middle and back end is handled by NR and a mySQL database. Works a treat and fairly easy to set up.
1 Like
thank you for your reply!
but for example; i have a code file, can i also create a node and put it inside and use it as a new node then connect the other nodes in NR with that code? This might sounds confusing because i am still new to NR and i thought i can just put my code file in a node 
At its heart, this is what uibuilder does for you It gives you a framework that helps host your code (if you want that), hosts any external library dependencies for you and manages dynamic communications between the front- and back-ends (browser and Node-RED).
Kind of, you could put your code into a template node between an http-in and -out nodes. But that assumes your code fits in a single file. For multiple files, you can use the static file feature of Node-RED - but then you put all your files in another folder - which might be fine for you.
And then you still wouldn't get the dynamic comms over websockets (if that is useful for your app) which saves your users from having to reload the page and creates a more immersive UX. To do that, you would also have to add a pair of websocket in/out nodes AND manually code in websockets to your front-end.
uibuilder does all of this for you.
No, you can't do that. The best you could do would be to put the connected collection of nodes into a sub-flow or a separate tab.
But this works in any case.
1 Like
Thank you so much for your time ! I will try this. Hopefully, I can manage I will let you know !
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
