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

**URL:** <https://discourse.nodered.org/t/node-red-front-end-where-and-how-to-start/2123>\
**Category:** General\
**Created:** [7 August 2018 00:29 UTC](https://discourse.nodered.org/t/node-red-front-end-where-and-how-to-start/2123 "2018-08-07T00:29:03Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![PateJS](https://avatars.discourse-cdn.com/v4/letter/p/71e660/32.png) [@PateJS](https://discourse.nodered.org/u/PateJS)\
**Post date:** [7 August 2018 00:29 UTC](https://discourse.nodered.org/t/node-red-front-end-where-and-how-to-start/2123/1 "2018-08-07T00:29:03Z")

</div>

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 🙂 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.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [7 August 2018 08:24 UTC](https://discourse.nodered.org/t/node-red-front-end-where-and-how-to-start/2123/2 "2018-08-07T08:24:31Z")

</div>

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](https://www.npmjs.com/package/node-red-contrib-uibuilder)

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

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [19 November 2018 07:24 UTC](https://discourse.nodered.org/t/node-red-front-end-where-and-how-to-start/2123/3 "2018-11-19T07:24:56Z")

</div>

> [@PateJS](#):
>
> Should I make front-end without node-red ? maybe for example NodeJS -\> index.js file where I just add twitter bootstrap etc.?

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.

> [@PateJS](#):
>
> Node-Red doesn't have front-end tools for this task ?

Yup, it does.

> [@PateJS](#):
>
> Where do I place index.js file so I can launch NodeJS server ?

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.

> [@PateJS](#):
>
> Node-Red is also server ? Can I run NodeJS and Node-Red at the same time ?

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.

> [@PateJS](#):
>
> How to use Node-Red data with NodeJS index.js file ?

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.

> [@PateJS](#):
>
> I want to use custom javascript libraries like. Jquery Datatables, this eliminates so I can't use Node-Red Dashboard ?

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.