I'm currently working on a web application using Ignition and I'm looking for guidance on integrating React into the Web Dev module. I have already developed a React application with its own build files and I would like to incorporate it into Ignition's Web Dev module to be served as part of my Ignition project. I prefer not to set up a separate Node.js server for this purpose.
I would greatly appreciate any assistance on how to integrate React into the Web Dev module in Ignition. Specifically, I'm seeking guidance on the following:
Importing the React build files into the Web Dev module.
Setting up routing and handling routes within Ignition for the React application.
Any additional configurations or considerations required for this integration.
If you have any insights, resources, or step-by-step instructions that can help me achieve this integration, I would be extremely grateful. Thank you in advance for your support!
Please note that my Ignition project is currently developed on version 7.9, but I am open to upgrading it to version 8.1 if necessary.
I'm probably the worst person to reply to your post, but to me, it seems like to fit your requirements (esp about not having a separate node server), the cleanest solution would be to create your own module that'll interface with Perspective and also use the Ignition gateway as the web server so you don't have to maintain a separate one.
I haven't done so yet myself, but I know you can easily use React (in fact, Perspective uses it) in your module and bundle it many different ways.
The only downside to this approach is that there's a steep learning curve to implement this (depending on your background) but there are also resources to help you out, like IAs github with a full example.
Doing this in 7.9 is going to be basically unmaintainable. Technically you could do it, but it would be a nightmare, because each time you want to publish a new version you'll have to go into the designer and upload a new version of each changed file. Or maybe you could get the 'mounted folder' option to work, if you can get your JS build tool to emit everything as a "static site".
I will say, to @YF129701's point - if you just want a more modern stack to develop an HMI/SCADA system in, I would encourage you to work in Perspective rather than trying to create your own. It is absolutely not as powerful or flexible as creating your own entire project...but it's also a lot easier. You get 'free' access to databases, connection pooling, a reliable backend HTTP client, etc.
If you do move up to 8.1, since project resources are now on disk it would be theoretically possible to have your build system directly update the project on disk, and then either set a more aggressive scan frequency or wait the 5 minutes for the gateway to detect those changes.