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, click Workspace.

2. From the Workspaces Overview, click Create Workspace.

3. Fill the following details there:

• Name : fill your workspace name.

• Select Environment: select VSCode environment.

• Image: select VSCode webapps image.

• Webapp: select Dash.

• Additional Port: 8050.

• Resources: Desired compute resource for workspace.

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

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

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

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

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

Required Git instructions and setup

1. Once you connect to the your workspace , you will be taken to VSCode workspace.

2. Before starting anything it is advised that you should connect your GitHub repository to the VSCode workspace.

3. First create an empty repo in your GitHub account.

4. Clone that repo to your VSCode workspace.

5. Paste below code into terminal.

git clone https://github.com/account-name/repo-name.git

Note: Cancel the pop up option.

6. Fill your username and password/token as instructed in VSCode Workspace.

7. After logging with your GitHub account, you will see your repository folder in workspace.

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')
routes = os.environ["ROUTE"]
app = dash.Dash(url_base_pathname=routes)
server = app.server
# 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)
    <aside>

Note: Always define the routes as given in sample code, routes = os.environ["ROUTE"] app = dash.Dash(url_base_pathname=routes), server = app.server when defining app.

Note: Always keep the port = 8050

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==0.22.0
dash-renderer==0.13.0
dash-html-components==0.11.0
dash-core-components==0.26.0
plotly
pandas
gunicorn==20.1.0
Werkzeug==2.0.0

3. Type following command in the terminal

pip install -r requirements.txt
gunicorn app:server -b 0.0.0.0:8050

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.

6. Your app will open on the new tab.

7. Finally commit and push your code to the GitHub.

git config user.email 'youremail@domain.com'
git config user.name 'youraccount-name'
git add .
git commit -m ' your msg'
git push

Follow the necessary GitHub instructions as pop up by VSCode to complete code push.

Deploy your App

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

2. You will see below form window.

3. 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.

• Repository Branch: choose app repo from drop down.

• Main file path: appfile name with extention.

• Python Version: choose desired python version for app.

• 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.

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

You can share the App Url to showcase your work.