Uibuilder riot not found

General
1

Hi Folks,
I followed the following uibuilder wiki page about using riotjs.

The simple html part in index.html works just fine, but nothing happens!
I made shure to follow every step in the tutorial.

Taking a look inside the browsers console i found that the browser cannot load
http://:1880/uibuilder/socket.io/socket.io.js
http://:1880/riot/vendor/jquery/dist/jquery.min.js
http://:1880/riot/vendor/riot/riot+compiler.min.js
I installed riot via the uibuilder node...
Did i do something obviewously wrong?
Btw.: I already restarted node-red

2

Unfortunately, this hasn't been updated for v2 of uibuilder, it refers to v1. Sorry, that should be clearer on the page.

You will need to translate the links in your index.html code from the v1 format to the v2 format.

Old format:

 <link rel="stylesheet" href="vendor/normalize.css/normalize.css">
 <link rel="stylesheet" href="index.css">
...
 <script src="/uibuilder/socket.io/socket.io.js"></script>
 <script src="vendor/jquery/dist/jquery.min.js"></script>
 <!-- include riot.js and the compiler -->
 <script type="text/javascript" src="vendor/riot/riot+compiler.min.js"></script>
 <script src="uibuilderfe.min.js"></script>
 <script src="index.js"></script>

New format:

<!-- NB: Normalize no longer included by default, use uib's library manager to install it if you want it --->
<link type="text/css" rel="stylesheet" href="../uibuilder/vendor/normalize.css/normalize.css" />
<link type="text/css" rel="stylesheet" href="./index.css" media="all">
...
<script src="../uibuilder/vendor/socket.io/socket.io.js"></script>

<!-- Not sure you really want this - will have to be installed via uib library manager --->
<script src="../uibuilder/vendor/jquery/dist/jquery.min.js"></script>

<script src="../uibuilder/vendor/riot/riot+compiler.min.js"></script>

<!-- <script src="./uibuilderfe.js"></script>   //dev version -->
<script src="./uibuilderfe.min.js"></script> <!--    //prod version -->
<script src="./index.js"></script>

Note the ./ and ../uibuilder/vendor/ which are different. The first gives you resources from your own front-end code, the second gives you access to uibuilder's shared resources.

The other difference from when Kazushige wrote that WIKI article is that normalize.css and jquery are no longer included by default (you may not need them anyway). Also, you can now install front-end libraries like Riot using uibuilder's own library manager from the Node-RED editor.

Finally, you should note that the article uses RiotJS v3 which is no longer current - I'm afraid that I don't know what changes you would need for v4.

When you get this working, it would be great to get that article updated (or a new one added) if you fancy that so that others can benefit?

3

Thanks, for your help!
You sent me on the right tracks.
Currently still some errors, but i know that i should be able to fix them on my own.

I'll try to gain some experience with riot and uibuilder and would be happy to contribute an updated tutorial :smiley:

2 Likes
4

Nice! Well done. I look forward to your updated WIKI article.

5

I still don't get the desired behavior, but riot definitely works now. I can build tags and they appear as they should.

Did anything change on how you can react to messages from uibuilder?

6

Ah, sorry, all of the differences are marked in the documentation and the WIKI - the one you might be missing as I didn't put it in my last post is that you have to actually start uibuilder with a uibuilder.start() function once you've loaded your RiotJS app. The documentation details why that change happened.

7

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