Get started with Dash

Overview

This article will show you how to publish a Python App with Dash in Katonic Platform.

In this tutorial you will:

• spin a workspace environment with the necessary dependencies to publish a Dash App.
• setup and create sample dash app.
• publish an App to the Katonic Deploy Launchpad.

You’ll be working with sample-dash app.

In this example, the application serves an interactive scatter plot of countries by GDP per capita and life expectancy.

It will take approximately 5 minutes to get this example running in Katonic platform.

Setting-up your Workspace

The first step is to create a VSCode Workspace capable of running your App.

1. From the platform, Select Workspace then click on Create Workspace.

2. Fill the following details there:

• Name : fill your workspace name.

• Select Environment: select VSCode environment.

• Webapp: select Dash.

• Image : select Dash versions.

• Additional Port: select port where you want to run.

• Resources: Desired compute resource for workspace.

• Click on Create.

3. You will be directed to the Workspace overview window, where you can see your workspace under processing.

4. It will take approximately 2-3 minutes to get this workspace ready.

Note: Refresh the page, if your are not seeing processing to running status change after 2-3 minutes.

5. You can connect to your workspace, when the processing tab changes to running.

6. Click on the connect button to use this Workspace for App building.

Required Git instructions and setup

Follow the Link for Git instruction and setup required in the VSCode.

Start the app development

1. Write your sample app.py code there or copy below sample code.

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go
import os

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv')

route = os.environ["ROUTE"]
app = dash.Dash(url_base_pathname=route)

# Set layout
app.layout = html.Div(style={'paddingLeft': '40px', 'paddingRight': '40px'}, children=[
    dcc.Graph(id='graph-with-slider'),
    dcc.Slider(
        id='year-slider',
        min=df['year'].min(),
        max=df['year'].max(),
        value=df['year'].min(),
        step=None,
        marks={str(year): str(year) for year in df['year'].unique()}
        )
    ])

@app.callback(
    dash.dependencies.Output('graph-with-slider', 'figure'),
    [dash.dependencies.Input('year-slider', 'value')])
def update_figure(selected_year):
    filtered_df = df[df.year == selected_year]
    traces = []
    for i in filtered_df.continent.unique():
        df_by_continent = filtered_df[filtered_df       ['continent'] == i]
        traces.append(go.Scatter(
            x=df_by_continent['gdpPercap'],
            y=df_by_continent['lifeExp'],
            text=df_by_continent['country'],
            mode='markers',
            opacity=0.7,
            marker={
                'size': 15,
                'line': {'width': 0.5, 'color': 'white'}
            },
            name=i
        ))
    return {
        'data': traces,
        'layout': go.Layout(
            xaxis={'type': 'log', 'title': 'GDP Per Capita'},
            yaxis={'title': 'Life Expectancy', 'range': [20, 90]},
            margin={'l': 40, 'b': 40, 't': 10, 'r': 10},
            legend={'x': 0, 'y': 1},
            hovermode='closest'
        )
    }

if __name__ == '__main__':
    app.run_server(debug=True, host='0.0.0.0', port=8050)

Note: Always define the route as given in sample code, when defining app.

route = os.environ["ROUTE"]
app = dash.Dash(url_base_pathname=routes)

Test your app

1. Create the requirements.txt file with all required dependency.

2. Here is the requirements.txt code used in above app.

dash>=2.6.1
dash-html-components>=2.0.0
dash-core-components>=2.0.0
pandas==1.5.2
plotly>=5.10.0
gunicorn==20.1.0

3. Type following command in the terminal

pip install -r requirements.txt
python app.py

Note: keep the path relative to your folder structure.

Note: keep your app name as app.py and requirement file as requirements.txt

4. Go back to the workspaces.

5. Click on the Live app to see your app.

• Click on open live app from the pop-up.

6. Your app will open on the new tab.

7. You can also monitor your running workspace usage by clicking on Resource Monitoring.

8. Finally commit and push your code to the GitHub. Follow the Link for instructions required to commit and push in the VSCode.

Deploy your App

1. To deploy your app, go to the Deploy tab and click on the +create Deployment button and select Apps.

2. Fill the details as follow:

• App Name: your app name.

• Select Environment: your app environment.

• Github Token: your github token.

• Username: your github account.

• Account Type: select your account personal or organisation.

• Branch: Select the master branch of the repository from drop down.

• Main file path: appfile name with extention.

• Python Version: choose desired python version for app.

• Autoscaling : Choose the minimum and maximum pods value

• Resources: choose desired compute resources.

4. Click on the Deploy button, it will take you to the Deploy window again.

5. Here you can see your App deployment status processing.

6. After few minutes status will change to running.

!

Keep checking the logs for the installation process.

Once the app is live inside the logs, the external app will be running

7. Click on App Url to see the deployed app.

You can share the App Url to showcase your work.