topic Use ReactJs pages inside HMI display in VRED Forum

Use ReactJs pages inside HMI display

Anonymous — Thu, 17 Dec 2020 14:54:22 GMT

Hi,

I need to use some pages/apps built with ReactJs to simulate HMI interactions inside VRED.

I tried to deploy the page with the straighfoward approach but the program displayed nothing but a blank screen.

Is it possible to use React and other advaced JS resources in VRED 2019? Is there something i must setup? My company already have plenty of ReactJS based HMI's and we really need to include it on our simmulations.

Best regards.

Betreff: Use ReactJs pages inside HMI display

seiferp — Fri, 18 Dec 2020 16:44:48 GMT

Hi,

it´s not trivial but possible to get your ReactJS applications running in VRED. It´s actualy more a web dev. task and not VRED related at all. Here is a short guide were I´m using the calculator example that can be downloaded from GitHub

Install NodeJS
Unzip the GitHub project on your desktop
Open your command-window and type node -v to check if Node.js was installed successfully

Navigate in the command-window to the calculator-master example folder on your desktop and type npm install to download all required files for your react project

When the download is finished you can see multiple files got added to your example folder!

Start React server

Type npm start in your command-window
You can now use http://localhost:3000/ as URL in the VRED MediaEditor while your React App is running in the background

Transcript HTML

Terminate your running job in case the React App is still running
Type npm run-script build
This has created an addition folder called build in your calculater-master example folder with an index.html you can load in the Media Editor
Note: As the console-output states it´s assuming it is hosted on a server at /calculator/ and the index.html is searching for it´s files at the wrong location!
Therefore you have to remove all /calculator/ and / in front of static from the src=paths in the html file

Hope this helps

Pascal

Betreff: Use ReactJs pages inside HMI display

seiferp — Fri, 18 Dec 2020 16:42:51 GMT

It´s pretty much straight forward once you get the idea behind ReactJS. If your company is building HMI´s with ReactJS you must have some experts onsite and I wonder if no one else in your company could help you with getting the server started or transcripting the ReactJS apps into HTML 🤔

Betreff: Use ReactJs pages inside HMI display

Anonymous — Fri, 18 Dec 2020 17:35:43 GMT

Hi,

Thank you for the answer,

I'll try this approach!

Betreff: Use ReactJs pages inside HMI display

Anonymous — Mon, 11 Jan 2021 17:22:16 GMT

Sorry for the late response,

The problem was solved with this approach!

Thank you.

Betreff: Use ReactJs pages inside HMI display

seiferp — Sat, 16 Jan 2021 22:18:55 GMT

Glad to hear 👍