如何完全离线使用Plotly/Dash(Python)？

Question

使用 Dash 0.22.0 和 Python 2.7.12。 Plotly 是 3.1.0 但在以下示例中未使用。

我正在尝试创建一个应该完全离线工作的最小应用程序。

我没有从远程 dash_html_components/bundle.js、dash_renderer/bundle.js、react.min.js 和 react-dom.min.js 加载它们，而是将它们的本地副本放在 /assets/js 中。我想告诉 Dash 只使用这些文件的本地副本。

我读过 Assets files & index customizations #286，如果我理解得很好，下面的例子应该可行：

# -*- 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 来源：

<!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/react@15.4.2/dist/react.min.js"></script>
         <script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.min.js"></script>
         <script src="https://unpkg.com/dash-html-components@0.11.0/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/dash-renderer@0.13.0/dash_renderer/bundle.js"></script>
        </footer>
    </body>
</html>

如您所见，我的本地 js 文件是从 /assets 加载的，但它一直从 https://unpkg.com/...

加载相同的文件

有没有办法避免这种情况？

Answer 1

看来我错过了一个更简单的解决方案。如果有人想这样做，我会把它放在这里。

不包含 dash 库（dash_html_components/bundle.js、dash_renderer/bundle.js、react.min.js 和 react-dom.min.js）的本地副本在 /assets。

仅对 js 和 css 与 Dash 和 React 无关的文件使用 /assets。就我而言 materialize.js、iconjar-map.js 及其各自的 CSS.

改为添加：

app.css.config.serve_locally = True
app.scripts.config.serve_locally = True

会成功的。

代码现在是：

# -*- 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)

和结果 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/react@15.4.2.min.js?v=0.13.0"></script>
            <script src="/_dash-component-suites/dash_renderer/react-dom@15.4.2.min.js?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>

如何完全离线使用Plotly/Dash(Python)？

How to use Plotly/Dash (Python) completely offline?

python

plotly

plotly-dash