# How to Use HTTP-In Nodes in Node-RED to Serve Static HTML Pages Instead of Separate Express Code

**URL:** <https://discourse.nodered.org/t/how-to-use-http-in-nodes-in-node-red-to-serve-static-html-pages-instead-of-separate-express-code/93434>\
**Category:** General\
**Created:** [25 November 2024 09:15 UTC](https://discourse.nodered.org/t/how-to-use-http-in-nodes-in-node-red-to-serve-static-html-pages-instead-of-separate-express-code/93434 "2024-11-25T09:15:48Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![LoganathanSambath](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/loganathansambath/32/92841_2.png) [@LoganathanSambath](https://discourse.nodered.org/u/LoganathanSambath)\
**Post date:** [25 November 2024 09:15 UTC](https://discourse.nodered.org/t/how-to-use-http-in-nodes-in-node-red-to-serve-static-html-pages-instead-of-separate-express-code/93434/1 "2024-11-25T09:15:48Z")

</div>

I am currently using separate Express.js code to serve static CSS and JS  
pages to html page like `login.html`, `forgot-password.html`, etc.

How do I set the CSS, JS, and images in static files in node-red settings file?

I want to transition from Express to Node-RED and use **HTTP-In nodes** to serve these HTML pages dynamically using the GET method.

This would allow me to simplify my application, leveraging Node-RED’s native capabilities for serving content.

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [25 November 2024 09:19 UTC](https://discourse.nodered.org/t/how-to-use-http-in-nodes-in-node-red-to-serve-static-html-pages-instead-of-separate-express-code/93434/2 "2024-11-25T09:19:39Z")

</div>

Every http-in node has a http-response node, in the http-response node you can set the content type.

 ![Screenshot 2024-11-25 at 10.19.13](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/c/ec0bbbc181cd97e413e4754f954fde7c59ee7e1f.png)

that might be what you're looking for.

---

<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:** [25 November 2024 09:24 UTC](https://discourse.nodered.org/t/how-to-use-http-in-nodes-in-node-red-to-serve-static-html-pages-instead-of-separate-express-code/93434/3 "2024-11-25T09:24:35Z")

</div>

> [@LoganathanSambath](#):
>
> How do I set the CSS, JS, and images in static files in node-red settings file?

There is the `httpStatic` property in settings.js. Anything put into the specified folder is made available.

If you are wanting more control, you could also try UIBUILDER which has lots of features for serving both static and dynamic files and API's. It also has its own middleware and can also use a separate ExpressJS server from the main Node-RED one if you prefer.

---

<div class="post-metadata">

**Author:** ![LoganathanSambath](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/loganathansambath/32/92841_2.png) [@LoganathanSambath](https://discourse.nodered.org/u/LoganathanSambath)\
**Post date:** [25 November 2024 09:27 UTC](https://discourse.nodered.org/t/how-to-use-http-in-nodes-in-node-red-to-serve-static-html-pages-instead-of-separate-express-code/93434/4 "2024-11-25T09:27:53Z")

</div>

HI @gregorius

- I tried, but only the html file content appeared? CSS and JS files are not included?
- I created separate css and js files in localy
- How do I set the static CSS and JS in settings.js file and how to acess globaly?
- static  
│ ├── assets  
│ │ ├── icons  
│ │ │ ├── trace.svg  
│ │ │  
│ │ ├── js  
│ │ │ ├── forgot-passwd.js  
│ │ │ ├── login.js  
│ │ │ ├── passwd-reset.js  
│ │ │ └── two-fa-auth.js  
│ │ └── stylesheets  
│ │ ├── login.css  
│ │ ├── reset.css  
│ │ └── twoFA.css  
│ └── locales  
│ └── en-US  
│ ├── error-reset-passwd.html  
│ ├── forgot-passwd.html

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/6/d61fd7e697e3841aec380dfe0db0dc8b1e8b27b0.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/d/2d8eb2b7cf03a58062d235a632afb17e515fc054.png)

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [25 November 2024 09:37 UTC](https://discourse.nodered.org/t/how-to-use-http-in-nodes-in-node-red-to-serve-static-html-pages-instead-of-separate-express-code/93434/5 "2024-11-25T09:37:14Z")

</div>

what does this flow do for you?

```auto
[{"id":"645ca562680b1849","type":"http in","z":"40ea5f2aea6592ae","name":"","url":"/some.css","method":"get","upload":false,"swaggerDoc":"","x":607,"y":559,"wires":[["b4a3463700dacdc1"]]},{"id":"b4a3463700dacdc1","type":"template","z":"40ea5f2aea6592ae","name":"","field":"payload","fieldType":"msg","format":"css","syntax":"plain","template":".some {\n background: #ffffff;\n}\n\n.other {\n color: #000000;\n}\n","output":"str","x":824,"y":546,"wires":[["a67bfd32617c5411"]]},{"id":"a67bfd32617c5411","type":"http response","z":"40ea5f2aea6592ae","name":"","statusCode":"","headers":{"content-type":"text/css"},"x":1028,"y":456,"wires":[]}]

```

it defines a simple http in, a template with css content and a http response that defines the content type.

 ![Screenshot 2024-11-25 at 10.36.45](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/5/d52b3aa14f88cb73308830d66db3fc54789d6c92.png)

---

<div class="post-metadata">

**Author:** ![LoganathanSambath](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/loganathansambath/32/92841_2.png) [@LoganathanSambath](https://discourse.nodered.org/u/LoganathanSambath)\
**Post date:** [25 November 2024 09:41 UTC](https://discourse.nodered.org/t/how-to-use-http-in-nodes-in-node-red-to-serve-static-html-pages-instead-of-separate-express-code/93434/6 "2024-11-25T09:41:18Z")

</div>

This shows the HTML contents but CSS is not included? how do i set static css file

- How do I set the static files in CSS and JS in the settings.js file and how to access globaly?

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/5/e50fdd5ec69c6991dfa9c2aeb175e37328b709f2.png)

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [25 November 2024 09:53 UTC](https://discourse.nodered.org/t/how-to-use-http-in-nodes-in-node-red-to-serve-static-html-pages-instead-of-separate-express-code/93434/7 "2024-11-25T09:53:54Z")

</div>

Somewhere inside the head section of the html, you have:

```auto
<link rel="stylesheet" href="/some.css">

```

and the css is retrieved

---

<div class="post-metadata">

**Author:** ![LoganathanSambath](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/loganathansambath/32/92841_2.png) [@LoganathanSambath](https://discourse.nodered.org/u/LoganathanSambath)\
**Post date:** [25 November 2024 10:55 UTC](https://discourse.nodered.org/t/how-to-use-http-in-nodes-in-node-red-to-serve-static-html-pages-instead-of-separate-express-code/93434/8 "2024-11-25T10:55:37Z")

</div>

- I have html css js files in my local, without using expres how to serve static file, set the static file in css,js how to use settings.js file?

i think , if i set the css,js static files in setttings.js it will work?  
How to do it?

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [25 November 2024 11:24 UTC](https://discourse.nodered.org/t/how-to-use-http-in-nodes-in-node-red-to-serve-static-html-pages-instead-of-separate-express-code/93434/9 "2024-11-25T11:24:51Z")

</div>

you have two choices:

1. server static css via an http-in/http-response nodes (see flow above)
2. use the Node-RED static directory - no idea how to do that

For two, check the settings.js file -

```auto
    /** When httpAdminRoot is used to move the UI to a different root path, the
     * following property can be used to identify a directory of static content
     * that should be served at http://localhost:1880/.
     * When httpStaticRoot is set differently to httpAdminRoot, there is no need
     * to move httpAdminRoot
     */
    //httpStatic: '/home/nol/node-red-static/', //single static source
    /* OR multiple static sources can be created using an array of objects... */
    //httpStatic: [
    // {path: '/home/nol/pics/', root: "/img/"},
    // {path: '/home/nol/reports/', root: "/doc/"},
    //],

```

that's what I found in the settings.js ...

---

<div class="post-metadata">

**Author:** ![LoganathanSambath](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/loganathansambath/32/92841_2.png) [@LoganathanSambath](https://discourse.nodered.org/u/LoganathanSambath)\
**Post date:** [25 November 2024 14:22 UTC](https://discourse.nodered.org/t/how-to-use-http-in-nodes-in-node-red-to-serve-static-html-pages-instead-of-separate-express-code/93434/10 "2024-11-25T14:22:06Z")

</div>

Thank you!, for the guidance. Now I got the clarity.

---

<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:** [25 November 2024 20:08 UTC](https://discourse.nodered.org/t/how-to-use-http-in-nodes-in-node-red-to-serve-static-html-pages-instead-of-separate-express-code/93434/11 "2024-11-25T20:08:34Z")

</div>

> [@gregorius](#):
>
> you have two choices:

No, you have 3 choices. You can also use node-red-contrib-uibuilder.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [23 February 2025 20:09 UTC](https://discourse.nodered.org/t/how-to-use-http-in-nodes-in-node-red-to-serve-static-html-pages-instead-of-separate-express-code/93434/12 "2025-02-23T20:09:12Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.