Uibuilder - directory to serve resources

General
1

I decided learning how to use uibuilder (it was about time...). In my first flow I want to create a web page with a single image, using only html/css/javascript. I will not try any front-end at this stage as this is purely for learning and to get acquainted with uibuilder.

I wonder how should be the directory structure for storing the images. I use projects so my the home folder for the testing flow is:

~/.node-red/projects/UI-BUILDER/uibuilder

Where I am supposed to store the image file ?

My htm file looks like:

<!DOCTYPE html>

<html>
    <head>
        
    </head>
    
    <body>
        <p>Hello Dashboard</p>
        <img src="speed-07.jpg" alt="speedometer" width="400" height="400">
        <canvas id="image-01" width="400" height="400"></canvas>

    <script src="../uibuilder/vendor/socket.io/socket.io.js"></script>
    <script src="./uibuilderfe.min.js"></script> <!--    //prod version -->
    <!-- OPTIONAL: Put your custom code in here -->
    <script src="./index.js"></script>
	
    </body>
    
</html>

I see that the index.html original example displays a blue logo (file node-blue-192x192.png) stored in:

C:\Users\OCM\.node-red\node_modules\node-red-contrib-uibuilder\nodes\src\images

I suppose I could move the png file to the same place but I wanted to learn what would be the best practice on storing resources for uibuilder. Ideally I wanted to use a directory structure outside the project folder (like I use to do with Node-RED dashboard using the HTTP static directory).

2

OMG, I just realized that I can use Node-Red HTTP static folder as usual. It is straightforward.

3

You can use that if you want or you can simply put your image in the same folder as the index.[html|js|css] files. Or you can create a sub-folder and put it there.

The parent folder for the node contains two folders, src and dest, the src folder is used normally unless you want to do a build step, in that case, you can use the dest folder by putting an index.html file in it, then that folder is used and you'll need to put your image in there.

The default png is in a master folder. In the next release it is going to be moved to a clearer location.

You can use links to do this very nicely. Simply create a link from the folder you want to use to store things into the src folder and reference from there. ExpressJS (and therefore uibuilder) is more than happy to work this way. But it keeps everything neat and tidy for your uibuilder app. It is also the most secure way to do it.

There is also a uibuilder common folder that is also served up as part of the root site so you can put shared files in there.

1 Like
4

Thank you very much Julian for such comprehensive explanation !!

1 Like
5

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