Manage URLs in uibuilder

General
1

Uibuilder only works with the front end, and NR handles the back end, OK.
The question that comes to me here is how to manage URLs? For example, what if I want a path like localhost:1880/uibtest/example (instead of rendering localhost:1880/uibtest/example.html) to render an HTML page that is in uibuilder? In fact, when using uibuilder, I want routers to render HTML files instead of HTML files calling each other (like routers do in NodeJS)

2

Hi .. nothing stops you from creating a subfolder in your /uibuilder/uibtest/src folder
that could act as a subpath to you url

uibtest
│
└───src
    │   index.css
    │   index.html
    │   index.js
    │
    └───example
            index.html

*Note: for /example/index.html you'll have to use the correct paths for your <script> tags which would be one level up like ./../

<script src="../../uibuilder/vendor/socket.io/socket.io.js">/* REQUIRED: Socket.IO is loaded only once for all instances. Without this, you don't get a websocket connection */</script>
<script src="./../uibuilderfe.min.js">/* REQUIRED: remove 'min.' to use dev version */</script>
<script src="./../index.js">/* OPTIONAL: Put your custom code here */</script>

Alternatively you could use a front-end library that comes with its own router.
Vue and vue-router is a great example and something i use in my uibuilder project
I have a navigation bar example shared on Github, that uses a Vue 2 Single Page Application, bootstrap-vue and vue-router. .. if you want to test out. uib-template-vue-navbar

2 Likes
3

...in addition, here it is a Vue3 (CDN) router example with uibuilder:
https://flows.nodered.org/flow/f930d699a09ed0ab52a2157570db5d71

2 Likes
4

The others have put it well. What I will add is that the uibuilder approach comes out of the standard approach for web servers, this is how they behave by default. The same would be true for a PHP based web server for example.

But, one of the things you can do with uibuilder if you really want to is move it off the default node-red web server to its own. When you do that, you can fully control the underlying ExpressJS service and have it behave however you like. That even includes being able to add middleware for specific server-side routing tasks.

You can also make use of the architecture of web services and use a reverse proxy such as NGINX which would also let you get creative with routing - specifically around remapping of routes.

In general though, best to try to go with the flow (pun intended) as the others have described.

1 Like
5

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