Saving Dash layout to html

Question

I plotted a bunch of things in a dash layout. I want to save them to an html file so I can look at them later. when I reopen the saved html file, I first see everything correctly. However, within <1s, the page goes blank and I get an error: “Error loading layout”. (see gif below)

How can this be fixed?

Thanks!

Answer 1

This solution is not fully working:

You have to save your Webpage complete.
To prevent the javascript creating any errors i have removed the bundle(2).js file.

This file contains the function dash_renderer which tries to interact with the server and creates issues.

<footer>
<script id="_dash-config" type="application/json">{"url_base_pathname": "/", "requests_pathname_prefix": "/"}</script>
<script src="./Dash_files/react.min.js"></script>
<script src="./Dash_files/react-dom.min.js"></script>
<script src="./Dash_files/bundle.js"></script>
<script src="./Dash_files/plotly-1.38.0.min.js"></script>
<script src="./Dash_files/bundle(1).js"></script>
<!-- <script src="./Dash_files/bundle(2).js"> --></script>
</footer>

The result is the same page as you can see for ~1s.

Big disadvantage: The interactivity from plotly is lost.

Answer 2

A Dash app layout is serialized as JSON and served to the front-end by the Dash server (an extension of a Flask server). All Dash components included in your layout are bundled as JS/CSS files. These bundles are also served by the Dash server to the front-end.

Without the server, there is no one to send JSON, JS, CSS bundles to the front-end, so nothing will be rendered.

I'm not sure why you can see your app for a brief moment. My guess is that Dash saves a PNG image of your app every time you run it. Think of it like a splash screen you see before the real, reactive app shows up.

Have a look at this high-level overview on how Dash works under the hood.