Node-red front-end, where and how to start?

General
1

I want to make bootstrap responsive website, which uses my Node-Red data.
How should I should start this ? below "few" questions.

Question:

  1. Should I make front-end without node-red ? maybe for example NodeJS -> index.js file where I just add twitter bootstrap etc.?
  2. Node-Red doesn't have front-end tools for this task ?
  3. Where do I place index.js file so I can launch NodeJS server ?
  4. Node-Red is also server ? Can I run NodeJS and Node-Red at the same time ?
  5. How to use Node-Red data with NodeJS index.js file ?
  6. I want to use custom javascript libraries like. Jquery Datatables, this eliminates so I can't use Node-Red Dashboard ?

Too much questions :slight_smile: If anyone has spare time, I would appreciate for replying some of those questions, thanks! Links are also welcome, didn't find much of these topics.

My setup: Raspberry pi 3 which has nodeJS and node-red installed.

2

If you want to create your own front end for Node-RED the best place for you to start would be the ui-builder project https://www.npmjs.com/package/node-red-contrib-uibuilder

If you don't want Node-RED then just use Google to find something else.

3 Likes
3

As Dave says, uibuilder will let you do this - it uses the Node-RED ExpressJS server to deliver the front-end code and creates an integrated websocket connection for communications between Node-RED (the back-end) and the front-end.

Yup, it does.

Follow the instructions for uibuilder. There are also lots of examples on the WIKI.

You can also do this using the standard http-in/out nodes but then you have to set up your pages and, if you need it, a websocket connection, yourself.

Yes, absolutely. If you prefer, you can set up your own Node.JS server. You can talk from Node-RED to your own server quite easily both at the back and front ends.

You can also embed Node-RED into your own application. The instructions are in the docs. Probably not what you want in this case though.

NR's Dashboard nodes already make use of JQuery along with Angular v1.0. You can easily add JQuery addins if you want to. However, in my experience, Dashboard only gets in the way if you are wanting to do lots of customisations - which is why I built uibuilder.

2 Likes