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

General
1

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.

2

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
Screenshot 2024-11-25 at 10.19.13485×363 5.73 KB

that might be what you're looking for.

3

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.

4

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
image488×393 11.7 KB

image
image272×281 10.5 KB

5

what does this flow do for you?

[{"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
Screenshot 2024-11-25 at 10.36.45635×269 9.08 KB

6

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

7

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

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

and the css is retrieved

8
  • 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?

9

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 -

    /** 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 ...

10

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

11

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