Help with hot reloading custom react components

Dash Python
1

So for my project we can make custom react components that’s built and the code is transferred to the root of the project. I automated that by a few os commands.

I have it so anytime you change a file and save it does those commands. But I want make it even more efficient though. So instead every save => compile the custom react components I only want it if you save a file within that folder, if not do the normal hot reloading without compiling the custom react code.

In short, I don’t want to recompile the react files if a change wasn’t done in the custom react code folder. Because right now my automated process does it on every save.

I’m thinking:

If there was a way to check what file hot reloaded from dash’s hot reload method that would be great, or even access to that function. But I even looked in the source code I didn’t see anything that allow me to do that.

Or If there’s a callback that happens before the hot reload feature in dash

Or If there’s a library or plugin in python that could help me out because I just started using it a couple of months ago.

I made custom react components with this tutorial: Build Your Own Components | Dash for Python Documentation | Plotly

2

Good question @cleverlydone ! I’m not sure if hijacking dash’s hot-reloading into the react component compilation flow is the right way to do it. What I’ve done in the past is use CLI tools that watch for file changes and then re-run changes when those files change.

The particular tool I used was $ entr. I don’t have the exact command (was on an older computer) but I recall the command was something like:

$ ag -l --js | entr npm run build:js

Where ag -l --js lists all of the JS files. | is the pipe operator that “feeds” the result from ag (the list of files) into entr. entr watches all of those files and waits for any file changes. When it detects a change, it runs the command you specify (in this case npm run build:js)

Here’s a decent tutorial on entr: entr(1)

And here’s ag: GitHub - ggreer/the_silver_searcher: A code-searching tool similar to ack, but faster.

Hope that helps!

1 Like