Menu
Working with Dash 0.22.0 and Python 2.7.12. Plotly is 3.1.0 but not used in the following example.
I am trying to create a minimal app that should work completely offline.
Instead of loading from remote dash_html_components/bundle.js, dash_renderer/bundle.js, react.min.js and react-dom.min.js, I put their local copies in /assets/js. I want to tell Dash to use only the local copies of these files.
I read Assets files & index customizations #286 and if I understood well the following example should work:
# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash()
# default values
app.config.assets_folder = 'assets' # The path to the assets folder.
app.config.include_asset_files = True # Include the files in the asset folder
app.config.assets_external_path = "" # The external prefix if serve_locally == False
app.config.assets_url_path = '/assets' # the local url prefix ie `/assets/*.js`
app.layout = html.Div(
[html.H1("this is a test")]
)
if __name__ == '__main__':
app.run_server(debug=True)
HTML source:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Dash</title>
<link rel="stylesheet" href="/assets/css/materialize.css">
<link rel="stylesheet" href="/assets/css/materialize.min.css">
<link rel="stylesheet" href="/assets/material-icons/material-icons.css">
</head>
<body>
<div id="react-entry-point">
<div class="_dash-loading">
Loading...
</div>
</div>
<footer>
<script id="_dash-config" type="application/json"<{"requests_pathname_prefix": "/", "url_base_pathname": "/"}</script>
<script src="https://unpkg.com/[email protected]/dist/react.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/[email protected]/dash_html_components/bundle.js"></script>
<script src="/assets/js/dash_html_components_0.11.0/bundle.js"></script>
<script src="/assets/js/react_15.4.2/react-dom.min.js"></script>
<script src="/assets/js/react_15.4.2/react.min.js"></script>
<script src="/assets/js/dash_renderer_0.13.0/bundle.js"></script>
<script src="/assets/js/materialize_1.0.0.rc2/materialize.js"></script>
<script src="/assets/js/materialize_1.0.0.rc2/materialize.min.js"></script>
<script src="/assets/material-icons/iconjar-map.js"></script>
<script src="https://unpkg.com/[email protected]/dash_renderer/bundle.js"></script>
</footer>
</body>
</html>
As you can see, my local js files are loaded from /assets, but it keeps loading the same files from https://unpkg.com/...
Is there a way to avoid this?
600
Plotly Dash is a reasonably new framework for building machine learning and data science applications. Dash was created by parent company Plotly, who are already well established within the world of data science, due to their 'plotly.py' and 'plotly.
Is Dash free? Yes. Plotly's Dash analytics application framework is also free and open-source software, licensed under the MIT license.
Starting with this version, the only supported mode of operation in the plotly package is “offline” mode, which requires no internet connection, no account, no authentication tokens, and no payment of any kind. Support for “online” mode has been moved into a separately-installed package called chart-studio .
You can use Plotly for Python to make, view, and distribute graphics totally offline. The one exception is that to view tile maps which use tiles from a cloud-hosted service, such as Open Street Maps or Mapbox, you will need a connection to that service.
Plotly.py is the library that powers graphs and maps for Dash. Version 4.0 of Plotly.py (also known as the plotly module) is now available for download from PyPI.
Dash is the best way to build analytical apps in Python using Plotly figures. To run the app below, run pip install dash, click "Download" to get the code and run python app.py. Get started with the official Dash docs and learn how to effortlessly style & deploy apps like this with Dash Enterprise.
Plotly's open-source graphing libraries are free to use, work offline and don't require any account registration. Plotly also has commercial offerings, such as Dash Enterprise and Chart Studio Enterprise. New to Plotly?
It looks like I missed a simpler solution. I put it here if somebody is trying to to the same.
Don't include a local copy of dash libraries (dash_html_components/bundle.js, dash_renderer/bundle.js, react.min.js and react-dom.min.js) in /assets.
Use /assets only for js and css files not related to Dash and React. In my case materialize.js, iconjar-map.js and their respective CSS.
Adding instead:
app.css.config.serve_locally = True
app.scripts.config.serve_locally = True
will do the trick.
Code is now:
# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash()
# default values
app.css.config.serve_locally = True
app.scripts.config.serve_locally = True
app.config.assets_folder = 'assets' # The path to the assets folder.
app.config.include_asset_files = True # Include the files in the asset folder
app.config.assets_external_path = "" # The external prefix if serve_locally == False
app.config.assets_url_path = '/assets' # the local url prefix ie `/assets/*.js`
app.layout = html.Div(
[ html.H1("This is a test")]
)
if __name__ == '__main__':
app.run_server(debug=True)
and the resulting html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Dash</title>
<link rel="stylesheet" href="/assets/css/materialize.min.css">
<link rel="stylesheet" href="/assets/material-icons/material-icons.css">
</head>
<body>
<div id="react-entry-point">
<div class="_dash-loading">
Loading...
</div>
</div>
<footer>
<script id="_dash-config" type="application/json">{"requests_pathname_prefix": "/", "url_base_pathname": "/"}</script>
<script src="/_dash-component-suites/dash_renderer/[email protected]?v=0.13.0"></script>
<script src="/_dash-component-suites/dash_renderer/[email protected]?v=0.13.0"></script>
<script src="/_dash-component-suites/dash_html_components/bundle.js?v=0.11.0"></script>
<script src="/assets/js/materialize_1.0.0.rc2/materialize.min.js"></script>
<script src="/assets/material-icons/iconjar-map.js"></script>
<script src="/_dash-component-suites/dash_renderer/bundle.js?v=0.13.0"></script>
</footer>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With