How to correctly set href path for CSS files in node-red(inside html file)?

General
1

Hello Node-red experts,

Greetings!!

I have directory named /root/chatBot/static/css where my css files are residing. After researching from forum I got to know I need to change settings.js file in node-red server with entry named httpStatic with following:

    httpStatic: [
          {path: '/root/chatBot/static/',    root: "/chatbot/"},
    ],

and made href entry as <link rel="stylesheet" href="/css/frontendBot.css"> but this is not picking up the css. Will be grateful if you could guide on this issue.

NOTE: I am hitting link http://localhost:1880/chatbot here.

Thanks,
Ravinder Singh

2

Firstly I'll not mention the whole "why on earth are you running node-red as root!?!?" and move straight to the questions...

If you watch the network tab in the browsers devtools do you see the failed request for the CSS? What is the full path the browser tried to GET?

Have your tried accessing the CSS directly by entering the URL to the CSS directly in the browser?

1 Like
3

Thank you for your reply @Steve-Mcl here. (For root user, thanks for letting know I will change it to some other user but in our environment we have lot of restrictions and process of installing things so I went with it in sandbox, but I will fix it later on for sure).

Coming on to your question yes I checked it dev tools of browser and seeing following error.

image
image736Ă—248 20.7 KB

Thanks,
Ravinder Singh

4

I have made httpStatic value commented(as it was before) and placed my static folder into /root/.node-red/ and then mentioned static/css/filename.css but its still not working. Any guidance will be helpful here, thank you.

5

I have found out the solution, following are the steps.

1st: Enter a line httpStatic: '/root/singh/static/', basically path of your folder where your css and html, js folders are residing and update them in settings.js file of node-red.

2nd: Try accessing a sample css file from browser itself to make sure its coming up fine eg: http://localhost:1880/css/frontendBot.css if its accessible then we are Good here.

Thanks,
Ravinder Singh

6

3rd: Stop and restart Node-RED and flush your browser's cache.

1 Like
7

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