Subdirectories of httpStatic

General
1

On a Pi settings.js has httpStatic: '/home/pi/.node-red/node-red-static/'

I put weather icon files in /home/pi/.node-red/node-red-static/icons and then copied them into a subdirectory /home/pi/.node-red/node-red-static/icons/owm.

A ui-template correctly shows the first one, but fails with the second (any icon filename gives the same, incorrect arrow icon):

image
image475Ă—173 18.3 KB

Here is the template code. There is CSS too of course.

<template>
<div class="dashboard-container" style="backgroundColor: #93c0e8;">
<div class="daily-row">
  <div class="icon-wrapper"><div class="weather-icon" style="--icon:url('/icons/212.svg');"></div><div class="icon-label">212</div></div>
  <div class="icon-wrapper"><div class="weather-icon" style="--icon:url('/icons/owm/212.svg');"></div><div class="icon-label">212</div></div>
</div>
</div>
</template>

So the question is, why isn't the file in the subdirectory served correctly?

The network tab of developer tools shows code 200 for both, but the number of bytes transferred is different.

image
image1384Ă—176 9.2 KB

Is there a limit to the depth that Node-red's web server can see?

2

It seems there must be: moving /home/pi/.node-red/node-red-static/icons/owm directory to /home/pi/.node-red/node-red-static/icons_owm, the template can find and display the icons using the new pathnames.

3

@jbudd out of interest, can you try renaming the top level dir icons to icon_test - but still with the owm subdirectory?

4

When I change the directory structure to icon_test and icon_test/owm then both sets of icons are correctly served:

image
image426Ă—154 20.6 KB

Looks like a browser cache issue? But I replicated the original problem with a second browser.

5

It's a clash between the built-in admin routes for serving icons (icons/) and what you have in httpStatic.

For example, if you set httpAdminRoot to /editor so you access the editor there instead of /, then you wouldn't have a clash (as the built-in icon route would now be /editor/icons)

1 Like
6

Just to add, that's why you're getting the arrow icon instead - that's the default icon the admin icons route will serve.

7

One of several reasons I ALWAYS move the Editor path.

This thread also made me spot an error in my standard settings.js! I normally have:

httpStatic: process.env.httpStatic || path.join('.', 'public'),

But this is actually incorrect, at least for the way that I run Node-RED, because that points to folder where I run npm start (manually run on my dev PC). It should be:

httpStatic: process.env.httpStatic || path.join(path.relative(process.cwd(), __dirname), 'public'),
8

So the simple work-around is to treat "icons" and "editor" (and others) as if they were reserved words and structure the directories differently.
"icons" works but "icons/subdirectory" doesn't.

Could the Node-red startup process look for these troublesome directories and issue a warning?
(Maybe it already does - who looks at the startup logs? :face_with_hand_over_mouth: )