# Webpage in Node-RED

**URL:** <https://discourse.nodered.org/t/webpage-in-node-red/10715>\
**Category:** General\
**Created:** [1 May 2019 14:02 UTC](https://discourse.nodered.org/t/webpage-in-node-red/10715 "2019-05-01T14:02:46Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![lodv](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lodv/32/7963_2.png) [@lodv](https://discourse.nodered.org/u/lodv)\
**Post date:** [1 May 2019 14:02 UTC](https://discourse.nodered.org/t/webpage-in-node-red/10715/1 "2019-05-01T14:02:46Z")

</div>

Hi,

I suppose it is a rather stupid question, but I don't understand what to do when making a webpage/site.  
I read '[http://{your-server-ip:1880/simple]' - what does that mean? Do I have to make a simple directory and if so, in what directory of my Raspberry Pi (that is where Node-RED is installed).  
I want to open the page/site from another pc with a browser.  
Thank you for helping me further.

Yvonne

---

<div class="post-metadata">

**Author:** ![ukmoose](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ukmoose/32/13_2.png) [@ukmoose](https://discourse.nodered.org/u/ukmoose)\
**Post date:** [1 May 2019 14:17 UTC](https://discourse.nodered.org/t/webpage-in-node-red/10715/2 "2019-05-01T14:17:36Z")

</div>

Take a look at  
[https://cookbook.nodered.org/http/create-an-http-endpoint](https://cookbook.nodered.org/http/create-an-http-endpoint)  
where Node-RED builds a webpage, no html on disk.

If you want to serve a file from disk it gets a little more complicated  
[https://cookbook.nodered.org/http/serve-a-local-file](https://cookbook.nodered.org/http/serve-a-local-file)  
But you will also need to specify in the Node-RED settings file where the root of your web data is stored see [How to enable ability to input local image files in to node red dashboard](https://discourse.nodered.org/t/how-to-enable-ability-to-input-local-image-files-in-to-node-red-dashboard/3085)

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [1 May 2019 14:18 UTC](https://discourse.nodered.org/t/webpage-in-node-red/10715/3 "2019-05-01T14:18:12Z")

</div>

Are you going to use the node red dashboard to make webpages?

> **[node-red-dashboard](https://flows.nodered.org/node/node-red-dashboard)**
>
> A set of dashboard nodes for Node-RED

---

<div class="post-metadata">

**Author:** ![lodv](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lodv/32/7963_2.png) [@lodv](https://discourse.nodered.org/u/lodv)\
**Post date:** [1 May 2019 14:22 UTC](https://discourse.nodered.org/t/webpage-in-node-red/10715/4 "2019-05-01T14:22:29Z")

</div>

Dear Colin and ukmoose,

Thank you so much for your fast reply. I will study what you gave me as information. If I have problems, I hope I may come back to you.

Yvonne

---

<div class="post-metadata">

**Author:** ![lodv](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lodv/32/7963_2.png) [@lodv](https://discourse.nodered.org/u/lodv)\
**Post date:** [1 May 2019 14:49 UTC](https://discourse.nodered.org/t/webpage-in-node-red/10715/5 "2019-05-01T14:49:27Z")

</div>

In my settings.js file I want to uncomment:  
httpStatic: '/home/node-red-static/' but I have the path '/home/nol/node-red-static/'  
Is that the same?  
Thanks

---

<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:** [1 May 2019 14:49 UTC](https://discourse.nodered.org/t/webpage-in-node-red/10715/6 "2019-05-01T14:49:35Z")

</div>

You have several options:

- _http-in/-out nodes as a pair_ - enables you to listen for incoming web requests and provide a response
- _Dashboard_ - Creates a single-page web app using Angular v1. Connects data dynamically using websockets
- _Configure the static resource folder in Node-RED's settings.js file_ - allows you to use Node-RED as a more traditional web server using static files.
- _Use a contrib node such as uibuilder_ - uibuilder allows you to create multiple pages with dynamic data connection using websockets. It also facilitates the use of additional front-end libraries such as REACT, VueJS, etc.

All of these allow you to easily create web pages. In each case, the `http://{your-server-ip:1880` remains the same since all of the options use the ExpressJS server that Node-RED itself creates and uses. ExpressJS is the most popular web application library for Node.js.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [1 May 2019 14:52 UTC](https://discourse.nodered.org/t/webpage-in-node-red/10715/7 "2019-05-01T14:52:59Z")

</div>

> [@lodv](#):
>
> In my settings.js file I want to uncomment:  
> httpStatic: '/home/node-red-static/' but I have the path '/home/nol/node-red-static/'

You should put there the path to where you wish to serve the data from. If you are putting the files in `/home/nol/node-red-static` then that is what you should specify.

---

<div class="post-metadata">

**Author:** ![lodv](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lodv/32/7963_2.png) [@lodv](https://discourse.nodered.org/u/lodv)\
**Post date:** [1 May 2019 15:04 UTC](https://discourse.nodered.org/t/webpage-in-node-red/10715/8 "2019-05-01T15:04:35Z")

</div>

Thank you. Time to study!!

---

<div class="post-metadata">

**Author:** ![lodv](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lodv/32/7963_2.png) [@lodv](https://discourse.nodered.org/u/lodv)\
**Post date:** [1 May 2019 15:04 UTC](https://discourse.nodered.org/t/webpage-in-node-red/10715/9 "2019-05-01T15:04:49Z")

</div>

Thank you Colin.

---

<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:** [1 May 2019 19:46 UTC](https://discourse.nodered.org/t/webpage-in-node-red/10715/10 "2019-05-01T19:46:46Z")

</div>

> [@lodv](#):
>
> but I have the path '/home/nol/node-red-static/'

That is Nick's little trap left for us all as a lesson in making sure we change default settings 🙂

One suspects that, when the settings.js file was first introduced to the world, `nol` was the user name he was using at the time. On a standard Pi installation, you would want something like `/home/pi/.node-red/public` or whatever you wanted to call it. It could, of course actually be anywhere as long as the user id running Node-RED has at least read-only access to the folder.

---

<div class="post-metadata">

**Author:** ![lodv](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lodv/32/7963_2.png) [@lodv](https://discourse.nodered.org/u/lodv)\
**Post date:** [2 May 2019 14:36 UTC](https://discourse.nodered.org/t/webpage-in-node-red/10715/11 "2019-05-02T14:36:20Z")

</div>

Thank you all for your response.  
I understand it a bit better, but now I have additional questions.  
I succeeded in making a static webpage, but is it possible to inclose the page in an existing application (see printscreen)?  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/2/213e557177deb3badc011bacd09571676cfe6e34.png)  
I now open the webpage with the ipaddress:1880/hello (for instance), but it is opened in a new window.

Is it advisable to install Express?

Thank you so much.

Yvonne

---

<div class="post-metadata">

**Author:** ![ukmoose](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ukmoose/32/13_2.png) [@ukmoose](https://discourse.nodered.org/u/ukmoose)\
**Post date:** [2 May 2019 14:57 UTC](https://discourse.nodered.org/t/webpage-in-node-red/10715/12 "2019-05-02T14:57:11Z")

</div>

You could do it using a html iframe but it might be easier to investigate if the dashboard template node would allow you to do what you want.

---

<div class="post-metadata">

**Author:** ![lodv](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lodv/32/7963_2.png) [@lodv](https://discourse.nodered.org/u/lodv)\
**Post date:** [2 May 2019 15:01 UTC](https://discourse.nodered.org/t/webpage-in-node-red/10715/13 "2019-05-02T15:01:04Z")

</div>

Thank you ukmoose.  
Do I have to use then the websocket instead of the http node pair in order to create a dynamic page?

---

<div class="post-metadata">

**Author:** ![ukmoose](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ukmoose/32/13_2.png) [@ukmoose](https://discourse.nodered.org/u/ukmoose)\
**Post date:** [2 May 2019 15:07 UTC](https://discourse.nodered.org/t/webpage-in-node-red/10715/14 "2019-05-02T15:07:16Z")

</div>

> [@lodv](#):
>
> Do I have to use then the websocket instead of the http node pair in order to create a dynamic page?

If you mean using an iframe - no , try googling iframe...  
If you meant if you were using the dashboard template node, no, if you click on the dashboard template node and look at the info panel you should find enough information on how to use it

---

<div class="post-metadata">

**Author:** ![lodv](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lodv/32/7963_2.png) [@lodv](https://discourse.nodered.org/u/lodv)\
**Post date:** [2 May 2019 15:08 UTC](https://discourse.nodered.org/t/webpage-in-node-red/10715/15 "2019-05-02T15:08:54Z")

</div>

Ok, thanks.