Deploying Dash Apps on Azure with Windows

Written By Rathes Waran
blog-bg.png

The purpose of this post is to use as little code as possible to deploy your dash app.

Steps can be replicated on mac, in this post, the app will be deployed using the windows environment.

Step 1: Create a virtual environment

Once you’ve created a folder to store your app.py script, open up Command Prompt and cd into your directory.
cd "C:\Users\Rathes\Documents\dash-app-az"

Create a virtual environment by installing the virtualenv library with pip
pip install virtualenv

Run these commands to activate the environment
python -m virtualenv venv
.\venv\Scripts\activate

Your output should show (venv) signaling an activated environment:
(venv) C:\Users\Rathes\Documents\dash-app-az>

Next, install the libraries you're using within your app.py
For the example app.py script, I'm installing these libraries:
pip install dash
pip install dash-extensions
pip install dash-bootstrap-components
pip install plotly
pip install pandas

Create a requirements.txt file using this command
pip freeze > requirements.txt

Step 2: Create a GitHub repository and upload your app

Before uploading/ pushing your app.py onto github, you would need to create a .gitignore file. Open up a Text Editor of your preference and add this code:
venv/
It is so that GitHub does not load your venv into the repository.

gitignore-img.png

Next, let's configure the app.py file. The Dash app will not be too lengthy, rather simple to highlight key lines to add within your code to ensure successful deployment onto Azure.

It may look a bit different than your normal dash apps as you would need to replace the app variable with something else, here it's replaced with dash_app.

This includes callbacks as well. That is because Azure is looking for a Flask app variable named app. You can read more here.

import dash
import dash_core_components as dcc
import dash_bootstrap_components as dbc  # pip install dash-bootstrap-components
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.express as px

import pandas as pd

df = pd.read_csv('assets/data/gapminderDataFiveYear.csv')

dash_app = dash.Dash(__name__, external_stylesheets=[dbc.themes.DARKLY])
app = dash_app.server

dash_app.layout = html.Div([
    dcc.Graph(id='graph-with-slider'),
    dcc.Slider(
        id='year-slider',
        min=df['year'].min(),
        max=df['year'].max(),
        value=df['year'].min(),
        marks={str(year): str(year) for year in df['year'].unique()},
        step=None
    )
])


@dash_app.callback(
    Output('graph-with-slider', 'figure'),
    Input('year-slider', 'value'))

def update_figure(selected_year):
    filtered_df = df[df.year == selected_year]

    fig = px.scatter(filtered_df, x="gdpPercap", y="lifeExp",
                     size="pop", color="continent", hover_name="country",
                     log_x=True, size_max=55, template="plotly_dark")

    fig.update_layout(transition_duration=500)

    return fig


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

Download the Git CLI tool if you haven’t already and install it.

Next create a GitHub repository to push your app:

gitrepo-img.png
gitrepo-img-1.png

Next, circle back to your Command Prompt and add these commands to commit your app to GitHub:

git init
git add .
git commit -m "app launch"

On the quick setup page after you’ve created your repository, you will see a section that says:

gitrepo-img-2.png

Run those commands and you would’ve successfully deployed your Dash app to GitHub!

gitrepo-img-3.png

Step 3: Sign up on Azure and Deploy your app

Login to Azure: https://portal.azure.com/ or sign up for a 12 month Free Trial.

Once logged in select App Services

azure-img.png

On the App Services page select Create, configure your app settings then Review + Create > Create.

azure-img-1.png

When deployment is complete, select Go to resource to navigate to the App Service page. The next step is to deploy the sample code from your GitHub repository. If you're not signed into GitHub already, sign in. Fill out Organization, Repository (Select the name of the repository), and Branch.

azure-img-2.png

Click Save and select the Logs tab to view the status of the deployment. It takes a few minutes to build and deploy the sample and additional logs appear during the process. Upon completion, the logs should reflect a Status of Success (Active):

azure-img-3.png

Once deployment is complete, select Overview on the left-hand menu to return to the main page for the web app. Select the URL that contains address of the web app:

azure-img-4.png

Click on the URL and verify you have successfully deployed a Dash app onto Azure!

azure-img-5.png

Guide Completed

I hope you found this helpful and informative. As always, don’t hesitate to reach out to me on social media.

Thanks for reading,

Rathes Waran is a Senior Business Intelligence Consultant and works remotely from Kuala Lumpur. He specializes in Data Visualization with a solid 6 years experience in Data Science, he loves sunny days and coffee.

If you enjoy the content then consider buying me a coffee 😍.

Rathes Waran