# Serving static files in uibuilder

**URL:** <https://discourse.nodered.org/t/serving-static-files-in-uibuilder/67024>\
**Category:** General\
**Tags:** uibuilder\
**Created:** [28 August 2022 07:06 UTC](https://discourse.nodered.org/t/serving-static-files-in-uibuilder/67024 "2022-08-28T07:06:50Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![miladmrm](https://avatars.discourse-cdn.com/v4/letter/m/a4c791/32.png) [@miladmrm](https://discourse.nodered.org/u/miladmrm)\
**Post date:** [28 August 2022 07:06 UTC](https://discourse.nodered.org/t/serving-static-files-in-uibuilder/67024/1 "2022-08-28T07:06:50Z")

</div>

I have a problem that I don't know if it's related to uibuilder or not, but since I tried elsewhere and that problem didn't exist, I decided to ask here.  
I have designed a ui using uibuilder that loads all logos and icons easily. I have used a map with openlayers.

```auto
const iconFeature = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.fromLonLat([51.338743, 35.699819])),
  name: 'Azadi',
});
const map = new ol.Map({
  target: 'map',
  layers: [
      new ol.layer.Tile({
          source: new ol.source.OSM(),
      }),
      new ol.layer.Vector({
          source: new ol.source.Vector({
              features: [iconFeature]
      }),
          style: new ol.style.Style({
              image: new ol.style.Icon({
                  anchor: [0.5, 2],
                  anchorXUnits: 'fraction',
                  anchorYUnits: 'pixels',
                  src: '../images/layout_img/map_icon.png'
                  // src: "https://openlayers.org/en/latest/examples/data/icon.png"
              })
          })
      })
  ],
  view: new ol.View({
      center: ol.proj.fromLonLat([51.338743, 35.699819]),
      zoom: 12
  })
});

```

However, when I try to change its marker icon, it cannot read the icon and gives the following error.

```auto
can not GET http://127.0.0.1:1880/images/layout_img/map_icon.png

```

I changed URI to `/platform/src/images/layout_img/map_icon.png` and again not worked.` Can not GET http://127.0.0.1:1880/platform/src/images/layout_img/map_icon.png`  
I searched a lot about it and couldn't find anything, also to make sure I wrote a small test server to make sure the problem wasn't my code (which it wasn't), so I guessed that the problem was with my referencing type in the URI or from the node-red side.

---

<div class="post-metadata">

**Author:** ![fmarzocca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fmarzocca/32/35901_2.png) [@fmarzocca](https://discourse.nodered.org/u/fmarzocca)\
**Post date:** [28 August 2022 07:56 UTC](https://discourse.nodered.org/t/serving-static-files-in-uibuilder/67024/2 "2022-08-28T07:56:44Z")

</div>

All my uibuilder custom images/icons are in this folder: `~/.node-red/uibuilder/<your-app-folder>/src/assets`  
and I point them with: `./assets/<image.png>` or` http://<your-ip>:1880/<your-app-folder>/assets/`

---

<div class="post-metadata">

**Author:** ![miladmrm](https://avatars.discourse-cdn.com/v4/letter/m/a4c791/32.png) [@miladmrm](https://discourse.nodered.org/u/miladmrm)\
**Post date:** [28 August 2022 08:09 UTC](https://discourse.nodered.org/t/serving-static-files-in-uibuilder/67024/3 "2022-08-28T08:09:04Z")

</div>

According to your answer I create assets folder in root of my app folder and i set the src URI in map to `'./assets/map_icon.png'` and then set to `'http://127.0.0.1:1880/platform/assets/map_icon.png` and non of them not worked and I encountered same error.

---

<div class="post-metadata">

**Author:** ![miladmrm](https://avatars.discourse-cdn.com/v4/letter/m/a4c791/32.png) [@miladmrm](https://discourse.nodered.org/u/miladmrm)\
**Post date:** [28 August 2022 09:07 UTC](https://discourse.nodered.org/t/serving-static-files-in-uibuilder/67024/4 "2022-08-28T09:07:08Z")

</div>

It's worked by this URI `'./images/layout_img/map_icon.png'`  
Apparently, uibuilder recognizes the `src` folder as a static folder, and I didn't know that!

---

<div class="post-metadata">

**Author:** ![fmarzocca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fmarzocca/32/35901_2.png) [@fmarzocca](https://discourse.nodered.org/u/fmarzocca)\
**Post date:** [28 August 2022 09:24 UTC](https://discourse.nodered.org/t/serving-static-files-in-uibuilder/67024/5 "2022-08-28T09:24:13Z")

</div>

Yes, my bad sorry. There was a typo in my previous message. Edited.

---

<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:** [30 August 2022 10:57 UTC](https://discourse.nodered.org/t/serving-static-files-in-uibuilder/67024/6 "2022-08-30T10:57:17Z")

</div>

> [@miladmrm](#):
>
> Apparently, uibuilder recognizes the `src` folder as a static folder, and I didn't know that!

uibuilder's `scr` or `dist` folders are static folders and always have been. 🙂

You can switch between the two using the setting in the advanced tab in the node. One day you will be able to use other folders but that hasn't got to the top of the list yet.

In recent uibuilder versions, you can also use the folder for server-side dynamic files as well if you wish, it uses EJS and is an option in the uibuilder section of settings.js.

---

<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:** [13 September 2022 10:58 UTC](https://discourse.nodered.org/t/serving-static-files-in-uibuilder/67024/7 "2022-09-13T10:58:01Z")

</div>

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