Search code examples
node-red

Why my CSS file isn't loading on Node-RED?

I've created a very simple Node-RED flow as the following:

enter image description here

[{"id":"f2550b94.38775","type":"http in","z":"92cd7f6.acf58","name":"","url":"mypage","method":"get","upload":true,"swaggerDoc":"","x":150,"y":1820,"wires":[["d996137.45dc0f"]],"icon":"node-red/file-out.svg"},{"id":"34382576.899c32","type":"http response","z":"92cd7f6.acf58","name":"","statusCode":"","headers":{},"x":435,"y":1820,"wires":[],"l":false},{"id":"d996137.45dc0f","type":"template","z":"92cd7f6.acf58","name":"HTML","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"<!DOCTYPE html>\n<html>\n<head>\n    <link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\">\n</head>\n<body>\n    <h1>This is a heading</h1>\n    <p>This is a paragraph.</p>\n</body>\n</html>","output":"str","x":310,"y":1820,"wires":[["34382576.899c32"]],"icon":"node-red/parser-html.svg"},{"id":"d0acb79c.4200f8","type":"http in","z":"92cd7f6.acf58","name":"","url":"style.css","method":"get","upload":true,"swaggerDoc":"","x":150,"y":1860,"wires":[["7ff54806.73b928"]],"icon":"node-red/file-out.svg"},{"id":"750110.a3e6c6f","type":"http response","z":"92cd7f6.acf58","name":"","statusCode":"","headers":{"content-type":"text/css"},"x":435,"y":1860,"wires":[],"l":false},{"id":"7ff54806.73b928","type":"template","z":"92cd7f6.acf58","name":"CSS","field":"payload","fieldType":"msg","format":"css","syntax":"mustache","template":"body {\n    background-color: lightblue;\n}\n\nh1 {\n    color: navy;\n    margin-left: 20px;\n}","output":"str","x":310,"y":1860,"wires":[["750110.a3e6c6f"]],"icon":"node-red/parser-html.svg"}]

The HTML code inside it is as follows:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

And the css code inside it:

body {
    background-color: lightblue;
}

h1 {
    color: navy;
    margin-left: 20px;
}

For some reason, the HTML code on Node-RED is not loading the css style on my style.css page. I know this example works perfectly with separated files (without Node-RED), and I also know that if I serve the style.css file with Nodejs instead of using Node-RED the style will load correctly. So I believe this is a specific issue with Node-RED... Am I missing something on how it works? Why the css style is not loading on mypage?

The page as it should be:

enter image description here

The page as Node-RED shows:

enter image description here

Solution

  • You need to set the Content-type header on the response to "text/css"

    How to set headers is described in the side bar for the http-out node:

    Inputs

    • payload string The body of the response.
    • statusCode number If set, this is used as the response status code. Default: 200.
    • headers object If set, provides HTTP headers to include in the response.
    • cookies object If set, can be used to set or delete cookies.

    Details

    The statusCode and headers can also be set within the node itself. If a property is set within the node, it cannot be overridden by the corresponding message property.

    enter image description here