Use ReactJs pages inside HMI display

[Anonymous]

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.

[seiferp · Accepted solution]

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

[seiferp]

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 🤔

[Anonymous]

Hi,

Thank you for the answer,

I'll try this approach!

[Anonymous]

Sorry for the late response, 

The problem was solved with this approach! 

Thank you.

[seiferp]

Glad to hear 👍