# Host web application in custom node

**URL:** <https://discourse.nodered.org/t/host-web-application-in-custom-node/16060>\
**Category:** Developing Nodes\
**Created:** [29 September 2019 14:20 UTC](https://discourse.nodered.org/t/host-web-application-in-custom-node/16060 "2019-09-29T14:20:12Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [29 September 2019 14:20 UTC](https://discourse.nodered.org/t/host-web-application-in-custom-node/16060/1 "2019-09-29T14:20:12Z")

</div>

Hi folks,

We need to develop a new node that is able to host a web application.  
The (third-party) web application consists out of a number of files:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/4/4fe783e2f082d130682f4c4dbee45db61a9c899c.png)

Would like to build a custom node that allows users to start/stop this web application.  
But not sure what the best way is to accomplish this.  
Seems there are a number of options, based on some samples I found:

- Via the http module:

```auto
var http = require("http");  
var server = http.createServer(function(request, response) {  
response.writeHead(200, {  
'Content-Type': 'text/plain'
});  
response.write("This is Test Message.");  
response.end();  
});  
server.listen(8082);

```

- Via express.js:

```auto
var express = require("express");
var app = express();
app.use(express.static('public'));

//make way for some custom css, js and images
app.use('/css', express.static(__dirname + '/public/css'));
app.use('/js', express.static(__dirname + '/public/js'));
app.use('/images', express.static(__dirname + '/public/images'));

var server = app.listen(8081, function(){
   var port = server.address().port;
});

```

- Others?

I have no idea how to get started. Moreover I assume Node-RED perhaps offers some functionality already to do this?

Thanks !!  
Bart

---

<div class="post-metadata">

**Author:** ![afelix](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/afelix/32/9743_2.png) [@afelix](https://discourse.nodered.org/u/afelix)\
**Post date:** [29 September 2019 15:38 UTC](https://discourse.nodered.org/t/host-web-application-in-custom-node/16060/2 "2019-09-29T15:38:51Z")

</div>

Take a look at the Uibuilder source code for some inspiration: [https://github.com/totallyinformation/node-red-contrib-uibuilder](https://github.com/totallyinformation/node-red-contrib-uibuilder)

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [29 September 2019 15:48 UTC](https://discourse.nodered.org/t/host-web-application-in-custom-node/16060/3 "2019-09-29T15:48:24Z")

</div>

Hey Lena (@afelix),  
Is there any particular code snippet you are aiming at?

I want create a simple node that starts hosting the web application as soon as I send a start message to my node. So it should be small, stable and secure (??) ... And I don't want my users need to install anything manually ...

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [29 September 2019 15:54 UTC](https://discourse.nodered.org/t/host-web-application-in-custom-node/16060/4 "2019-09-29T15:54:34Z")

</div>

Bart, it might not be clear to people, this is for the design time environment (to be consumed by our node inside the node red editor environment), not some kind of dashboard or general purpose web server.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [29 September 2019 15:56 UTC](https://discourse.nodered.org/t/host-web-application-in-custom-node/16060/5 "2019-09-29T15:56:33Z")

</div>

Steve, you are right ...  
We want to host this web application, and then we will call it from our node's config screen (in the flow editor). So it indeed has nothing to do with the dashboard.

---

<div class="post-metadata">

**Author:** ![afelix](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/afelix/32/9743_2.png) [@afelix](https://discourse.nodered.org/u/afelix)\
**Post date:** [29 September 2019 15:58 UTC](https://discourse.nodered.org/t/host-web-application-in-custom-node/16060/6 "2019-09-29T15:58:01Z")

</div>

~~I understand Bart, what I mean is that Uibuilder is using Node-RED's own `RED.httpNode` Express Application.  
 [https://nodered.org/docs/api/modules/v/0.20.0/node-red.html#.httpNode](https://nodered.org/docs/api/modules/v/0.20.0/node-red.html#.httpNode)  
That is what is used as HTTP server. Meaning that you can do the same, rather than create a full express installation at a different port, host a small application at its own endpoint within NR: [https://github.com/TotallyInformation/node-red-contrib-uibuilder/blob/2161240559d3a18192ccdd1164c465cb8c1de7f9/nodes/uibuilder.js#L137](https://github.com/TotallyInformation/node-red-contrib-uibuilder/blob/2161240559d3a18192ccdd1164c465cb8c1de7f9/nodes/uibuilder.js#L137)  
 ~~

Okay based on what Steve is now adding that's going to be a bit harder... what I thought was having the Express app running at runtime, rather than at config time... Sounds like you would need to have indeed something start at a different port... but keeping that child process controlled and surviving control over different deploys sounds extremely hard. Far above my levels if you need to support more than just POSIX systems.

---

<div class="post-metadata">

**Author:** ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)\
**Post date:** [29 September 2019 16:17 UTC](https://discourse.nodered.org/t/host-web-application-in-custom-node/16060/7 "2019-09-29T16:17:33Z")

</div>

Might be a bit off topic (sorry).

What I would like to do is incorporate some 'html code' within Node-RED to create some web pages.

I've created quite a few web sites (in a previous life) and it would be nice to combine a simple web page navigation and images within Node-RED.

Any ideas or links to practical examples??

---

<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:** [29 September 2019 16:40 UTC](https://discourse.nodered.org/t/host-web-application-in-custom-node/16060/8 "2019-09-29T16:40:24Z")

</div>

@dynamicdave - If they are simple html pages can't you just host them as static pages using the httpStatic setting path in settings.js ?

@BartButenaers If this is for use in the editor then you should probably add it as an express path within the admin tree path so that it is protected by the admin ui settings.

---

<div class="post-metadata">

**Author:** ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)\
**Post date:** [29 September 2019 16:42 UTC](https://discourse.nodered.org/t/host-web-application-in-custom-node/16060/9 "2019-09-29T16:42:48Z")

</div>

Thanks for your swift responses - I'll give that a try on Monday.

I just needed something simple for my IoT students and me !!!

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [29 September 2019 17:21 UTC](https://discourse.nodered.org/t/host-web-application-in-custom-node/16060/10 "2019-09-29T17:21:56Z")

</div>

> [@dceejay](#):
>
> If this is for use in the editor then you should probably add it as an express path within the admin tree path so that it is protected by the admin ui settings.

Hey Dave,  
I assume you mean using simply `RED.httpAdmin.get`? Damn, should have thought about that myself ...

But there is some extra complexity in our case: _from our node's config screen we open the URL via an iframe_. So the _ **iframe** _ needs to access to my local web application. Is that possible with your solution, or should we use something else then?

---

<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:** [29 September 2019 23:40 UTC](https://discourse.nodered.org/t/host-web-application-in-custom-node/16060/11 "2019-09-29T23:40:55Z")

</div>

> [@BartButenaers](#):
>
> I assume you mean using simply `RED.httpAdmin.get` ? Damn, should have thought about that myself

`RED.httpAdmin` is a reference to the ExpressJS app. `get`, `put`, etc. add a route for that specific request type. You will see examples in uibuilder towards the end of the uibuilder.js file where I create a number of API's.

However, don't forget that you need to destroy any extra paths you create when unloading or you will find that you end up with multiple references and a memory leak. the `processClose()` function in uilib.js shows you how.

In your case, you may need to remove the path when stopping otherwise, I'm not sure how you will actually stop the "server". Though I suppose you could simply make the request return a 404 or a redirect. That wouldn't work if you simply use the serveStatic feature though.

For security, I assume you will be relying on the Node-RED editor security features? You will want to set up https as well of course.