# Uibuilder error 404 (not found)

**URL:** <https://discourse.nodered.org/t/uibuilder-error-404-not-found/56919>\
**Category:** General\
**Tags:** uibuilder\
**Created:** [19 January 2022 12:36 UTC](https://discourse.nodered.org/t/uibuilder-error-404-not-found/56919 "2022-01-19T12:36:59Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![nerevar](https://avatars.discourse-cdn.com/v4/letter/n/f475e1/32.png) [@nerevar](https://discourse.nodered.org/u/nerevar)\
**Post date:** [19 January 2022 12:36 UTC](https://discourse.nodered.org/t/uibuilder-error-404-not-found/56919/1 "2022-01-19T12:36:59Z")

</div>

I've been having this problem recently.  
Usually I have a backup folder with another uibuilder instance so I can copy paste the code back, and sometimes it starts to work again by resetting the node-red, but most of the time it doesn't so I have to delete entire folder and remove uibuilder instance and then start again.

So I get: "Cannot GET /chart\_vega\_vue/" message in the browser, and in console this:  
"GET [http://localhost:1880/chart\_vega\_vue/](http://localhost:1880/chart_vega_vue/) 404 (Not Found)"

Node-red start log:

```auto
19 Jan 13:08:03 - [info]

Welcome to Node-RED
===================

19 Jan 13:08:03 - [info] Node-RED version: v1.3.4
19 Jan 13:08:03 - [info] Node.js version: v14.16.1
19 Jan 13:08:03 - [info] Windows_NT 10.0.19043 x64 LE
19 Jan 13:08:04 - [info] Loading palette nodes
19 Jan 13:08:06 - [info] mDashboard version 2.19.4-beta started at /mui
19 Jan 13:08:07 - [info] Dashboard version 2.30.0 started at /ui
19 Jan 13:08:08 - [info] Settings file : C:\Users\rtkl1\.node-red\settings.js
19 Jan 13:08:08 - [info] HTTP Static : C:\Users\rtkl1\.node-red\node-red-static
19 Jan 13:08:08 - [info] Context store : 'default' [module=memory]
19 Jan 13:08:08 - [info] User directory : C:\Users\rtkl1\.node-red
19 Jan 13:08:08 - [warn] Projects disabled : editorTheme.projects.enabled=false
19 Jan 13:08:08 - [info] Flows file : C:\Users\rtkl1\.node-red\flows_TOMISLAVK-W10.json
19 Jan 13:08:08 - [info] Server now running at http://127.0.0.1:1880/
19 Jan 13:08:08 - [warn]

---------------------------------------------------------------------
Your flow credentials file is encrypted using a system-generated key.

If the system-generated key is lost for any reason, your credentials
file will not be recoverable, you will have to delete it and re-enter
your credentials.

You should set your own key using the 'credentialSecret' option in
your settings file. Node-RED will then re-encrypt your credentials
file using your chosen key the next time you deploy a change.
---------------------------------------------------------------------

19 Jan 13:08:08 - [info] +-----------------------------------------------------
19 Jan 13:08:08 - [info] | uibuilder v4.1.4 initialised
19 Jan 13:08:08 - [info] | root folder: C:\Users\rtkl1\.node-red\uibuilder
19 Jan 13:08:08 - [info] | Using Node-RED's webserver at:
19 Jan 13:08:08 - [info] | http://192.168.111.1:1880/ or http://localhost:1880/
19 Jan 13:08:08 - [info] | Installed packages:
19 Jan 13:08:08 - [info] | socket.io, jquery, vue, bootstrap-vue
19 Jan 13:08:08 - [info] | bootstrap, moonjs, normalize.css, http-vue-loader
19 Jan 13:08:08 - [info] +-----------------------------------------------------
19 Jan 13:08:08 - [info] Starting flows
19 Jan 13:08:08 - [error] [uibuilder:nodeInstance] RENAME OF INSTANCE FOLDER FAILED. Fatal. url=chart_chartkick, oldUrl=chart_apex, Fldr=C:\Users\rtkl1\.node-red\uibuilder\chart_chartkick. Error=dest already exists.
19 Jan 13:08:08 - [info] Started flows
19 Jan 13:08:08 - [info] [sqlitedb:b17145b6.55f138] opened quilters_data.db ok
19 Jan 13:08:08 - [info] [sqlitedb:5f640143.882b6] opened db1.db ok
19 Jan 13:08:08 - [info] [sqlitedb:e6f1ebca.19e6a8] opened db2.db ok

```

Yes, I know I have multiple dashboards and some errors in one of the instances, but everything else works OK instead this one. Currently I have 15 uibuilder instances installed because I'm testing everything out as part of the learning process.

As I figured, when there is some error in the code of the uibuilder e.g. 2x the same method name, it goes to 404 (not found).

Then, I copy the last working code from another instance but it still doesn't work.

Is there any other way to debug this?

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [19 January 2022 15:15 UTC](https://discourse.nodered.org/t/uibuilder-error-404-not-found/56919/2 "2022-01-19T15:15:54Z")

</div>

> [@nerevar](#):
>
> ```auto
> [uibuilder:nodeInstance] RENAME OF INSTANCE FOLDER FAILED. Fatal. url=chart_chartkick, oldUrl=chart_apex, Fldr=C:\Users\rtkl1\.node-red\uibuilder\chart_chartkick. Error=dest already exists.
> 
> ```

apparently you are trying to set a URL (`chart_chartkick`) on a uibuilder node with a name that was previously used and its folder exists. uibuilder gives you that error warning and doesnt delete the folder to protect you from losing any code.

go into `./node-red/uibuilder/` and share a screenshot of the folders in there  
is there a folder already named `chart_chartkick` ?

---

<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:** [19 January 2022 17:27 UTC](https://discourse.nodered.org/t/uibuilder-error-404-not-found/56919/3 "2022-01-19T17:27:36Z")

</div>

> [@UnborN](#):
>
> apparently you are trying to set a URL ( `chart_chartkick` ) on a uibuilder node with a name that was previously used and its folder exists. uibuilder gives you that error warning and doesnt delete the folder to protect you from losing any code.

Actually, I think that is a weakness in the processing used in uibuilder v4, resolved in vNext.

Just make sure that the content of that folder is what you think it is. Also, maybe change the name setting (not the url) for the node set to `chart_chartkick` and redeploy, that error may go away.

But that isn't the instance causing the 404 I don't think. The one creating the 404 has the url `chart_vega_vue`. Make sure that there is a matching folder at `C:\Users\rtkl1\.node-red\uibuilder\chart_vega_vue` and that it contains the code you expect it to.

> [@nerevar](#):
>
> Usually I have a backup folder with another uibuilder instance so I can copy paste the code back, and sometimes it starts to work again by resetting the node-red, but most of the time it doesn't so I have to delete entire folder and remove uibuilder instance and then start again.

This certainly shouldn't be needed. Remember that the code for your web UI lives in the filing system under `C:\Users\rtkl1\.node-red\uibuilder\`, not in Node-RED. You shouldn't need to do anything to Node-RED other than possibly a redeploy.

---

<div class="post-metadata">

**Author:** ![nerevar](https://avatars.discourse-cdn.com/v4/letter/n/f475e1/32.png) [@nerevar](https://discourse.nodered.org/u/nerevar)\
**Post date:** [19 January 2022 19:04 UTC](https://discourse.nodered.org/t/uibuilder-error-404-not-found/56919/4 "2022-01-19T19:04:36Z")

</div>

> [@UnborN](#):
>
> go into `./node-red/uibuilder/` and share a screenshot of the folders in there  
> is there a folder already named `chart_chartkick` ?

Yes, apparently it wasn't deleted from the disk before rename. It will be fixed in the next uibuilder 👍  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/0/9000dd6bbbeec9e927643a52230bf82263e94494.png)

> [@TotallyInformation](#):
>
> Just make sure that the content of that folder is what you think it is. Also, maybe change the name setting (not the url) for the node set to `chart_chartkick` and redeploy, that error may go away.

I opened the node, viewed the files, closed and redeployed and its gone - however, it wasn't related to the error 404, as you said.

> [@TotallyInformation](#):
>
> Make sure that there is a matching folder at `C:\Users\rtkl1\.node-red\uibuilder\chart_vega_vue` and that it contains the code you expect it to.

It does. I was using Visual Studio Code, maybe it breaks the instance if there is an error in the code?  
After it brake I copied the code from backup instance and pasted in VSC and it didnt work:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/a/4a922a82c9d6243c701bf7e09c19d272ddf55001.png)

Then I copied the html and JS files from backup instance folder to the `C:\Users\rtkl1\.node-red\uibuilder\chart_vega_vue` and now it works.

Odd

---

<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:** [19 January 2022 22:48 UTC](https://discourse.nodered.org/t/uibuilder-error-404-not-found/56919/5 "2022-01-19T22:48:04Z")

</div>

> [@nerevar](#):
>
> I was using Visual Studio Code, maybe it breaks the instance if there is an error in the code?

Nope, you can have insane errors and everything is still ok - don't bother asking me how I know 😀

I use VScode regularly to edit my front-end code and I've done all sorts of messing with build steps too.

> [@nerevar](#):
>
> After it brake I copied the code from backup instance and pasted in VSC and it didnt work

The odd thing is that if uibuilder can't find a `src/index.html` or `dist/index.html`, it should try to fall back to a default built into uibuilder itself I think.

It is possible though that v4 code doesn't cope so well with something going missing mid-stride. So if you replace the code, try restarting Node-RED to see if uibuilder picks it up again. I've certainly done some serious work on the dynamics for v5 so it should be a lot more robust and you can also more easily change between `src` and `dist` folders as well without needing to restart node-red.

---

<div class="post-metadata">

**Author:** ![nerevar](https://avatars.discourse-cdn.com/v4/letter/n/f475e1/32.png) [@nerevar](https://discourse.nodered.org/u/nerevar)\
**Post date:** [20 January 2022 06:33 UTC](https://discourse.nodered.org/t/uibuilder-error-404-not-found/56919/6 "2022-01-20T06:33:39Z")

</div>

Hello,

Today I started the Node-RED on windows. The uibuilder instance `chart_vega_vue` which I have managed to get running somehow yesterday is not working anymore (`Cannot GET /chart_vega_vue/` and 404 Not Found).

So I updated the Node-RED to 2.1.6. - didn't made a difference to this error  
I did Node-RED restart  
Then I pasted with overwrite the files from my backup instance which works - still nothing  
I did Node-RED restart - still nothing  
Then I deleted the index files first, and then pasted the working files - still nothing

all the time my other instance works with no problems... I don't understand..

Btw this are the instance folders (dist wasn't created when renaming):  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/0/b04b5671cd65435bc0c0d893dc469f3688cef4e0.png)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/f/3f5e8e349f22e359d9d2428224da541b853ea476.png)

Any way to debug this?

---

<div class="post-metadata">

**Author:** ![nerevar](https://avatars.discourse-cdn.com/v4/letter/n/f475e1/32.png) [@nerevar](https://discourse.nodered.org/u/nerevar)\
**Post date:** [20 January 2022 08:24 UTC](https://discourse.nodered.org/t/uibuilder-error-404-not-found/56919/7 "2022-01-20T08:24:32Z")

</div>

I've manualy created the dist folder, moved the instance node so I can redeploy and now it works again..  
Next node-red shutdown (with `ctrl+c` on windows cmd, then `y+enter`) and sratrt up - again doesn't work.  
Then I moved the instance node and redeployed and it works again. Why?

---

<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:** [20 January 2022 09:58 UTC](https://discourse.nodered.org/t/uibuilder-error-404-not-found/56919/8 "2022-01-20T09:58:51Z")

</div>

> [@nerevar](#):
>
> Any way to debug this?

I assume that you've been checking the Node-RED log for errors as you go along? I think that you will need to turn the log to TRACE rather than the default INFO. I have a custom logging function that only outputs uibuilder trace messages which cuts down on all the other stuff you otherwise get. Shared in the forum somewhere.

What are the JSON files for in the src folder? And can you share your HTML and JS files?

The other thing to do of course is to set up a new uibuilder instance, check that it doesn't exhibit these issues and then copy your front-end code into the src folder and see if it starts to have the same issues. That will tell us whether this is a uibuilder issue (back-end) or a front-end issue hopefully.

---

<div class="post-metadata">

**Author:** ![nerevar](https://avatars.discourse-cdn.com/v4/letter/n/f475e1/32.png) [@nerevar](https://discourse.nodered.org/u/nerevar)\
**Post date:** [20 January 2022 11:32 UTC](https://discourse.nodered.org/t/uibuilder-error-404-not-found/56919/9 "2022-01-20T11:32:21Z")

</div>

Hi,

here are the files. I'll try to look for the logs after I come home from work 👍

> **Files**
>
> bar.json
> 
> ```auto
> {
> "description": "A basic stacked bar chart example.",
> "width": 500,
> "height": 200,
> "padding": 5,
>   
> "data": [
> {
> "name": "table",
> "transform": [
> {
> "type": "stack",
> "groupby": ["x"],
> "sort": {"field": "c"},
> "field": "y"
> }
> ]
> }
> ],
>   
> "scales": [
> {
> "name": "x",
> "type": "band",
> "range": "width",
> "domain": {"data": "table", "field": "x"}
> },
> {
> "name": "y",
> "type": "linear",
> "range": "height",
> "nice": true, "zero": true,
> "domain": {"data": "table", "field": "y1"}
> },
> {
> "name": "color",
> "type": "ordinal",
> "range": "category",
> "domain": {"data": "table", "field": "c"}
> }
> ],
>   
> "axes": [
> {"orient": "bottom", "scale": "x", "zindex": 1},
> {"orient": "left", "scale": "y", "zindex": 1}
> ],
>   
> "marks": [
> {
> "type": "rect",
> "from": {"data": "table"},
> "encode": {
> "enter": {
> "x": {"scale": "x", "field": "x"},
> "width": {"scale": "x", "band": 1, "offset": -1},
> "y": {"scale": "y", "field": "y0"},
> "y2": {"scale": "y", "field": "y1"},
> "fill": {"scale": "color", "field": "c"}
> },
> "update": {
> "fillOpacity": {"value": 1}
> },
> "hover": {
> "fillOpacity": {"value": 0.5}
> }
> }
> }
> ]
> }
> 
> ```
> 
> bar2.json
> 
> ```auto
> {
> "description": "A basic stacked bar chart example.",
> "width": 500,
> "height": 200,
> "padding": 5,
>   
> "data": [
> {
> "name": "table2",
> "transform": [
> {
> "type": "stack",
> "groupby": ["x"],
> "sort": {"field": "c"},
> "field": "y"
> }
> ]
> }
> ],
>   
> "scales": [
> {
> "name": "x",
> "type": "band",
> "range": "width",
> "domain": {"data": "table2", "field": "x"}
> },
> {
> "name": "y",
> "type": "linear",
> "range": "height",
> "nice": true, "zero": true,
> "domain": {"data": "table2", "field": "y1"}
> },
> {
> "name": "color",
> "type": "ordinal",
> "range": "category",
> "domain": {"data": "table2", "field": "c"}
> }
> ],
>   
> "axes": [
> {"orient": "bottom", "scale": "x", "zindex": 1},
> {"orient": "left", "scale": "y", "zindex": 1}
> ],
>   
> "marks": [
> {
> "type": "rect",
> "from": {"data": "table2"},
> "encode": {
> "enter": {
> "x": {"scale": "x", "field": "x"},
> "width": {"scale": "x", "band": 1, "offset": -1},
> "y": {"scale": "y", "field": "y0"},
> "y2": {"scale": "y", "field": "y1"},
> "fill": {"scale": "color", "field": "c"}
> },
> "update": {
> "fillOpacity": {"value": 1}
> },
> "hover": {
> "fillOpacity": {"value": 0.5}
> }
> }
> }
> ]
> }
> 
> ```
> 
> index.css
> 
> ```auto
> /* Cloak elements on initial load to hide the possible display of {{ ... }} 
> * Add to the app tag or to specific tags
> * To display "loading...", change to the following:
> * [v-cloak] > * { display:none }
> * [v-cloak]::before { content: "loading…" }
> */
> [v-cloak] { display: none; }
> 
> /* Colours for Syntax Highlighted pre's */
>  
> body{
> background: rgb(0, 0, 0);
> max-width: 1250px;
> margin: 20px auto;
> }
> h1{
> color: red;
> }
> .vega1{
> margin: 10;
> position: absolute;
> top: 50%;
> -ms-transform: translateY(0%);
> transform: translateY(0%);
> }
> .syntax-highlight {color:white;background-color:rgb(184, 9, 9);padding:5px 10px;}
> .syntax-highlight > .key {color:#ffbf35}
> .syntax-highlight > .string {color:#5dff39;}
> .syntax-highlight > .number {color:#70aeff;}
> .syntax-highlight > .boolean {color:#b993ff;}
> 
> ```
> 
> index.html
> 
> ```auto
> <!doctype html>
> <html lang="en"><head>
> 
> <meta charset="utf-8">
> <meta http-equiv="X-UA-Compatible" content="IE=edge">
> <meta name="viewport" content="width=device-width, initial-scale=1">
> 
> <title>Node-RED UI Builder - VueJS + bootstrap-vue default template</title>
> <meta name="description" content="Node-RED UI Builder - VueJS + bootstrap-vue default template">
> 
> <link rel="icon" href="./images/node-blue.ico">
> 
> <link type="text/css" rel="stylesheet" href="../uibuilder/vendor/bootstrap/dist/css/bootstrap.min.css" />
> <link type="text/css" rel="stylesheet" href="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.css" />
> <!-- Your own CSS -->
> <link type="text/css" rel="stylesheet" href="./index.css" media="all">
> 
> </head><body>
> 
> <div id="app" v-cloak>
> <b-container id="app_container">
> <div id="view" class="vega1"></div>
> <div id="view2" class="vega1"></div>
>             
> 
> <b-card class="mt-3" header="Normal Messages" border-variant="primary" header-bg-variant="primary" header-text-variant="white" align="left" >
> 
>                 
> <b-button pill variant="primary" v-on:click="dataLoad">Load</b-button>
> <b-button pill variant="secondary" v-on:click="dataReset">Reset</b-button><br /> 
> <br /> 
> 
> <pre id="msg" v-html="showLastReceivedMsg" class="syntax-highlight">Waiting for a message from Node-RED</pre>
> 
> <p>
> Messages: Received=<b>{{msgsReceived}}</b>, Sent=<b>{{msgsSent}}</b>
> </p>
> <pre v-html="hLastRcvd" class="syntax-highlight"></pre>
> <pre v-html="hLastSent" class="syntax-highlight"></pre>
> <p slot="footer" class="mb-0">
> The received message is from the input to the uibuilder node.
> The send message will appear out of port #1 of the node.
> </p>
> </b-card>
> 
> </b-container>
> 
> </div>
>  
> 
> <!-- These MUST be in the right order. Note no leading / -->
> 
> <!-- REQUIRED: Socket.IO is loaded only once for all instances. Without this, you don't get a websocket connection -->
> <script src="../uibuilder/vendor/socket.io/socket.io.js"></script>
> 
> <!-- Vendor Libraries - Load in the right order, use minified, production versions for speed -->
> <script src="../uibuilder/vendor/vue/dist/vue.js"></script> <!-- dev version with component compiler -->
> <!-- <script src="../uibuilder/vendor/vue/dist/vue.min.js"></script> prod version with component compiler -->
> <!-- <script src="../uibuilder/vendor/vue/dist/vue.runtime.min.js"></script> prod version without component compiler -->
> <script src="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.js"></script> <!-- Dev version -->
> <!-- <script src="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.min.js"></script> Prod version -->
> 
> <!-- 
> <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
> <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
> -->
> <script src="http://localhost:1880/vega.js"></script>
> <script src="http://localhost:1880/vega-embed.js"></script>
> <!-- REQUIRED: Sets up Socket listeners and the msg object -->
> <script src="./uibuilderfe.js"></script> <!-- dev version -->
> <!-- <script src="./uibuilderfe.min.js"></script> prod version -->
> 
> <!-- OPTIONAL: You probably want this. Put your custom code here -->
> <script src="./index.js"></script>
> 
> </body></html>
> 
> ```
> 
> index.js
> 
> ```auto
> /* jshint browser: true, esversion: 5, asi: true */
> /*globals Vue, uibuilder */
> // @ts-nocheck
> /*
> Copyright (c) 2021 Julian Knight (Totally Information)
> 
> Licensed under the Apache License, Version 2.0 (the "License");
> you may not use this file except in compliance with the License.
> You may obtain a copy of the License at
> 
> http://www.apache.org/licenses/LICENSE-2.0
> 
> Unless required by applicable law or agreed to in writing, software
> distributed under the License is distributed on an "AS IS" BASIS,
> WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
> See the License for the specific language governing permissions and
> limitations under the License.
> */
> 'use strict'
> 
> /** @see https://totallyinformation.github.io/node-red-contrib-uibuilder/#/front-end-library */
> 
> /** Reference the component (removes need for a build step with import) */
> //Vue.component('v-chart', VueECharts)
> 
> /** Reference the apexchart component (removes need for a build step) */
> //Vue.component('apexchart', VueApexCharts)
> 
> // eslint-disable-next-line no-unused-vars
> const app = new Vue({
> el: '#app',
> 
> data() { return {
> 
> startMsg : 'Vue has started, waiting for messages',
> feVersion : '',
> counterBtn : 0,
> inputText : null,
> inputChkBox : false,
> socketConnectedState : false,
> serverTimeOffset : '[unknown]',
> imgProps : { width: 75, height: 75 },
> 
> lastMsg : '[Nothing]',
> msgR_NR: '[Nothing]',
> msgsReceivedNR: 0,
> msgRecvd : '[Nothing]',
> msgsReceived: 0,
> msgCtrl : '[Nothing]',
> msgsControl : 0,
> 
> msgSent : '[Nothing]',
> msgsSent : 0,
> msgCtrlSent : '[Nothing]',
> msgsCtrlSent: 0,
> 
> isLoggedOn : false,
> userId : null,
> userPw : null,
> inputId : '',
> 
> }}, // --- End of data --- //
> 
> computed: {
> 
> /*hNR_Rcvd: function() {
> var msgR_NR = this.msgR_NR
> if (typeof msgR_NR === 'string') return 'Last Message Received = ' + msgR_NR
> else return 'Last Message Received = ' + this.syntaxHighlight(msgR_NR)
> },*/
> 
> showLastReceivedMsg: function() {
> var lastMsg = this.lastMsg
> if (typeof lastMsg === 'string') return 'Last Message Received = ' + lastMsg
> else return 'Last Message Received = ' + this.syntaxHighlight(lastMsg)
> },
> 
> hLastRcvd: function() {
> var msgRecvd = this.msgRecvd
> if (typeof msgRecvd === 'string') return 'Last Message Received = ' + msgRecvd
> else return 'Last Message Received = ' + this.syntaxHighlight(msgRecvd)
> },
> hLastSent: function() {
> var msgSent = this.msgSent
> if (typeof msgSent === 'string') return 'Last Message Sent = ' + msgSent
> else return 'Last Message Sent = ' + this.syntaxHighlight(msgSent)
> },
> hLastCtrlRcvd: function() {
> var msgCtrl = this.msgCtrl
> if (typeof msgCtrl === 'string') return 'Last Control Message Received = ' + msgCtrl
> else return 'Last Control Message Received = ' + this.syntaxHighlight(msgCtrl)
> },
> hLastCtrlSent: function() {
> var msgCtrlSent = this.msgCtrlSent
> if (typeof msgCtrlSent === 'string') return 'Last Control Message Sent = ' + msgCtrlSent
> //else return 'Last Message Sent = ' + this.callMethod('syntaxHighlight', [msgCtrlSent])
> else return 'Last Control Message Sent = ' + this.syntaxHighlight(msgCtrlSent)
> },
>         
> 
> }, // --- End of computed --- //
>  
> methods: {
> 
> dataReset: function() {
> console.log('Reset.')
> /*uibuilder.send( {
> topic: 'load'
> })*/
> 
> },
> dataLoad: function() {
> console.log('Button Pressed.')
> uibuilder.send( {
> topic: 'load'
> })
> 
> },
> 
> /*
> contextLoad: function() {
> uibuilder.send({topic:'load_content1'})
> },
> 
> contextSave: function() {
> console.log('Save: ', this.content1)
> uibuilder.send( {
> 'topic': 'save_content1',
> 'payload': {
> 'type': 'save',
> 'btnCount': this.content1
> }
> } )
> },
> */
> 
> // Called from the increment button - sends a msg to Node-RED
> /*
> increment: function(event) {
> console.log('Button Pressed. Event Data: ', event)
> 
> // Increment the count by one
> this.counterBtn = this.counterBtn + 1
> var topic = this.msgRecvd.topic || 'uibuilder/vue'
> uibuilder.send( {
> 'topic': topic,
> 'payload': {
> 'type': 'counterBtn',
> 'btnCount': this.counterBtn,
> 'message': this.inputText,
> 'inputChkBox': this.inputChkBox
> }
> } )
> 
> }, // --- End of increment --- //
> */
> // REALLY Simple method to return DOM events back to Node-RED. See the 2nd b-button on the default html
> doEvent: uibuilder.eventSend,
> 
> // return formatted HTML version of JSON object
> syntaxHighlight: function(json) {
> json = JSON.stringify(json, undefined, 4)
> json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
> json = json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
> var cls = 'number'
> if (/^"/.test(match)) {
> if (/:$/.test(match)) {
> cls = 'key'
> } else {
> cls = 'string'
> }
> } else if (/true|false/.test(match)) {
> cls = 'boolean'
> } else if (/null/.test(match)) {
> cls = 'null'
> }
> return '<span class="' + cls + '">' + match + '</span>'
> })
> return json
> }, // --- End of syntaxHighlight --- //
> 
> }, // --- End of methods --- //
> 
> // Available hooks: beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed, activated,deactivated, errorCaptured
> 
> /** Called after the Vue app has been created. A good place to put startup code */
> created: function() {
> 
> // Example of retrieving data from uibuilder
> this.feVersion = uibuilder.get('version')
> 
> / ****REQUIRED** Start uibuilder comms with Node-RED @since v2.0.0-dev3
> * Pass the namespace and ioPath variables if hosting page is not in the instance root folder
> * e.g. If you get continual `uibuilderfe:ioSetup: SOCKET CONNECT ERROR` error messages.
> * e.g. uibuilder.start('/uib', '/uibuilder/vendor/socket.io') // change to use your paths/names
> * @param {Object=|string=} namespace Optional. Object containing ref to vueApp, Object containing settings, or String IO Namespace override. changes self.ioNamespace from the default.
> * @param {string=} ioPath Optional. changes self.ioPath from the default
> * @param {Object=} vueApp Optional. Reference to the VueJS instance. Used for Vue extensions.
> */
> uibuilder.start(this) // Single param passing vue app to allow Vue extensions to be used.
> 
> //console.log(this)
> 
> }, // --- End of created hook --- //
> 
> /** Called once all Vue component instances have been loaded and the virtual DOM built */
> mounted: function(){
>         
> var app = this // Reference to `this` in case we need it for more complex functions
> const origData = [
> {"x": 0, "y": 0, "c": 0}, {"x": 0, "y": 0, "c": 1},
> {"x": 1, "y": 0, "c": 0}, {"x": 1, "y": 0, "c": 1},
> {"x": 2, "y": 0, "c": 0}, {"x": 2, "y": 0, "c": 1},
> {"x": 3, "y": 0, "c": 0}, {"x": 3, "y": 0, "c": 1},
> {"x": 4, "y": 0, "c": 0}, {"x": 4, "y": 0, "c": 1},
> {"x": 5, "y": 0, "c": 0}, {"x": 5, "y": 0, "c": 1},
> {"x": 6, "y": 0, "c": 0}, {"x": 6, "y": 0, "c": 1},
> {"x": 7, "y": 0, "c": 0}, {"x": 7, "y": 0, "c": 1},
> {"x": 8, "y": 0, "c": 0}, {"x": 8, "y": 0, "c": 1},
> {"x": 9, "y": 0, "c": 0}, {"x": 9, "y": 0, "c": 1}
> ]
> 
> const origData2 = [
> {"x": 0, "y": 58, "c": 0}, {"x": 0, "y": 55, "c": 1},
> {"x": 1, "y": 43, "c": 0}, {"x": 1, "y": 91, "c": 1},
> {"x": 2, "y": 81, "c": 0}, {"x": 2, "y": 53, "c": 1},
> {"x": 3, "y": 19, "c": 0}, {"x": 3, "y": 87, "c": 1},
> {"x": 4, "y": 52, "c": 0}, {"x": 4, "y": 48, "c": 1},
> {"x": 5, "y": 24, "c": 0}, {"x": 5, "y": 49, "c": 1},
> {"x": 6, "y": 87, "c": 0}, {"x": 6, "y": 66, "c": 1},
> {"x": 7, "y": 17, "c": 0}, {"x": 7, "y": 87, "c": 1},
> {"x": 8, "y": 18, "c": 0}, {"x": 8, "y": 16, "c": 1},
> {"x": 9, "y": 49, "c": 0}, {"x": 9, "y": 15, "c": 1}
> ]
>     
> const vlJson = "bar.json"
> // Embed visualization and save view as window.view:
> vegaEmbed('#view', vlJson).then( res => {
> res.view
> .insert('table', origData)
> .run()
> // Save the view to window.view for later use
> window.view = res.view
> })
> vegaEmbed('#view2', vlJson).then( res => {
> res.view
> .insert('table', origData2)
> .run()
> // Save the view to window.view for later use
> window.view = res.view
> })
> //console.log(vega.changeset())
> 
>         
> 
> /*
> uibuilder.onChange('msg', function (newVal) {
> // We are assuming that msg.payload is an array like [datenum, value]
> 
> // Add new element
> vueApp.areaChartData.push( new Array( (new Date(newVal.payload[0])), newVal.payload[1] ) )
> 
> // If data array > 1000 points, keep it at that length by losing the first point
> if ( vueApp.areaChartData.length > 10 ) vueApp.areaChartData.shift()
> 
> //console.log(vueApp.areaChartData)
> })
> 
> uibuilder.onChange('msg', function (newVal) {
> if ( typeof newVal.payload === 'number' ){
> // Add new element
> vueApp.dseries.push(newVal.payload)
> // Lose the first element
> vueApp.dseries.shift()
> //console.log(vueApp.dseries)
> }
> })
>         
> */
> 
> /*
> 
> // Listen for incoming messages from Node-RED
> uibuilder.onChange('msg', function(msg){
> console.info('[indexjs:uibuilder.onChange] msg received from Node-RED server:', msg)
>         
> // dump the msg as text to the "msg" html element
> const eMsg = document.getElementById('msg')
> eMsg.innerHTML = window.syntaxHighlight(msg)
>         
> var changeSet = vega
> .changeset()
> .insert(msg.payload)
> // .remove(function (t) {
> // return t.x < minimumX
> // })
> window.view.change('myData', changeSet).run().resize()
>         
> // Changeset needs to remove everything first, then insert new data
> // let changeset = vega.changeset().remove(() => true).insert(data);
> // For some reason source_0 is the default dataset name
> // view.change('source_0', changeset).run()
> })
> 
> */
> 
> uibuilder.onChange('msg', function(msg){
> console.info('[indexjs:uibuilder.onChange] msg received from Node-RED server:', msg)
> app.msgRecvd = msg
> app.msgsReceived = uibuilder.get('msgsReceived')
> app.lastMsg = msg
> })
> 
> //#region ---- Debug info, can be removed for live use ---- //
> /** You can use the following to help trace how messages flow back and forth.
> * You can then amend this processing to suite your requirements.
> */
> // If we receive a control message from Node-RED, we can get the new data here - we pass it to a Vue variable
> uibuilder.onChange('ctrlMsg', function(msg){
> //console.info('[indexjs:uibuilder.onChange:ctrlMsg] CONTROL msg received from Node-RED server:', msg)
> app.msgCtrl = msg
> app.msgsControl = uibuilder.get('msgsCtrl')
> })
> /** You probably only need these to help you understand the order of processing
> * If a message is sent back to Node-RED, we can grab a copy here if we want to
> */
> uibuilder.onChange('sentMsg', function(msg){
> //console.info('[indexjs:uibuilder.onChange:sentMsg] msg sent to Node-RED server:', msg)
> app.msgSent = msg
> app.msgsSent = uibuilder.get('msgsSent')
> })
> /** If we send a control message to Node-RED, we can get a copy of it here */
> uibuilder.onChange('sentCtrlMsg', function(msg){
> //console.info('[indexjs:uibuilder.onChange:sentCtrlMsg] Control message sent to Node-RED server:', msg)
> app.msgCtrlSent = msg
> app.msgsCtrlSent = uibuilder.get('msgsSentCtrl')
> })
> /** If Socket.IO connects/disconnects, we get true/false here */
> uibuilder.onChange('ioConnected', function(connected){
> //console.info('[indexjs:uibuilder.onChange:ioConnected] Socket.IO Connection Status Changed to:', connected)
> app.socketConnectedState = connected
> })
> /** If Server Time Offset changes */
> uibuilder.onChange('serverTimeOffset', function(serverTimeOffset){
> //console.info('[indexjs:uibuilder.onChange:serverTimeOffset] Offset of time between the browser and the server has changed to:', serverTimeOffset)
> app.serverTimeOffset = serverTimeOffset
> })
> /** If user is logged on/off */
> uibuilder.onChange('isAuthorised', function(isAuthorised){
> //console.info('[indexjs:uibuilder.onChange:isAuthorised] isAuthorised changed. User logged on?:', isAuthorised)
> //console.log('authData: ', uibuilder.get('authData'))
> //console.log('authTokenExpiry: ', uibuilder.get('authTokenExpiry'))
> app.isLoggedOn = isAuthorised
> })
> //#endregion ---- Debug info, can be removed for live use ---- //
> }, // --- End of mounted hook --- //
> }) // --- End of app1 --- //
> // EOF
> 
> ```

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [20 January 2022 11:49 UTC](https://discourse.nodered.org/t/uibuilder-error-404-not-found/56919/10 "2022-01-20T11:49:24Z")

</div>

> [@nerevar](#):
>
> ```auto
> <script src="http://localhost:1880/vega.js"></script>
> <script src="http://localhost:1880/vega-embed.js"></script>
> 
> ```

Hello Tomislav ..

are the above lines correct ? From where are you loading those vega scripts ?  
Have you setup Node-red's `httpStatic` option in `settings.js` by any chance and you have the scripts loading from there ?

---

<div class="post-metadata">

**Author:** ![nerevar](https://avatars.discourse-cdn.com/v4/letter/n/f475e1/32.png) [@nerevar](https://discourse.nodered.org/u/nerevar)\
**Post date:** [20 January 2022 11:51 UTC](https://discourse.nodered.org/t/uibuilder-error-404-not-found/56919/11 "2022-01-20T11:51:18Z")

</div>

Yes (to all) 👍

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [20 January 2022 12:03 UTC](https://discourse.nodered.org/t/uibuilder-error-404-not-found/56919/12 "2022-01-20T12:03:17Z")

</div>

> [@nerevar](#):
>
> "GET [http://localhost:1880/chart\_vega\_vue/](http://localhost:1880/chart_vega_vue/) 404 (Not Found)"

ok .. just confirming because in the error you mentioned, you were possibly trying to load from the `chart_vega_vue` path that doesnt seem to exist .. so double check.

* * *

also what do you expect to happen with this line ?  
`const vlJson = "bar.json"`  
read and load the bar.json file ?  
([look into using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) or better send the bar.json file from Node-red to uibuilder and then trigger the draw of the chart )

---

<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:** [20 January 2022 13:34 UTC](https://discourse.nodered.org/t/uibuilder-error-404-not-found/56919/13 "2022-01-20T13:34:31Z")

</div>

Vega and Vega-lite are both available as npm packages. That means that you can use uibuilder to serve the code.

Also, it is best practice to avoid using the scheme, host and port in your URL's in the HTML file. Instead use the relative URLs so that things don't break if, for example, you access the page from a different device. At the moment, your URL's will only work when the browser is on the same device as the server.

---

<div class="post-metadata">

**Author:** ![nerevar](https://avatars.discourse-cdn.com/v4/letter/n/f475e1/32.png) [@nerevar](https://discourse.nodered.org/u/nerevar)\
**Post date:** [23 January 2022 19:07 UTC](https://discourse.nodered.org/t/uibuilder-error-404-not-found/56919/14 "2022-01-23T19:07:21Z")

</div>

> [@TotallyInformation](#):
>
> I assume that you've been checking the Node-RED log for errors as you go along? I think that you will need to turn the log to TRACE rather than the default INFO.

Yes I've tried that but havent seen any errors.  
Here's the trace of the problematic instance:

> **trace log**
>
> ```auto
> 23 Jan 18:56:25 - [trace] [uibuilder:nodeInstance:chart_vega_vue] ================ instance registered ================
> 23 Jan 18:56:25 - [trace] [uibuilder:nodeInstance:chart_vega_vue] node keys: ["id","type","z","g","_closeCallbacks","_inputCallback","_inputCallbacks","wires","_wireCount","send","credentials"]
> 23 Jan 18:56:25 - [trace] [uibuilder:nodeInstance:chart_vega_vue] config keys: ["id","type","z","name","topic","url","fwdInMessages","allowScripts","allowStyles","copyIndex","templateFolder","extTemplate","showfolder","useSecurity","sessionLength","tokenAutoExtend","reload","sourceFolder","x","y","wires"]
> 23 Jan 18:56:25 - [trace] [uibuilder:nodeInstance:chart_vega_vue] Node instance settings: {"name":"","topic":"","url":"chart_vega_vue","copyIndex":true,"fwdIn":false,"allowScripts":false,"allowStyles":false,"showfolder":false}
> 23 Jan 18:56:25 - [trace] [uibuilder:nodeInstance:chart_vega_vue] Node uib.Instances Registered: {"b18a50dd.f7e5c":"chart_chartkick","eb95241.bca25d8":"uib_simple","13c0a870.e90988":"vdebug","11502897.2843f7":"chart_vue_echarts","2283ab5e.70d5a4":"moon","e72f865c.9c5778":"vue-lesson13","c81e9ded.1f863":"uiswitch","ae4ad803.98aa88":"cachetest1","843bf357.f951e":"chart_apex","d11f3a6d.744348":"uibuilder_example","2ad26a24.2500a6":"chart_vega_vue"}
> 23 Jan 18:56:25 - [trace] [uibuilder:nodeInstance:chart_vega_vue] Number of uib.Deployments: 1
> 23 Jan 18:56:25 - [trace] [uibuilder:nodeInstance:chart_vega_vue] Using local front-end folders in: C:\Users\rtkl1\.node-red\uibuilder\chart_vega_vue
> 23 Jan 18:56:25 - [trace] [uibuilder:web:addInstanceStaticRoute:chart_vega_vue] Using local src folder
> 23 Jan 18:56:25 - [trace] [uibuilder:chart_vega_vue] URL . . . . . : /chart_vega_vue
> 23 Jan 18:56:25 - [trace] [uibuilder:chart_vega_vue] Source files . : C:\Users\rtkl1\.node-red\uibuilder\chart_vega_vue
> 
> ```

> [@TotallyInformation](#):
>
> The other thing to do of course is to set up a new uibuilder instance, check that it doesn't exhibit these issues and then copy your front-end code into the src folder and see if it starts to have the same issues. That will tell us whether this is a uibuilder issue (back-end) or a front-end issue hopefully.

I did just that and now it works.  
The problem was there were some old instance name files which were obstructing the work of new instance (renamed).  
Another problem is the folders are not deleted when I delete the instance - probably has someting to do with permission because I couldn't delete them either unless I pressed shift+delete (to skip the recycle bin).

> [@UnborN](#):
>
> ([look into using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) or better send the bar.json file from Node-red to uibuilder and then trigger the draw of the chart )

Thank you, I'll google it. I never knew this existed - never learned javascript, everyting I implement I saw here on the forum or the web.  
For the other solution - I'm thinking big - If there are 20 charts on the web page then I think it's not the best solution..

> [@TotallyInformation](#):
>
> Vega and Vega-lite are both available as npm packages. That means that you can use uibuilder to serve the code.

Do have some example how to use uibuilder to serve the code, please?

> [@TotallyInformation](#):
>
> Also, it is best practice to avoid using the scheme, host and port in your URL's in the HTML file. Instead use the relative URLs so that things don't break if, for example, you access the page from a different device. At the moment, your URL's will only work when the browser is on the same device as the server.

Yes I know ty - I have the relative URL-s served on my mdashboard live Pi

---

<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:** [23 January 2022 21:22 UTC](https://discourse.nodered.org/t/uibuilder-error-404-not-found/56919/15 "2022-01-23T21:22:55Z")

</div>

> [@nerevar](#):
>
> The problem was there were some old instance name files which were obstructing the work of new instance (renamed).  
> Another problem is the folders are not deleted when I delete the instance - probably has someting to do with permission because I couldn't delete them either unless I pressed shift+delete (to skip the recycle bin).

Ah good. As I think I mentioned, those issues with folder handling and renames are resolved in v5.

> [@nerevar](#):
>
> Do have some example how to use uibuilder to serve the code, please?

There are examples of using similar libraries in the WIKI. Start with using the CDN versions so you know that it is working. Then Install the libraries using the library manager and follow the instructions for finding the right URL.

---

<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:** [6 February 2022 21:23 UTC](https://discourse.nodered.org/t/uibuilder-error-404-not-found/56919/16 "2022-02-06T21:23:10Z")

</div>

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