-
-
Notifications
You must be signed in to change notification settings - Fork 85
Example: ReactJS
NOTE: Needs updating for uibuilder v2. If you use REACT with uibuilder, please consider updating this article. Thanks.
This is a quick introduction on how you can use Node-red, uibuilder and react all together.
NB: I will assume that you are using Linux and have installed Node-RED in the default way (globally). I also assume that your <userDir>
folder is in the default location (~/.node-red
) and that you are not using projects. Adjust the example paths if some of that isn't true.
- 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 - this example will use the URL
react_ui
. - Under "Advanced Settings", turn off "Copy index ...." because we won't be using those files.
- Deploy.
- Use uibuilder's library manager to install
reactjs
.
Unfortunately, REACT is too complex to allow everything to be done from within the Node-RED Editor. So from here, you need a terminal session on your server so that you can run command lines.
-
npm install -g create-react-app
This lets you create a complete REACT app and includes a suitable build step. See GitHub for more details on this app. -
cd ~/.node-red/uibuilder/react
. -
create-react-app myapp
This creates a new sub-folder calledmyapp
, we will be building the app in there. -
Your app now needs access to the
uibuilderfe.js
file from the uibuilder package. You can copy it over manually but you would need to remember to do that whenever it is updated. Much better is to create a soft-linkFrom:
~/.node-red/node_modules/node-red-contrib-uibuilder/nodes/src
To:
~/.node-red/uibuilder/react/myapp/src/libs/uibuilder/
. -
Edit the files listed below copy the code given here into the appropriate file.
-
Create an environment variable called
PUBLIC_URL
and set it to the value.
. If you don't do this, your resulting web app will not be able to load its resources, you will see the errors in your browser console. -
npm run build
Assuming all goes well, your ready-to-use app will now exist in~/.node-red/uibuilder/react/myapp/build
. -
You now have several options. The quickest is to copy the contents of
build
to~/.node-red/uibuilder/react/src
.NOTE: It would be better if you create a soft-link from the
~/.node-red/uibuilder/react/myapp/build
folder to the~/.node-red/uibuilder/react/src
folder since that will let you rebuild without having to remember to copy the resulting build files manually. -
You can now open the
react_ui
url (most easily done by opening the configuration editor of the uibuilder node and clicking on the link) - try sending a msg to it and you should see the information at the bottom of the page update.
The rest is up to you! See the VueJS examples to see how to use the different features of the uibuilder library.
Add the following line:
"hostpage":"/react_ui"
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React UI - uibuilder and Node-RED</title>
</head><body>
<div id="app">
<h1>
Welcome to REACT-UIbuilder for Node-RED!
</h1>
</div>
<div id="root">
<div id="app">
</div>
</div>
</body></html>
import React from 'react';
import logo from './logo.svg';
import './App.css';
// Import uibuilder enabled component
import UserData from './scenes/UserData';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
{/* THIS IS THE UIBUILDER COMPONENT */}
<UserData title="User Data"></UserData>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
/* This is where the uibuilder action happens */
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { findDOMNode } from 'react-dom';
import uibuilder from '../libs/src/uibuilderfe.js'
class UserData extends Component{
constructor(props){
super(props)
this.state = {
msg:'payload Hello World',
UIBuilderVersion: '',
webSocket : '',
msgReceived : '',
controlMsgReceived : '',
msgSent : '',
lastMsgReceived : '',
lastCtlMsgReceived : '',
lastMsgSent : ''
}
uibuilder.start();
uibuilder.onChange('msg', (newVal) => {
this.setState({
msg: newVal
})
this.forceUpdate();
console.info("console.info: " + JSON.stringify(newVal))
})
uibuilder.onChange('msgsReceived',(newVal) =>{
console.info('New msg sent to us from Node-RED over Socket.IO.TotalCount:',newVal)
this.setState({
msgReceived: newVal
})
this.forceUpdate();
})
//IfSocket.IOconnects/disconnects
uibuilder.onChange('ioConnected',(newVal) =>{
console.info('Socket.IOConnectionStatusChanged:',newVal)
this.setState({
webSocket: newVal
})
this.forceUpdate();
})
//IfamessageissentbacktoNode-RED
uibuilder.onChange('msgsSent',(newVal) =>{
console.info('New msg sent to Node-RED over Socket.IO.TotalCount:',newVal)
this.setState({
msgSent: newVal
})
this.forceUpdate();
})
//IfwereceiveacontrolmessagefromNode-RED
uibuilder.onChange('msgsCtrl',(newVal) =>{
console.info('New control msg sent to us from Node-RED over Socket.IO.TotalCount:',newVal)
this.setState({
controlMsgReceived: newVal
})
this.forceUpdate();
})
// //Manually send a message back to Node-RED after 2 seconds
// window.setTimeout(function(){
// console.info('Sending a message back to Node-RED-after2sdelay')
// uibuilder.send({'topic':'uibuilderfe','payload':'I am a message sent from the uibuilder front end'})
// },2000)
}
render(){
return(
<div ref="root"style={{height:"50vh"}}>
<div>{'msg: ' + this.state.msg.payload}</div>
<div>{'msg Received: ' + this.state.msgReceived}</div>
<div>{'control MsgReceived: ' + this.state.controlMsgReceived}</div>
<div>{'msg Sent: ' + this.state.msgSent}</div>
<div>{'last Msg Received: ' + this.state.lastMsgReceived}</div>
<div>{'last Ctl Msg Received: ' + this.state.lastCtlMsgReceived}</div>
<div>{'last Msg Sent: ' + this.state.lastMsgSent}</div>
</div>
);
}
componentWillUnmount(){
this.state.ui.destructor();
this.state.ui=null;
}
shouldComponentUpdate(){
//ascomponentisnotlinkedtotheexternaldata,thereisnoneedinupdates
return false;
}
}
export default UserData
NB: Below here is the original uibuilder v1 instructions - please remember that I don't use REACT, this comes from another user.
You can find a node-red-contrib-react template here
Open a terminal/command prompt, cd to your node-red project
npm install node-red-contrib-uibuilder reactjs --save
Add the following to your ~/.node-red/settings.js file:
uibuilder: {
userVendorPackages: ['reactjs'],
debug: true
}
- Create a uibuilder node name it react_ui and deploy (you can choose automatic creation of .html and .css files)
- 'cd uibuilder'
- mkdir src
- 'cd src'
- Install react in here (https://reactjs.org/tutorial/tutorial.html)
npm install -g create-react-app && create-react-app my-app
- cd my-app
- IMPORTANT, in your react package file, add "hostpage":"/react_ui"
- In your setting file of node-red, add the following:
uibuilder: { userVendorPackages: ['reactjs'], debug: true },
/*Reactstuff*/
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { findDOMNode } from 'react-dom';
import uibuilder from '../../libs/uibuilder/uibuilderfe.js'
class UserData extends Component{
constructor(props){
super(props)
this.state = {
msg:'payload Hello World',
UIBuilderVersion: '',
webSocket : '',
msgReceived : '',
controlMsgReceived : '',
msgSent : '',
lastMsgReceived : '',
lastCtlMsgReceived : '',
lastMsgSent : ''
}
uibuilder.onChange('msg', (newVal) => {
this.setState({
msg: newVal
})
this.forceUpdate();
console.info("console.info: " + JSON.stringify(newVal))
})
uibuilder.onChange('msgsReceived',(newVal) =>{
console.info('New msg sent to us from Node-RED over Socket.IO.TotalCount:',newVal)
this.setState({
msgReceived: newVal
})
this.forceUpdate();
})
//IfSocket.IOconnects/disconnects
uibuilder.onChange('ioConnected',(newVal) =>{
console.info('Socket.IOConnectionStatusChanged:',newVal)
this.setState({
webSocket: newVal
})
this.forceUpdate();
})
//IfamessageissentbacktoNode-RED
uibuilder.onChange('msgsSent',(newVal) =>{
console.info('New msg sent to Node-RED over Socket.IO.TotalCount:',newVal)
this.setState({
msgSent: newVal
})
this.forceUpdate();
})
//IfwereceiveacontrolmessagefromNode-RED
uibuilder.onChange('msgsCtrl',(newVal) =>{
console.info('New control msg sent to us from Node-RED over Socket.IO.TotalCount:',newVal)
this.setState({
controlMsgReceived: newVal
})
this.forceUpdate();
})
// //Manually send a message back to Node-RED after 2 seconds
// window.setTimeout(function(){
// console.info('Sending a message back to Node-RED-after2sdelay')
// uibuilder.send({'topic':'uibuilderfe','payload':'I am a message sent from the uibuilder front end'})
// },2000)
}
render(){
return(
<div ref="root"style={{height:"50vh"}}>
<div>{'msg: ' + this.state.msg.payload}</div>
<div>{'msg Received: ' + this.state.msgReceived}</div>
<div>{'control MsgReceived: ' + this.state.controlMsgReceived}</div>
<div>{'msg Sent: ' + this.state.msgSent}</div>
<div>{'last Msg Received: ' + this.state.lastMsgReceived}</div>
<div>{'last Ctl Msg Received: ' + this.state.lastCtlMsgReceived}</div>
<div>{'last Msg Sent: ' + this.state.lastMsgSent}</div>
</div>
);
}
componentWillUnmount(){
this.state.ui.destructor();
this.state.ui=null;
}
shouldComponentUpdate(){
//ascomponentisnotlinkedtotheexternaldata,thereisnoneedinupdates
return false;
}
}
export default UserData
import UserData from './scenes/UserData'
class App extends Component {
render() {
return (
<div className="App">
<UserData title="User Data">
</UserData>
</div>
);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React Ui</title>
</head>
<body>
<div id="app">
<h1>
Welcome to REACT-UIbuilder for Node-RED!
</h1>
</div>
<div id="root">
<div id="app">
</div>
</div>
</body>
</html>
node-red-project/node_modules/node-red-contrib-uibuilder/nodes/src'-> src/libs/uibuilder/
my-app/build -> 'Node-red-project/uibuilder/uibuilderNodeName/dist
change this line to match your react folder name:
const react_ui = new InstallReact("react_ui")
var fs = require('fs')
var process = require('process')
class InstallReact {
constructor(uibuilderNodeName) {
this.reactRelativePath = '\\uibuilder\\' + uibuilderNodeName + '\\src\\react_app\\'
this.uibuilderDistRelativePath = '\\uibuilder\\' + uibuilderNodeName + '\\dist\\'
this.uibuilderNodePath = '\\node_modules\\node-red-contrib-uibuilder\\nodes\\src\\'
this.uibuilderFile = 'uibuilderfe.min.js'
}
createSymlink() {
let err = "ok"
console.log('TODO: Create symlink for uibuilderfe.min.js')
console.log(process.cwd() + this.uibuilderNodePath)
console.log(process.cwd() + this.reactRelativePath + 'libs/')
fs.symlink(process.cwd() + this.uibuilderNodePath, process.cwd() + this.reactRelativePath + 'src/libs/uibuilder/', 'junction', function(err,stdout,stderr){
console.log('err: ' + err)
console.log('stdout: ' + stdout)
console.log('stderr: ' + stderr)
if (err == null){
console.log('Symlink created')
}
})
console.log('Create symlink for node-red dist folder')
fs.symlink(process.cwd() + this.reactRelativePath + 'build/', process.cwd() + this.uibuilderDistRelativePath, 'junction', function(err,stdout,stderr){
// console.log('err: ' + err)
// console.log('stdout: ' + stdout)
// console.log('stderr: ' + stderr)
if (err == null){
console.log('Symlink created')
}
})
}
installReact() {
let stdout = "ok"
var react = process.cwd() + this.reactRelativePath
console.log('Installing ReactJS in cwd: ' + react);
stdout = require('child_process').execSync('npm install', {cwd:react})
if(stdout.status){
console.log(stdout.status)
process.exit()
}
stdout = require('child_process').execSync('npm run build', {cwd:react})
if(stdout.status){
console.log(stdout.status)
process.exit()
}
return stdout
}
execute() {
this.createSymlink()
this.installReact()
}
}
const react_ui = new InstallReact("react_ui")
react_ui.execute()
// const snw = new InstallReactAndNodered("snw");
// snw.execute()
console.log("Install Done")
TODO Need to fix line 161 in uibuilderfe.js (uibuilderfe.min.js) For now, you can only comment the line manually... for the project to compile.
Please feel free to add comments to the page (clearly mark with your initials & please add a commit msg so we know what has changed). You can contact me in the Discourse forum, or raise an issue here in GitHub! I will make sure all comments & suggestions are represented here.
-
Walkthrough 🔗 Getting started
-
In Progress and To Do 🔗 What's coming up for uibuilder?
-
Awesome uibuilder Examples, tutorials, templates and references.
-
How To
- How to send data when a client connects or reloads the page
- Send messages to a specific client
- Cache & Replay Messages
- Cache without a helper node
- Use webpack to optimise front-end libraries and code
- How to contribute & coding standards
- How to use NGINX as a proxy for Node-RED
- How to manage packages manually
- How to upload a file from the browser to Node-RED
-
Vanilla HTML/JavaScript examples
-
VueJS general hints, tips and examples
- Load Vue (v2 or v3) components without a build step (modern browsers only)
- How to use webpack with VueJS (or other frameworks)
- Awesome VueJS - Tips, info & libraries for working with Vue
- Components that work
-
VueJS v3 hints, tips and examples
-
VueJS v2 hints, tips and examples
- Dynamically load .vue files without a build step (Vue v2)
- Really Simple Example (Quote of the Day)
- Example charts using Chartkick, Chart.js, Google
- Example Gauge using vue-svg-gauge
- Example charts using ApexCharts
- Example chart using Vue-ECharts
- Example: debug messages using uibuilder & Vue
- Example: knob/gauge widget for uibuilder & Vue
- Example: Embedded video player using VideoJS
- Simple Button Acknowledgement Example Thanks to ringmybell
- Using Vue-Router without a build step Thanks to AFelix
- Vue Canvas Knob Component Thanks to Klaus Zerbe
-
Examples for other frameworks (check version before trying)
- Basic jQuery example - Updated for uibuilder v6.1
- ReactJS with no build - updated for uibuilder v5/6
-
Examples for other frameworks (may not work, out-of-date)
-
Outdated Pages (Historic only)
- v1 Examples (these need updating to uibuilder v2/v3/v4/v5)