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 !!
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:
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
@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.
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).
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.
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.
@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?
