How to deploy Dash App to Azure WebApp

I am currently trying to deploy a super simple Dash app in an Azure Web App service from a GitHub repo.

What should I set as my server? port? IP?

Right now this is what I have in the app.py

imagen

imagen

and these are my requierements.txt

imagen

and this is my start command in the WebApp Settings

imagen

But I get this at the azure url

imagen

And among the error logs I see this as the explanation for the cointainer failing

Container _______ didn't respond to HTTP pings on port: 8000, failing site start. See container logs for debugging.

However, when I run the app in my machine the port goes to 8050 so I’m thinking it’s something along those lines, but any attempts at changing the port in the start command, site settings or app.py haven’t really fixed the issue.

Any insight as to what I’m doing wrong? Thanks

Hello @TwoPointNo,

You dont need to set anything for your port or server, the line…

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

…means that your server wont spin up when being called by gunicorn.

Did you check on the forums, I know that I posted somethings on a topic not too long ago, it might help you with the troubleshooting.


I did read that topic (and took the start command from there) but was sadly still confused, If I comment

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

in my code, the error continues happening. I already have server = app.server just under the app = dash. Dash(__name__) definition, Should I take app.run_server() out of the if block? Or remove it altogether?

No, you should havent an issue.

Try the other steps in the process of the troubleshooting.

Nvm, I bet you are having an issue because of the Dash version…

Try altering it to be Dash==2.10.

Before 2.10, there was no restriction on flask, which causes issues because newer versions are incompatible.

It seems like that isn’t the problem either, changing the Dash requirement to 2.10 and leaving

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

in the code, and still getting the same error screen.

The bit that you are highlighting will not be the issue.

Start your app from scratch and make sure that you have the updated requirements when trying to spin it up.

I started an entirely new WebApp resource and although I no longer see the port issue in the logs, it still won’t load, something about the memory and the time to find the connection.

I guess I’ll try streamlit, a colleage was doing the same exercise next to me and it ran perfectly using streamlit.

Thanks for all your help!

Just out of curiosity, what repo were you trying?

GitHub - chelsy-mena/ISCMetrics: Web App para los ISC Metrics knock yourself out! and let me know if you see something weird

(I deleted some credentials because it’s company info but that part works, I’m sure)

What happens if you try taking the azure blob bit out?

Maybe also try taking the plotly requirement out, dash should download its version too.

Well the azure blob bit is what would get the data so it is necessary, and removing plotly from the requirements didn’t work either lol

Guess it wasn’t meant to be

Update! Zero issues with streamlit.

Hello @TwoPointNo,

Glad you got it to work with streamlit.

Here is my working example:

https://msdocs-python-webapp-quickstart-bsd3v.azurewebsites.net/

Out of curiosity, what version of Python were you trying it on?

Mine is running on 3.10:

testApp.py:

from dash import Dash, dcc, html, Input, Output, no_update, State
import plotly.graph_objects as go
import pandas as pd

# Small molcule drugbank dataset
Source = 'https://raw.githubusercontent.com/plotly/dash-sample-apps/main/apps/dash-drug-discovery/data/small_molecule_drugbank.csv'

df = pd.read_csv(Source, header=0, index_col=0)

fig = go.Figure(data=[
    go.Scatter(
        x=df["LOGP"],
        y=df["PKA"],
        mode="markers",
        marker=dict(
            colorscale='viridis',
            color=df["MW"],
            size=df["MW"],
            colorbar={"title": "Molecular<br>Weight"},
            line={"color": "#444"},
            reversescale=True,
            sizeref=45,
            sizemode="diameter",
            opacity=0.8,
        )
    )
])

# turn off native plotly.js hover effects - make sure to use
# hoverinfo="none" rather than "skip" which also halts events.
fig.update_traces(hoverinfo="none", hovertemplate=None)

fig.update_layout(
    xaxis=dict(title='Log P'),
    yaxis=dict(title='pkA'),
    plot_bgcolor='rgba(255,255,255,0.1)'
)

app = Dash(__name__, external_scripts=[{'src': "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"}])

server = app.server

app.layout = html.Div([
    dcc.Graph(id="graph-basic-2", figure=fig, clear_on_unhover=True),
    dcc.Tooltip(id="graph-tooltip"),
    dcc.Store(id='graph-basic-2-data', data=df.to_dict('records'))
])

app.clientside_callback(
    """
    function showHover(hv, data) {
        if (hv) {
            //demo only shows the first point, but other points may also be available          
            pt = hv["points"][0]
            bbox = pt["bbox"]
            num = pt["pointNumber"]

            df_row = data[num]
            img_src = df_row['IMG_URL']
            name = df_row['NAME']
            form = df_row['FORM']
            desc = df_row['DESC']
            if (desc.length > 300) {
                desc = desc.substring(0,100) + '...'
            }

            img = jQuery(
                "<img>", {
                    src: img_src,
                    style: "width:100%"
                }
            )

            ttl = jQuery("<h2>", {text: name})
            form = jQuery("<p>", {text: form})
            desc = jQuery("<p>", {text: desc})

            newDiv = jQuery("<div>", {
                style: 'width:200px;white-space:normal'
            })

            $(newDiv).append(img)
            $(newDiv).append(ttl)
            $(newDiv).append(form)
            $(newDiv).append(desc)

            $('#graph-tooltip').empty()

            $('#graph-tooltip').append($(newDiv))

            return [true, bbox]
        }
        return [false, dash_clientside.no_update]
    }
    """,
    Output("graph-tooltip", "show"),
    Output("graph-tooltip", "bbox"),
    Input("graph-basic-2", "hoverData"),
    State('graph-basic-2-data', 'data')
)

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

requirements.txt:

asttokens==2.0.8
backcall==0.2.0
Brotli==1.0.9
cachelib==0.9.0
click==8.1.3
colorama==0.4.5
dash==2.6.2
dash-bootstrap-components==1.2.1
dash-bootstrap-templates==1.0.7
dash-core-components==2.0.0
dash-html-components==2.0.0
dash-iconify==0.1.2
dash-loading-spinners==1.0.0
dash-mantine-components==0.10.2
dash-table==5.0.0
debugpy==1.6.3
decorator==5.1.1
dill==0.3.5.1
diskcache==5.4.0
EditorConfig==0.12.3
entrypoints==0.4
executing==1.1.1
Flask==2.2.2
Flask-Caching==2.0.1
Flask-Compress==1.13
Flask-Login==0.6.2
Flask-SQLAlchemy==3.0.0
greenlet==1.1.3
ipykernel==6.16.1
ipython==8.5.0
ipywidgets==8.0.2
itsdangerous==2.1.2
jedi==0.18.1
Jinja2==3.1.2
jsbeautifier==1.14.6
jupyter-client==7.4.3
jupyter-core==4.11.2
jupyterlab-widgets==3.0.3
MarkupSafe==2.1.1
matplotlib-inline==0.1.6
more-itertools==8.14.0
multiprocess==0.70.13
nest-asyncio==1.5.6
numpy==1.23.3
packaging==21.3
pandas==1.5.0
parso==0.8.3
pickleshare==0.7.5
plotly==5.10.0
prompt-toolkit==3.0.31
psutil==5.9.2
pure-eval==0.2.2
Pygments==2.13.0
pyparsing==3.0.9
python-dateutil==2.8.2
pytz==2022.4
pyzmq==24.0.1
six==1.16.0
SQLAlchemy==1.4.41
stack-data==0.5.1
tenacity==8.1.0
tornado==6.2
traitlets==5.5.0
wcwidth==0.2.5
Werkzeug==2.2.2
widgetsnbextension==4.0.3

config:

3 Likes

This works?

Hello @MauriD,

Yes, it works.

the last image you shared, with stack, major version, minor version, startup command I don’t see that when I am making my application. Where do I find that?

updates: nevermind I found it but I am still getting an error. its saying application error now instead of app is running but no code.
Can you copy and paste what you have in the startup command section here so I know I its correct?