Issue deploying a Dash app - 404 when loading the component assets?

Dash Python
1

I have been a huge advocate of Dash within my organization for its ease of deploying internal web applications on our local networks. I’ve used Dash to make several internal GUI applications, and while I have encountered some challenging obstacles along the way, I’ve almost always found ways to make do with its strange obsession with callbacks, a form of programming which React emerged in order to eradicate. It hasn’t been a dealbreaker, in other words. The ability to transpile a Python program to a working React application is utterly amazing to me, and simplifies so many aspects of full-stack web development that would otherwise require me to work in two completely separate codebases, in two completely different languages, bridging two stateful processes together. I hugely appreciate the work that you’re doing to make full-stack web development not only possible in Python, but a pleasure.

That said. I’m working on an open source, COVID related volunteer project right now for which I used Dash to create something that needs to be usable by other people on my team. I cannot for the life of me understand what you are talking about in your documentation when it says:

import flask

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

By exposing this server variable, you can deploy Dash apps like you would any Flask app. For more, see the official Flask Guide to Deployment.

I am well versed with Flask and can assure you, no, I have never had a deployment issue such as this before:

Screenshot_20200821_001813
Screenshot_20200821_0018132560×1411 677 KB

The cynic in me feels like I’m being coerced into paying for Dash Enterprise in order to deploy my app.

2

I have found it to be straight forward to deploy Dash apps, both on external platforms (such as Heroku) and on internal servers, e.g. using gunicorn.

From your post it is not really clear what you are trying to do. Please add context and code.

3

Are you exposing the app object or the server object in your gunicorn command?

If you have an app.py file with:

import flask

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

Then the gunicorn command should look something like this:

gunicorn app:server --your-options
4

I’ve done all these things:

import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
import dash_daq as daq
from dash.dependencies import Input, Output, State
import flask
import time
import requests

server = flask.Flask(__name__)  # define flask app.server
server.suppress_callback_exceptions = True
app = dash.Dash(__name__,external_stylesheets=[dbc.themes.DARKLY], server=server)

...

if __name__ == "__main__":
    server.run(host='0.0.0.0',port="8000")

Then the gunicorn command should look something like this:

gunicorn app:server --your-options

So I run

root@arbitrium:~/covidwire/daq/daq# poetry run gunicorn app:server -b 0.0.0.0 -p 8000
[2020-08-21 10:19:24 +0000] [5934] [INFO] Starting gunicorn 20.0.4
[2020-08-21 10:19:24 +0000] [5934] [INFO] Listening at: http://0.0.0.0:8000 (5934)
[2020-08-21 10:19:24 +0000] [5934] [INFO] Using worker: sync
[2020-08-21 10:19:24 +0000] [5972] [INFO] Booting worker with pid: 5972
<Flask 'app'>

And the console output of my app is:

GET https://kevinzeidler.com/_dash-component-suites/dash_renderer/react-dom@16.v1_6_0m1595872601.13.0.min.js net::ERR_ABORTED 404 (Not Found)
classified:22 GET https://kevinzeidler.com/_dash-component-suites/dash_renderer/react@16.v1_6_0m1595872601.13.0.min.js net::ERR_ABORTED 404 (Not Found)
classified:9 GET https://kevinzeidler.com/assets/style.css?m=1597987826.1095846 net::ERR_ABORTED 404 (Not Found)
classified:21 GET https://kevinzeidler.com/_dash-component-suites/dash_renderer/polyfill@7.v1_6_0m1595872601.8.7.min.js net::ERR_ABORTED 404 (Not Found)
classified:25 GET https://kevinzeidler.com/_dash-component-suites/dash_html_components/dash_html_components.v1_0_3m1585775459.min.js net::ERR_ABORTED 404 (Not Found)
classified:24 GET https://kevinzeidler.com/_dash-component-suites/dash_renderer/prop-types@15.v1_6_0m1595872601.7.2.min.js net::ERR_ABORTED 404 (Not Found)
classified:27 GET https://kevinzeidler.com/_dash-component-suites/dash_core_components/dash_core_components.v1_10_2m1595872691.min.js net::ERR_ABORTED 404 (Not Found)
classified:26 GET https://kevinzeidler.com/_dash-component-suites/dash_daq/dash_daq.v0_5_0m1587997219.min.js net::ERR_ABORTED 404 (Not Found)
classified:28 GET https://kevinzeidler.com/_dash-component-suites/dash_core_components/dash_core_components-shared.v1_10_2m1595872691.js net::ERR_ABORTED 404 (Not Found)
classified:30 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_bootstrap_components/_components/dash_bootstrap_components.min.js?m=1597988685.2940805 net::ERR_ABORTED 404 (Not Found)
classified:29 GET https://kevinzeidler.com/_dash-component-suites/dash_bootstrap_components/_components/dash_bootstrap_components.v0_10_5m1597987897.min.js net::ERR_ABORTED 404 (Not Found)
classified:31 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_core_components/async-datepicker.js?m=1597988714.6263704 net::ERR_ABORTED 404 (Not Found)
classified:32 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_core_components/async-dropdown.js?m=1597988714.6343703 net::ERR_ABORTED 404 (Not Found)
classified:33 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_core_components/async-graph.js?m=1597988714.6263704 net::ERR_ABORTED 404 (Not Found)
classified:35 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_core_components/async-markdown.js?m=1597988714.6343703 net::ERR_ABORTED 404 (Not Found)
classified:34 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_core_components/async-highlight.js?m=1597988714.6263704 net::ERR_ABORTED 404 (Not Found)
classified:36 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_core_components/async-plotlyjs.js?m=1597988714.6383705 net::ERR_ABORTED 404 (Not Found)
classified:37 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_core_components/async-slider.js?m=1597988714.6343703 net::ERR_ABORTED 404 (Not Found)
classified:38 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_core_components/async-upload.js?m=1597988714.6303704 net::ERR_ABORTED 404 (Not Found)
classified:39 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_core_components/dash_core_components-shared.js?m=1597988714.6303704 net::ERR_ABORTED 404 (Not Found)
classified:40 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_core_components/dash_core_components.min.js?m=1597988714.6303704 net::ERR_ABORTED 404 (Not Found)
classified:42 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_daq/async-colorpicker.js?m=1597988735.4145758 net::ERR_ABORTED 404 (Not Found)
classified:41 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_core_components/plotly.min.js?m=1597988714.6303704 net::ERR_ABORTED 404 (Not Found)
classified:43 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_daq/async-slider.js?m=1597988735.4145758 net::ERR_ABORTED 404 (Not Found)
classified:44 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_daq/dash_daq.min.js?m=1597988735.4145758 net::ERR_ABORTED 404 (Not Found)
classified:45 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_html_components/dash_html_components.min.js?m=1597988720.6344297 net::ERR_ABORTED 404 (Not Found)
classified:46 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_renderer/dash_renderer.dev.js?m=1597988703.6822622 net::ERR_ABORTED 404 (Not Found)
classified:47 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_renderer/dash_renderer.min.js?m=1597988703.6862621 net::ERR_ABORTED 404 (Not Found)
classified:48 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_renderer/polyfill@7.8.7.min.js?m=1597988703.6822622 net::ERR_ABORTED 404 (Not Found)
classified:49 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_renderer/prop-types@15.7.2.js?m=1597988703.6862621 net::ERR_ABORTED 404 (Not Found)
classified:50 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_renderer/prop-types@15.7.2.min.js?m=1597988703.6822622 net::ERR_ABORTED 404 (Not Found)
classified:51 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_renderer/react-dom@16.13.0.js?m=1597988703.6822622 net::ERR_ABORTED 404 (Not Found)
classified:52 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_renderer/react-dom@16.13.0.min.js?m=1597988703.6822622 net::ERR_ABORTED 404 (Not Found)
classified:53 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_renderer/react@16.13.0.js?m=1597988703.6822622 net::ERR_ABORTED 404 (Not Found)
classified:54 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_renderer/react@16.13.0.min.js?m=1597988703.678262 net::ERR_ABORTED 404 (Not Found)
classified:55 GET https://kevinzeidler.com/_dash-component-suites/dash_renderer/dash_renderer.v1_6_0m1595872623.min.js net::ERR_ABORTED 404 (Not Found)
classified:22 GET https://kevinzeidler.com/_dash-component-suites/dash_renderer/react@16.v1_6_0m1595872601.13.0.min.js net::ERR_ABORTED 404 (Not Found)
classified:23 GET https://kevinzeidler.com/_dash-component-suites/dash_renderer/react-dom@16.v1_6_0m1595872601.13.0.min.js net::ERR_ABORTED 404 (Not Found)
classified:24 GET https://kevinzeidler.com/_dash-component-suites/dash_renderer/prop-types@15.v1_6_0m1595872601.7.2.min.js net::ERR_ABORTED 404 (Not Found)
classified:25 GET https://kevinzeidler.com/_dash-component-suites/dash_html_components/dash_html_components.v1_0_3m1585775459.min.js net::ERR_ABORTED 404 (Not Found)
classified:26 GET https://kevinzeidler.com/_dash-component-suites/dash_daq/dash_daq.v0_5_0m1587997219.min.js net::ERR_ABORTED 404 (Not Found)
classified:27 GET https://kevinzeidler.com/_dash-component-suites/dash_core_components/dash_core_components.v1_10_2m1595872691.min.js net::ERR_ABORTED 404 (Not Found)
classified:28 GET https://kevinzeidler.com/_dash-component-suites/dash_core_components/dash_core_components-shared.v1_10_2m1595872691.js net::ERR_ABORTED 404 (Not Found)
classified:29 GET https://kevinzeidler.com/_dash-component-suites/dash_bootstrap_components/_components/dash_bootstrap_components.v0_10_5m1597987897.min.js net::ERR_ABORTED 404 (Not Found)
classified:30 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_bootstrap_components/_components/dash_bootstrap_components.min.js?m=1597988685.2940805 net::ERR_ABORTED 404 (Not Found)
classified:31 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_core_components/async-datepicker.js?m=1597988714.6263704 net::ERR_ABORTED 404 (Not Found)
classified:32 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_core_components/async-dropdown.js?m=1597988714.6343703 net::ERR_ABORTED 404 (Not Found)
classified:33 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_core_components/async-graph.js?m=1597988714.6263704 net::ERR_ABORTED 404 (Not Found)
classified:34 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_core_components/async-highlight.js?m=1597988714.6263704 net::ERR_ABORTED 404 (Not Found)
classified:35 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_core_components/async-markdown.js?m=1597988714.6343703 net::ERR_ABORTED 404 (Not Found)
classified:36 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_core_components/async-plotlyjs.js?m=1597988714.6383705 net::ERR_ABORTED 404 (Not Found)
classified:37 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_core_components/async-slider.js?m=1597988714.6343703 net::ERR_ABORTED 404 (Not Found)
classified:38 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_core_components/async-upload.js?m=1597988714.6303704 net::ERR_ABORTED 404 (Not Found)
classified:39 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_core_components/dash_core_components-shared.js?m=1597988714.6303704 net::ERR_ABORTED 404 (Not Found)
classified:40 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_core_components/dash_core_components.min.js?m=1597988714.6303704 net::ERR_ABORTED 404 (Not Found)
classified:41 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_core_components/plotly.min.js?m=1597988714.6303704 net::ERR_ABORTED 404 (Not Found)
classified:42 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_daq/async-colorpicker.js?m=1597988735.4145758 net::ERR_ABORTED 404 (Not Found)
classified:43 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_daq/async-slider.js?m=1597988735.4145758 net::ERR_ABORTED 404 (Not Found)
classified:44 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_daq/dash_daq.min.js?m=1597988735.4145758 net::ERR_ABORTED 404 (Not Found)
classified:45 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_html_components/dash_html_components.min.js?m=1597988720.6344297 net::ERR_ABORTED 404 (Not Found)
classified:46 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_renderer/dash_renderer.dev.js?m=1597988703.6822622 net::ERR_ABORTED 404 (Not Found)
classified:47 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_renderer/dash_renderer.min.js?m=1597988703.6862621 net::ERR_ABORTED 404 (Not Found)
classified:48 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_renderer/polyfill@7.8.7.min.js?m=1597988703.6822622 net::ERR_ABORTED 404 (Not Found)
classified:49 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_renderer/prop-types@15.7.2.js?m=1597988703.6862621 net::ERR_ABORTED 404 (Not Found)
classified:50 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_renderer/prop-types@15.7.2.min.js?m=1597988703.6822622 net::ERR_ABORTED 404 (Not Found)
classified:51 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_renderer/react-dom@16.13.0.js?m=1597988703.6822622 net::ERR_ABORTED 404 (Not Found)
classified:52 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_renderer/react-dom@16.13.0.min.js?m=1597988703.6822622 net::ERR_ABORTED 404 (Not Found)
classified:53 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_renderer/react@16.13.0.js?m=1597988703.6822622 net::ERR_ABORTED 404 (Not Found)
classified:54 GET https://kevinzeidler.com/assets/_dash-component-suites/dash_renderer/react@16.13.0.min.js?m=1597988703.678262 net::ERR_ABORTED 404 (Not Found)
classified:55 GET https://kevinzeidler.com/_dash-component-suites/dash_renderer/dash_renderer.v1_6_0m1595872623.min.js ```
5

My guess is that whatever server you are using in front of gunicorn (e.g nginx?) isn’t mapping port 8000 correctly on gunicorn. Or you aren’t forwarding all of the subpaths to gunicorn correctly. Nothing in the set up that you shared directly looks wrong.

This doesn’t look like a Dash issue to me. Just to remove one level of abstraction you could drop down into flask and get that to work first by following the links that we provided in the documentation. My guess is you’d have the same issue with a basic hello world flask app when loading a web page other than /, e.g. /classified as in your example:

from flask import Flask
app = Flask(__name__)

@app.route('/classified')
def hello_world():
    return 'Hello, World!'
6

Did you find any solution for this?