Does anyone have a recommended workflow for developing an interactive web application using the node ecosystem? Node brings a lot of great features to front end development such as package management, hot reloading, typescript support, and a wealth of mature libraries.
I am trying to build an interactive variable creation tool using React and would very much like to build the component logic outside of R yet have all of the wonderful component binding that shiny provides. Is it possible to develop a web app that makes use of the shiny binding yet at the same time allows quick feedback of the UI via hot reloading as if developing a react app?
My current process is very slow and involves building the react app, copying the build folder to the inst/www folder of an R package and then launching a shiny app using appDir along with a server.R and the index.html. This takes forever and I would be interested in a process that lets me quickly make edits to the front end and server logic for faster iterations.
Something simple but effective could be to use a file watcher that automatically rebuilds your Javascript bundle and outputs it somewhere. Then you could refresh the page to see new UI changes, or use Shiny's autoreload feature if the bundle is in the app directory.
Getting hot reloading to work on React app changes would be much trickier, but I think it's possible. You would have to run a separate development server that serves and hot reloads the UI, and proxies everything else (including WebSocket requests) to Shiny.
Here's an example project where I've set this up using webpack-dev-server:
For development, the Shiny app runs with live reloading on server-side changes, while Webpack dev server runs with hot reloading on React app changes (see the Shiny app config and Webpack dev server config).
Hot reloading has some quirks so you still need a full refresh sometimes, but I think this allows for really quick iteration on both the server and UI.