# Getting started with uibuilder and React?

**URL:** <https://discourse.nodered.org/t/getting-started-with-uibuilder-and-react/16154>\
**Category:** General\
**Tags:** uibuilder\
**Created:** [1 October 2019 14:17 UTC](https://discourse.nodered.org/t/getting-started-with-uibuilder-and-react/16154 "2019-10-01T14:17:06Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Stylo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/stylo/32/14221_2.png) [@Stylo](https://discourse.nodered.org/u/Stylo)\
**Post date:** [1 October 2019 14:17 UTC](https://discourse.nodered.org/t/getting-started-with-uibuilder-and-react/16154/1 "2019-10-01T14:17:06Z")

</div>

Hi,

I'm planning to build my own interface in uibuilder using React, however I'm having trouble finding any documentation or guides to do this.

Does anyone know where to start with marrying React and uibuilder? I haven't used either very much in the past.

Thanks

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [1 October 2019 15:07 UTC](https://discourse.nodered.org/t/getting-started-with-uibuilder-and-react/16154/2 "2019-10-01T15:07:12Z")

</div>

There is an example in the repository

> **[TotallyInformation/node-red-contrib-uibuilder](https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki/Example:-ReactJS)**
>
> Easily create web UI's for Node-RED using any (or no) front-end library. VueJS and bootstrap-vue included but change as desired. - TotallyInformation/node-red-contrib-uibuilder

---

<div class="post-metadata">

**Author:** ![Stylo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/stylo/32/14221_2.png) [@Stylo](https://discourse.nodered.org/u/Stylo)\
**Post date:** [1 October 2019 15:35 UTC](https://discourse.nodered.org/t/getting-started-with-uibuilder-and-react/16154/3 "2019-10-01T15:35:50Z")

</div>

I've taken a look at this, it says at the top that it needs updated and I haven't been able to get it to work regardless.

---

<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:** [1 October 2019 16:13 UTC](https://discourse.nodered.org/t/getting-started-with-uibuilder-and-react/16154/4 "2019-10-01T16:13:09Z")

</div>

Hi, sorry yes, while I managed to get REACT working using the previous version of uibuilder, I've not had time to update it and I don't generally use REACT. Let's see if we can't get you somewhere anyway ... Let me look up the entry in the WIKI and see if I can at least give you some clues so you can get started. Back in a tick.

---

<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:** [1 October 2019 16:47 UTC](https://discourse.nodered.org/t/getting-started-with-uibuilder-and-react/16154/5 "2019-10-01T16:47:11Z")

</div>

Agrh! Now I remember why I gave up on REACT!

This will take me longer to do that it will probably take you to fix so let me explain and hopefully that will be enough to get you going.

Before I do though, are you _sure_ you want to use REACT? Because I can tell you it is much more complex to get started with than VueJS is even putting aside uibuilder.

Well anyway, here is what you need:

- Install uibuilder from the Node-RED palette menu

- add the "vue" example from the import menu

- change the name and url in the resulting node to something helpful to you

- deploy

- Use uibuilder's library manager to install `reactjs`. Actually, you can skip this for now if you like and [use REACT direct from CDN](https://shinglyu.com/web/2018/02/08/minimal-react-js-without-a-build-step-updated.html)

- Edit `index.html` using uibuilder's source code editor and replace the VueJS example with a simple REACT example such as the one in the link above. Make sure that works.

- Add the uibuilderfe library to `index.html` library by including the following link:

- In your JavaScript code, you need to insert `uibuilder.start()` somewhere that will be triggered once REACT is loaded and running.

Finally, you will want to create a function that listens for incoming messages from Node-RED, you can do that with the following example. I _think_ it should go just below wherever you put `uibuilder.start()`.

```auto
uibuilder.onChange('msg', function(msg){
    console.log('[uibuilder.onChange] Updated count of received msgs:', msg)
})

```

Once all of that is working, you can play with the code and see how uibuilder works.

Once you understand the basics, the next step would be to configure a build step because REACT examples very rarely come without needing one. So configure webpack or similar **in the root folder for your node instance**.

That is to say, if you have installed Node-RED the normal way and on Linux & if you are _not_ using Node-RED projects and have given uibuilder a URL of `reactjs`, then you will need access to your servers filing system at `~/.node-red/uibuilder/reactjs`. That folder contains 2 sub-folders `dist` and `src`. Your front-end code as discussed above should be in the `src` folder. Configure webpack to build into the `dist` folder & configure it for REACT. Then you can use a more standard REACT example such as the one in the WIKI, run your build and everything _should_ just work since uibuilder should now ignore the `src` folder and load everything from the `dist` folder automatically.

Hoping this makes some sense?

If so and you get things working, I'd love to get a copy of your code and webpack configuration so that I can create a workable WIKI entry.

---

<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:** [1 October 2019 17:21 UTC](https://discourse.nodered.org/t/getting-started-with-uibuilder-and-react/16154/6 "2019-10-01T17:21:24Z")

</div>

OK, I don't think that I understand _why_ but I think I can update the WIKI example enough so that you can at least get it working. ~~I'll update here when I've done that.~~

OK, the WIKI example for REACT is updated for v2 - though I have to say that I clearly don't understand REACT very well because not everything is working as I'd expect it to. However, I think that it is enough to get people going.

> **[TotallyInformation/node-red-contrib-uibuilder](https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki/Example:-ReactJS)**
>
> Easily create web UI's for Node-RED using any (or no) front-end library. VueJS and bootstrap-vue included but change as desired. - TotallyInformation/node-red-contrib-uibuilder

---

<div class="post-metadata">

**Author:** ![Stylo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/stylo/32/14221_2.png) [@Stylo](https://discourse.nodered.org/u/Stylo)\
**Post date:** [2 October 2019 13:35 UTC](https://discourse.nodered.org/t/getting-started-with-uibuilder-and-react/16154/7 "2019-10-02T13:35:30Z")

</div>

This is brilliant.

One question (despite making myself out to be a complete amateur), how do I create the environment variable 'PUBLIC\_URL'? I've managed to follow all the steps up until that point.

(I'm using ubuntu, if that's relevant at all.)

Thanks!

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [2 October 2019 14:43 UTC](https://discourse.nodered.org/t/getting-started-with-uibuilder-and-react/16154/8 "2019-10-02T14:43:33Z")

</div>

There are various ways of doing that, google for  
set environment variable ubuntu  
and no doubt you will find it.

---

<div class="post-metadata">

**Author:** ![Stylo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/stylo/32/14221_2.png) [@Stylo](https://discourse.nodered.org/u/Stylo)\
**Post date:** [2 October 2019 15:24 UTC](https://discourse.nodered.org/t/getting-started-with-uibuilder-and-react/16154/9 "2019-10-02T15:24:44Z")

</div>

Ok, I've followed the tutorial, ran 'npm run build' and it looks like it works however the build folder doesn't exist.

The only notable thing in the log is

'./src/scenes/UserData.js  
Line 167: Do not mutate directly. Use setState() react/no-direct-mutation-state'

---

<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:** [2 October 2019 19:07 UTC](https://discourse.nodered.org/t/getting-started-with-uibuilder-and-react/16154/10 "2019-10-02T19:07:24Z")

</div>

> [@Stylo](#):
>
> how do I create the environment variable 'PUBLIC\_URL'?

Sorry, I didn't put that in the WIKI because I ran out of time and energy! As Colin says, this is dependent on your OS. Indeed, on Windows it even differs if you are using PowerShell instead of the cmd prompt.

> [@Stylo](#):
>
> Line 167

Ah, drat - that was left in from the person who originally gave me the code, I think that REACT has gone through several updates since then and you can now no longer directly change a `state` variable, you have to use `setState` instead.

So the following:

```auto
componentWillUnmount(){
    this.state.ui.destructor();
    this.state.ui=null;
}

```

Should be: ...

Urm, actually, I don't know what it should be to be honest. You will need to understand more about REACT I'm afraid. Sorry, I really don't understand REACT any more, it seems as bad as Angular now for being overly complex.

Try commenting out the whole of the `componentWillUnmount` function?

* * *

Did I say that VueJS was a _ **LOT** _ easier to get started with?

---

<div class="post-metadata">

**Author:** ![alphaOri](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/alphaori/32/18507_2.png) [@alphaOri](https://discourse.nodered.org/u/alphaOri)\
**Post date:** [13 June 2020 11:54 UTC](https://discourse.nodered.org/t/getting-started-with-uibuilder-and-react/16154/11 "2020-06-13T11:54:03Z")

</div>

I've gotten uibuilder to work with React. Here is a dump of my notes on getting it setup:  
- Create new react app: [https://facebook.github.io/create-react-app/docs/getting-started](https://facebook.github.io/create-react-app/docs/getting-started), [https://reactjs.org/docs/create-a-new-react-app.html](https://reactjs.org/docs/create-a-new-react-app.html)  
○ go to ~/.node-red/uibuilder/react\_ui/src  
§ delete the "react\_app" folder with all its subfolders (otherwise you'll have conflicting files)  
§ create your react app here called "react\_app"  
npx create-react-app react\_app  
□ note: do not use sudo with this command  
- Create symlink from react build folder to uibuilder's "dist" folder - here's how  
○ Compile first: run "npm run build" first to create the build folder in react\_app  
§ To compile, I needed to do this from : [https://github.com/babel/babel/issues/8599](https://github.com/babel/babel/issues/8599)  
npm install -D babel-loader @babel/core @babel/preset-env  
○ Delete the current uibuilder dist directory "rm -r blabla"  
○ Create a symlink where the dist was by running (for example):  
ln -s '/home/alphaori/.node-red/uibuilder/react\_ui/src/react\_app/build' '/home/alphaori/.node-red/uibuilder/react\_ui/dist'  
- Compile react app  
○ Go to react\_ui/src/react\_app/src and run  
npm run build

Replace my username with yours.

---

<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:** [13 June 2020 12:09 UTC](https://discourse.nodered.org/t/getting-started-with-uibuilder-and-react/16154/12 "2020-06-13T12:09:55Z")

</div>

Thanks for sharing that. I don't suppose you fancy putting that into a WIKI page?

It would make a handy addition to the [uibuilder WIKI](https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki).

---

<div class="post-metadata">

**Author:** ![alphaOri](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/alphaori/32/18507_2.png) [@alphaOri](https://discourse.nodered.org/u/alphaOri)\
**Post date:** [16 June 2020 01:21 UTC](https://discourse.nodered.org/t/getting-started-with-uibuilder-and-react/16154/13 "2020-06-16T01:21:13Z")

</div>

Ok, I'd be glad to do that. However, I'm still using uibuilder v1 so I think that I'll wait until I've upgraded to v2 (hopefully soon) and then update my notes for more general use.

---

<div class="post-metadata">

**Author:** ![mathurv](https://avatars.discourse-cdn.com/v4/letter/m/e9a140/32.png) [@mathurv](https://discourse.nodered.org/u/mathurv)\
**Post date:** [29 August 2020 13:40 UTC](https://discourse.nodered.org/t/getting-started-with-uibuilder-and-react/16154/14 "2020-08-29T13:40:40Z")

</div>

Thanks for the detailed instructions. But.. unfortunately, I am getting into some trouble  
Getting a blank screen with the following errors. can you please help

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/8/08a0cd15ad3700e61732261b987ac940f3e3e567.png)

---

<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:** [29 August 2020 18:00 UTC](https://discourse.nodered.org/t/getting-started-with-uibuilder-and-react/16154/15 "2020-08-29T18:00:53Z")

</div>

This is because you have outdated HTML when trying to load your resources. That means that Node-RED's ExpressJS server has misinterpreted the file type to be served and has send them as default HMTL instead of CSS or JavaScript resources. This used to work on older browsers but doesn't any longer.

For CSS, either use:

```auto
<link rel="stylesheet" href="./index.css" media="all">

```

or

```auto
<link type="text/css" rel="stylesheet" href="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.css" />

```

For JavaScript, use:

```auto
<script src="./index.js"></script>

```

---

<div class="post-metadata">

**Author:** ![mathurv](https://avatars.discourse-cdn.com/v4/letter/m/e9a140/32.png) [@mathurv](https://discourse.nodered.org/u/mathurv)\
**Post date:** [30 August 2020 03:44 UTC](https://discourse.nodered.org/t/getting-started-with-uibuilder-and-react/16154/16 "2020-08-30T03:44:15Z")

</div>

Thank you. I added the directory to the static in config.js file and that also worked. But.. sure this is a better solution. I will do this way

---

<div class="post-metadata">

**Author:** ![mathurv](https://avatars.discourse-cdn.com/v4/letter/m/e9a140/32.png) [@mathurv](https://discourse.nodered.org/u/mathurv)\
**Post date:** [1 September 2020 03:54 UTC](https://discourse.nodered.org/t/getting-started-with-uibuilder-and-react/16154/17 "2020-09-01T03:54:06Z")

</div>

Hi,  
Stated another clean VM to try it out. The (auto) created HTML page is in fact having the same code you mentioned and still it is giving issues.

The only way I am able to fix it right now is by adding that directory to the static in config.js in .node-red directory.

Site suggests me to create a "PUBLIC\_URL=." env variable. I tried that too. Didn't work.  
Please let me know if there is a better way to resolve this issue

---

<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:** [1 September 2020 08:26 UTC](https://discourse.nodered.org/t/getting-started-with-uibuilder-and-react/16154/18 "2020-09-01T08:26:23Z")

</div>

So if you create a new flow with an inject/uibuilder/debug node flow, you are saying that it doesn't work?

> [@mathurv](#):
>
> adding that directory to the static

Which directory?

---

<div class="post-metadata">

**Author:** ![mathurv](https://avatars.discourse-cdn.com/v4/letter/m/e9a140/32.png) [@mathurv](https://discourse.nodered.org/u/mathurv)\
**Post date:** [4 September 2020 01:47 UTC](https://discourse.nodered.org/t/getting-started-with-uibuilder-and-react/16154/19 "2020-09-04T01:47:34Z")

</div>

The dist directory to the static. But.. now.. I am able to make it work without that. I didn't change anything but.. it is working. Still trying to find what got fixed.  
Thanks for all your help.

On the other hand, I am trying to set the msg.\_socketId to send message back from frontend to the back end to a specific instance. Anyone has a working example for this?

---

<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:** [4 September 2020 11:57 UTC](https://discourse.nodered.org/t/getting-started-with-uibuilder-and-react/16154/20 "2020-09-04T11:57:47Z")

</div>

> [@mathurv](#):
>
> The dist directory

The dist folder is ignored by uibuilder unless you have an index.html file in it. If you do, then the src folder is ignored instead. At one point I did have both folders served but that caused issues from time-to-time. So if you are serving up your app from the src folder, your other resources should go in that same folder, similarly if you've used a build step and are using the dist folder, put your resource files there. You could keep things simple by putting everything in the src folder and use your build step not only to "compile" the js/css but also to copy the required resources to the dist folder as well. That would further let you do things like run auto-optimisation on assets & create checksums for security & caching.

> [@mathurv](#):
>
> I am trying to set the msg.\_socketId to send message back from frontend to the back end to a specific instance. Anyone has a working example for this?

You need to use the control msgs from uibuilder to capture the socket id whenever a client connects **AND** when a client reloads (as that resets the id). Then, if you want to send a msg to a specific client, you add that socket id onto the msg. If your flow is acting on a data msg coming out of uibuilder, that also has the socket id so you can use that.

Just remember that there are several things that can trigger a change to the socket id, this is not under uibuilder or Node-RED's control I'm afraid.

The next major release of uibuilder will have some integrated authentication and authorisation capabilities and you will be able to use that to provide a more stable identifier. At the moment, you could add an identifier to standard data msg's from the front-end but there isn't a way to attach those to control msg's.

[Next page](https://discourse.nodered.org/t/getting-started-with-uibuilder-and-react/16154.md?page=2)