Black Lives Matter. Please consider donating to Black Girls Code today.

Getting “Failed to load resource” error on Dash load on IIS with Flask on Anaconda

I am trying to setup a Dash App on Flask with the IIS server and WFastCGI on Anaconda. What I could be missing so that it cannot find the required JS? I’ve tested plain Flask apps on the server and it works okay.

  • IIS server version: 8.0
  • Flask=1.1.1
  • Dash=1.8.0
  • python 3.6.8

I have also tried with app.css.config.serve_locally = False and app.scripts.config.serve_locally = False But it doesn’t work whether both are true/false.

I’ve tried below variant too for creating server and the app object.

server = flask.Flask(__name__)
app = dash.Dash(__name__, server=server)

Below is my code.

import dash
import dash_core_components as dcc
import dash_html_components as html

# external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__)#, external_stylesheets=external_stylesheets)
server = app.server
app.css.config.serve_locally = True
app.scripts.config.serve_locally = True 

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for Python.
    '''),

    dcc.Graph(
        id='example-graph',
        figure={
            'data': [
                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
            ],
            'layout': {
                'title': 'Dash Data Visualization'
            }
        }
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

The errors are as below on chrome console.

GET http://127.0.0.1/_dash-component-suites/dash_renderer/polyfill@7.v1_2_3m1580483115.7.0.min.js net::ERR_ABORTED 404 (Not Found)
flask:22 GET http://127.0.0.1/_dash-component-suites/dash_renderer/react-dom@16.v1_2_3m1580483115.8.6.min.js net::ERR_ABORTED 404 (Not Found)
flask:21 GET http://127.0.0.1/_dash-component-suites/dash_renderer/react@16.v1_2_3m1580483115.8.6.min.js net::ERR_ABORTED 404 (Not Found)
flask:23 GET http://127.0.0.1/_dash-component-suites/dash_renderer/prop-types@15.v1_2_3m1580483115.7.2.min.js net::ERR_ABORTED 404 (Not Found)
flask:24 GET http://127.0.0.1/_dash-component-suites/dash_core_components/dash_core_components.v1_7_0m1580483133.min.js net::ERR_ABORTED 404 (Not Found)
flask:25 GET http://127.0.0.1/_dash-component-suites/dash_core_components/dash_core_components-shared.v1_7_0m1580483133.js net::ERR_ABORTED 404 (Not Found)
flask:26 GET http://127.0.0.1/_dash-component-suites/dash_html_components/dash_html_components.v1_0_2m1573845875.min.js net::ERR_ABORTED 404 (Not Found)
flask:27 GET http://127.0.0.1/_dash-component-suites/dash_renderer/dash_renderer.v1_2_3m1580483115.min.js net::ERR_ABORTED 404 (Not Found)
flask:22 GET http://127.0.0.1/_dash-component-suites/dash_renderer/react-dom@16.v1_2_3m1580483115.8.6.min.js net::ERR_ABORTED 404 (Not Found)
flask:23 GET http://127.0.0.1/_dash-component-suites/dash_renderer/prop-types@15.v1_2_3m1580483115.7.2.min.js net::ERR_ABORTED 404 (Not Found)
flask:24 GET http://127.0.0.1/_dash-component-suites/dash_core_components/dash_core_components.v1_7_0m1580483133.min.js net::ERR_ABORTED 404 (Not Found)
flask:25 GET http://127.0.0.1/_dash-component-suites/dash_core_components/dash_core_components-shared.v1_7_0m1580483133.js net::ERR_ABORTED 404 (Not Found)
flask:26 GET http://127.0.0.1/_dash-component-suites/dash_html_components/dash_html_components.v1_0_2m1573845875.min.js net::ERR_ABORTED 404 (Not Found)
flask:27 GET http://127.0.0.1/_dash-component-suites/dash_renderer/dash_renderer.v1_2_3m1580483115.min.js net::ERR_ABORTED 404 (Not Found)
flask:28 Uncaught ReferenceError: DashRenderer is not defined
    at flask:28

The generated webpage code as below:

<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta charset="UTF-8">
        <title>Dash</title>
        <link rel="icon" type="image/x-icon" href="/_favicon.ico?v=1.8.0">

    </head>
    <body>

<div id="react-entry-point">
    <div class="_dash-loading">
        Loading...
    </div>
</div>

        <footer>
            <script id="_dash-config" type="application/json">{"url_base_pathname": null, "requests_pathname_prefix": "/", "ui": false, "props_check": false, "show_undo_redo": false}</script>
            <script src="/_dash-component-suites/dash_renderer/polyfill@7.v1_2_3m1580483115.7.0.min.js"></script>
<script src="/_dash-component-suites/dash_renderer/react@16.v1_2_3m1580483115.8.6.min.js"></script>
<script src="/_dash-component-suites/dash_renderer/react-dom@16.v1_2_3m1580483115.8.6.min.js"></script>
<script src="/_dash-component-suites/dash_renderer/prop-types@15.v1_2_3m1580483115.7.2.min.js"></script>
<script src="/_dash-component-suites/dash_core_components/dash_core_components.v1_7_0m1580483133.min.js"></script>
<script src="/_dash-component-suites/dash_core_components/dash_core_components-shared.v1_7_0m1580483133.js"></script>
<script src="/_dash-component-suites/dash_html_components/dash_html_components.v1_0_2m1573845875.min.js"></script>
<script src="/_dash-component-suites/dash_renderer/dash_renderer.v1_2_3m1580483115.min.js"></script>
            <script id="_dash-renderer" type="application/javascript">var renderer = new DashRenderer();</script>
        </footer>
    </body>
</html>

I found the fix. When I did closer look to the IIS settings, I’ve find out that the it was running as an application of the main website rather then as a main website of IIS. When I switched it to the main website it could find the paths to the required *.js and it can run the webpage without any issue.