📣 Announcing Hot reload

Hello Dash Community –

We have a new feature coming up for dash app developer, Hot reload. It automatically reload the browser page when modifications have been detected in your project.

Now available in the latest version of Dash!

pip install dash --upgrade

Dev tools params (in app.run_server or app.enable_dev_tools

  • dev_tools_hot_reload , bool set to true to enable hot reload (default=False).
  • dev_tools_hot_reload_interval , int, interval at which the renderer will request the reload hash (default=3000).
  • dev_tools_hot_reload_watch_interval , float, The delay between each walk of the assets folder to detect file changes.
  • dev_tools_silence_routes_logging , disable the route logging.

Hot reload is activated by default when debug=True !!

PR:

10 Likes

It’s looking so good! It’s really nice to be able to develop with the app on one side of the screen and the code on the other side of the screen, and not have to worry about refreshing the page.
I just downloaded the latest version and played around with it:

Looking forward to hearing what other people think!

3 Likes

Wow - Great to have hot- reload. Thanks @Philippe!!

It isn’t working for me though- it keeps throwing an error - 'dict keys are not json serializeable" even though its running. It is not automatically reloading the page upon change. My app works fine with the previous version of dash and dash-renderer

Released dash==0.29.0rc4, should fix the json issue on py3.

1 Like

@Philippe, it still not working for me the way it does in the gif example above. Do you have a code snippet that I can test this on to check if it is something maybe I’m doing wrong?

Did you upgrade dash to 0.29.0rc4 ? Any dash app code should work, just start the app with app.run_server(debug=True, threaded=True) and make modifications to the app or assets.

1 Like

I do, that said, it doesn’t seem to work in the way I thought it would. I still have to save the file whenever it reloads. From the gif, and the reload_interval params, it look like it is done automatically and doesn’t require saving.

Here is the app I’m trying this out on.

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)
app.layout = html.Div([
    html.Div(style={'height': '500'}),
    html.H1('Hello world!')
])
if __name__ == '__main__':
    app.run_server(debug=True, threaded=True)

Oh, it depends on the editor you are using, some editor do autosave and the reloader will pick it up. In the gif you can see the save before the reloading happen (there is a small circle in the editor tab).

Ah, yes. I see that now.

Seems like this doesn’t work with tabs though. When I’m on tab two and make an edit, the hot reload reopens to tab one again.

The state of the tab component is not kept when reloading, so it revert back to the default tab. I’ll try to keep the state, but it might go in another PR.

looks cool, will this be “pip install --upgrade” available sometime soon?

Yes, it will be released soon, probably next week.

1 Like

Hot reload has been released !

Use it with:
pip install dash==0.30.0
pip install dash-renderer==0.15.0

4 Likes

Really looking forward to using this. However, while I can get it to work in relatively simple applications no problem, I cannot seem to get it to work with a large, relatively complex app.

The app I am working on uses large files, multiple tabs, css sheets (in the assets folder), etc. Therefore, it can take some time to load in the browser. Is there a possibility that the reload is timing out?

In the browser window, I get:

Reloader failed after 9 times.
Please check your application for errors.

I have checked this both on Firefox and Chrome.

You can try setting the max_retry higher and the poll rate higher too if your application is long to start.

app.run_server(..., 
    dev_tools_hot_reload_interval=5000,
    dev_tools_hot_reload_max_retry=30
)
2 Likes

Yes! It was the max_retry that I was missing. (My editor does not autosave.) Very cool and huge time savings. Thanks for the fast response!

3 Likes

A post was split to a new topic: Hot Reload not working for me

@Philippe, not sure if you recall our convo here, but it was about allowing hot reload to maintain tab state.

Since I’m often working on different tabs that are not the default, my workaround has been to set the dcc.Tabs value property to whichever tab I’m working on at the moment and just make sure that I never commit that line or simply change/reset it when I’m done with that tab. Reason I bring this up is because it occurred to me that this could be a potential solution. I’m not sure how hot reload works under the hood, but wouldn’t it be possible to read the value property of tabs and set that value property on the reload?