uibuilder url too long + other issues

[TotallyInformation]

Hi, the name uibuilder-react-example is too long for newer versions of uibuilder which limit the url to 20 chars max.

Also, there is now a much better way to incorporate this repo into Node-RED.

1. Add a new uibuilder node to your flow, set the URL and deploy.
2. Open the Editor config panel and on the Advanced tab, change the "Serve" setting to Dist. The index.html file in the src folder can be deleted.
3. Open the Editor config panel and change the Template to External. Then use gaillarddamien/uibuilder-react-example as the template. It will import this repo to the correct folder.
4. Open a command line on the node-red server, navigate to the folder. Run npm install.

There are also a couple of things that don't quite work correctly in your repo depending on how node-red and uibuilder are installed:

• You should change the dependencies in your repo to devDependencies to avoid future issues.

• In package.json, "node-red-contrib-uibuilder": "file:../../node_modules/node-red-contrib-uibuilder", will not always work. You should use the live package "node-red-contrib-uibuilder": "*",. Even then npm can really screw things up! So if the build can't find the package, you might have to do some tweaking of your node_modules folder.

• In src/scenes/UserData.js, the path to the old client is wrong. It should be ../../node_modules/node-red-contrib-uibuilder/front-end/uibuilderfe.

• Because you are using the "old" front-end client, you need to add the the Socket.IO client to package.json and import it before you import the client.

  ALTERNATIVELY, you can use the new client by changing the import to import uibuilder from '../../node_modules/node-red-contrib-uibuilder/src/front-end-module/uibuilder.module' - however, in that case, although your build works, your dev server fails because I use more modern javascript that Babel cannot understand.

  You could also import the ESM version of the library: import uibuilder from '../../node_modules/node-red-contrib-uibuilder/front-end/uibuilder.esm'. That also works with your build but though it doesn't give an error when starting the dev server, it fails to load Socket.IO correctly.

  So either of the new client builds work fine for node-red itself, they just don't work for the REACT dev server for some reason. It is possible that adding a better JS parser that understands more modern JavaScript might help.

[TotallyInformation]

Incidentally, I tried updating the react dependencies to the latest version but webpack and babel now recognise that the module and esm versions are actually ESM's and refuses to load them correctly unless you switch to ESM throughout.

[iOSonntag]

What works for me is using a standard typescript react app and then having a file with this content:

declare var uibuilder: {
  start: (a?: any, b?: any) => void;
  get: (key: string) => any;
  send: (msg: any) => void;
  onChange: (key: string, callback: (newVal: any) => void) => void;
};

Quick note on the types: I am just testing around, the types are inccorrect at the moment.

And then adding the following line in the index.html:

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

Thus not having the need to add uibuilder as dependency at all.

Just 2 quick notes on that: You have to enter the homepage key in the package.json & the proxy settings like this:

{
   ...
  "homepage": "your-app",
  "proxy": "http://localhost:1880"
}

Also note that in order for the socket io client to connect correctly to your Node-RED instance you now need to enter the following url:

http://localhost:3000/your-app

The uibuilder.start() call is not needed anymore and now live dev with react works like a charm.

[TotallyInformation]

Thanks for the updates - I'm thinking it might be great to have a new WIKI entry that demonstrates your approach? I don't use TS or REACT so I can't really write anything but if you were willing, you should be able to create a new page. If you do, please just give me a ping and I will highlight it in the Node-RED forum.