Loading HTML Code from File

General
1

So this all started when I wanted to make a specific form for a front end application in Node Red. I thought I would be able to write some code in Bootstrap Studio, copy it to a folder, and load it up using http in and http response.

Three-node flow consists of just that: http in with url --> load file --> http response. The only issue is that when I go to the URL set by http in, none of the CSS properties loads up. All of the css files are linked in the and are located inside of an asset folder inside the same folder containing the index.html file.

Is it not possible to simply inject HTML from a file as an HTTP response and have it function as a regular web page?

I don't want to use the standard dashboard, and I don't want to deal with Vue, so I don't want to use the uibuilder node

Any help is appreciated :slightly_smiling_face:

2

Uibuilder does not force to use Vue. Or any framework. Feel free to go with vanilla javascript and pure html. Uibuilder supports with communication between backend and your frontend then. No magic. Just alot of work.

1 Like
3

Hi @dparm

if you check the developer console of your browser, you'll probably see an error relating to invalid mime type.

You need to set the content-type http header to text/css so the browser correctly identifies those routes as CSS.

To do that, add this Change node before the HTTP Response node for the flow related to your CSS content:

[{"id":"f0e4b1db.5af2b","type":"change","z":"e91e40e3.6bde","name":"","rules":[{"t":"set","p":"headers","pt":"msg","to":"{\"content-type\":\"text/css\"}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":620,"y":460,"wires":[[]]}]
1 Like
4

... or the html file that references them may have incorrect paths to them - may be absolute rather than relative ?

1 Like
5

I can't get POST functionality out of uibuilder, or any other message handling other than through Vue. Am I missing something?

6

You were exactly right about the MIME error in my browser, but your suggestion didn't seem to work. Do I need to call 3 different files, one for HTML, one for CSS, and one for JS with different headers?

7

There may be something going on in the back end. When I look at the error logs in my browser, it says, "https://localhost:1880/assets/main.css does not exist". Do I need to setup different http in nodes for the various files?

8

I assumed you had a separate flow to handle each file.

If you only have a flow to return index.html then that is the only file that can be loaded.

An alternative will be to use the httpStatic setting in your settings file. That lets you identify a directory of files that Node-RED should make available over http as static content.

1 Like
9

Changing the httpStatic in the settings was the quickest way to fix the problem, but I had some other questions now about the first suggestion you made.

Is there any sort of documentation on how to pull multiple files with a single HTTP response?

Say I have an HTML file that draws 4 style sheets and a dozen JS scripts - what sort of flow structure does this look like? Does each file have a node with the proper "Set msg.header" change node stuck to it? Can all of these files be pulled from a single HTTP in node, or do they need have different flows to handle the request multiple times?

This may be more of an HTML/webdesign question than a NodeRed question, but I was just curious if you knew something off the top of your head.

Thank you again for the answer! :+1:

10

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