Javascript live reload

We have a Dash project in Python using custom Dash components we made in another project. But each we are changing the Javascript code of our components we need to do a npm run build to generate our components again so our running web app can see the changes made.

Having to generate the npm build each time a modification is made is time consuming. Can we create a setup to have the web browser make live reload each time we save the Javascript code of a component instead of having to rebuild everything each time?

Ideas or suggestions would be appreciated.

Hi @PierreThibault,

I am no React/js expert, so please don’t take my answer as definitive and let’s hope someone else can jump in and give a better one.

I don’t think that it is possible to do what you want. Amongst the reasons, one is that npm run build also builds the Python modules with the components, and not only their js bundle. In many cases the classes won’t change, but you can’t (or shouldn’t) take it as granted.

When I faced a similar situation where I was developing a custom component for a specific application, I’ve found out that the best “development flow” is to copy the minimal part of the application where the component is used to usage.py inside the component project and use that instead of the application. The reason becomes more evident if the application is in production and you are forced to bump the component version any time you want to update it.

Hi @jlfsjunior ,

After investigation, I found this page about Hot Module Replacement (HMR). As I understand, with HMR we have a webpack server serving the .js files. But if I want to use it, I would have to modify the Dash application to generate script directives pointing to webpack server instead of pointing to Dash application. While possible, this solution is not trivial. But I think it would be a nice contribution to the framework. I was looking for something more simple.

1 Like