# Uibuilder - directory to serve resources

**URL:** <https://discourse.nodered.org/t/uibuilder-directory-to-serve-resources/30018>\
**Category:** General\
**Created:** [13 July 2020 19:40 UTC](https://discourse.nodered.org/t/uibuilder-directory-to-serve-resources/30018 "2020-07-13T19:40:32Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [13 July 2020 19:40 UTC](https://discourse.nodered.org/t/uibuilder-directory-to-serve-resources/30018/1 "2020-07-13T19:40:32Z")

</div>

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:

```auto
<!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).

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [13 July 2020 21:05 UTC](https://discourse.nodered.org/t/uibuilder-directory-to-serve-resources/30018/2 "2020-07-13T21:05:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [13 July 2020 23:59 UTC](https://discourse.nodered.org/t/uibuilder-directory-to-serve-resources/30018/3 "2020-07-13T23:59:23Z")

</div>

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.

> [@Andrei](#):
>
> Ideally I wanted to use a directory structure outside the project folder

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.

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [14 July 2020 01:29 UTC](https://discourse.nodered.org/t/uibuilder-directory-to-serve-resources/30018/4 "2020-07-14T01:29:08Z")

</div>

Thank you very much Julian for such comprehensive explanation !!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [28 July 2020 01:29 UTC](https://discourse.nodered.org/t/uibuilder-directory-to-serve-resources/30018/5 "2020-07-28T01:29:14Z")

</div>

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