Easier Management of Static Assets

[joepavitt]

Description

When building out Dashboards, it is often a requirement to have images, videos, or other static assets for your site. We could provide an optimised UX here that allows users to upload, manage and host static assets in Node-RED.

E.g. a basic folder/file management UX from the Node-RED sidebar? There could be benefit of this being a core Node-RED feature, but I see clear benefits of this for Dashboard-specifically.

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

[joepavitt]

I know Node-RED allows for the serving up of some static assets somehow, but I can't find any documentation or examples on how to do that. @Steve-Mcl would appreciate some insights here on what NR already offers in this space.

[bartbutenaers]

@joepavitt ,
You can see the 'httpStatic' setting here.

Personally I like the node-red-contrib-static node more, because it becomes visible in your flow where your static data is being served from...

[joepavitt]

So, if we made a new "Assets" tab in the Dashboard sidebar, that'd only work if a user had httpStatic setup in the settings.js. The other consequence of that is that it'd move the Editor too?

[arturv2000]

The httpStatic just indicates a folder where to store images / scripts.

The editor and dashboard stay in the default location.

I have this in one of my projects:

httpStatic: [
    {path: '/home/user/node-red-static/',    root: "/"},
    {path: '/home/user/node-red-static/Icons/Project2/', root: "/icons/"}
],

In order to load scripts for example:

<script src="/js/chart.js-4.4.2/package/dist/chart.umd.js"></script>

And in the case of icons...

//Replace Manifest
const manifest_icon = document.querySelector('link[rel="manifest"]');
if(manifest_icon){
    const link_manifest = document.createElement('link');
    link_manifest.href = '/Icons/site.webmanifest';
    link_manifest.rel = 'manifest';
    link_manifest.crossOrigin  = "use-credentials";
    document.head.replaceChild(link_manifest, manifest_icon);
}

In order to have the "Assets" tab, would say that is necessary to have the httpStatic defined in settings.js, and it would be necessary to select which of the paths to use, since we can define multiple static directories under different root paths. Unless the dashboard overrides / adds an extra path to httpStatic in case something is defined via GUI.

I can see some use for this to manage images / icons / etc... in order to be able to use auto-complete the text when including in a message payload for example.

[joepavitt]

The httpStatic just indicates a folder where to store images / scripts.
The editor and dashboard stay in the default location.

From the NR docs:

Unless the dashboard overrides / adds an extra path to httpStatic in case something is defined via GUI.

This was my thinking. Trying to work out how we lower the entry point for Dashboard users, want to make it as low-code as possible, and right now I think we're still too technical.

[bartbutenaers]

Yes indeed the httpStatic stuff is way too technical. You could setup an endpoint dedicated to serve stuff defined in the Assets tabsheet (without any usage of httpStatic). The node-red-contrib-static uses in its code a completely other non Node-RED typicla mechanism to serve the resources.

Of course you can think whether such a tabsheet is only useful for dashboard assets. Imho it would be useful if such a sidebar dedicated to Assets would be available, even if you don't have a dashboard running. But perhaps that might be a bit too general, and then it most probably will never happen...