Where is uibuilder js files?

[miladmrm]

When we want to use UI Builder, we put the following two scripts in the html code:

<script src="../uibuilder/vendor/socket.io/socket.io.js"></script>
<script src="./uibuilderfe.min.js"></script>

My question is, where are these two files located in the project directory, because according to their path, I can't find them.

[TotallyInformation]

Hi, that is the way you USED to do it. However, if you are using the latest version, you only need:

<script src="./uibuilder.iife.min.js"></script>

You should also be able to use:

<script src="../uibuilder/uibuilder.iife.min.js"></script>

All of the uibuilder front-end library builds are in ~/.node-red/node_modules/node-red-contrib-uibuilder/front-end/ assuming you installed node-red the "standard" way.

Generally I recommend though that you do not include the libraries in your own build step since it really does not give your users any performance benefit on modern browsers and simply makes life more complex. Particularly since we are all being forced to be in a transition state with JavaScript between traditional script approaches and ES Modules. So you are much better off simply excluding the uibuilder library from your webpack (or other build tool) build step. The .min.js versions of the library are already optimised and both the iife and esm versions already have the correct version of the socket.io client built in.

If you really insist on trying to include the library in your own build, you may want to look at the actual source of the "new" build libraries at ~/.node-red/node_modules/node-red-contrib-uibuilder/src/front-end-module/uibuilder.module.js. But you should be warned that the hoops you will need to jump through vary depending on what versions of webpack, babel, etc you are using. Again, there is no benefit from including the uibuilder library in your own builds on any modern browser - indeed, you will often find an increased rather than reduced load time due to the ways that modern browsers optimise things.