Getting started with Dash

---

Overview

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

In this tutorial you will:

• configure a Domino environment with the necessary dependencies to publish a Dash App
• create a project and set it up for App publishing
• publish an App to the Domino launchpad
• observe how other users in Domino can use the App

You’ll be working with the second example from Basic Dash Callbacks, part of the Dash User Guide. In this example, the application serves an interactive scatter plot of countries by GDP per capita and life expectancy.

It will take approximately 15 minutes to get this example running in Domino.

---

Set up environment

The first step is to create a Domino compute environment capable of running your App.

1. From the Lab, click Environments.

2. From the Environments Overview, click Create Environment.

3. Give your environment a descriptive name and description, and select Domino Analytics Distribution Py3.6 R3.4 from the Environment dropdown under Base Image. This selection means that the setup instructions we provide for this environment will be applied on top of a base image with Python 3.6 and some analytics modules already installed. Read Domino standard environments to learn more about the contents of this base image.

4. Click Create Environment when finished.

5. You will be directed to the Overview tab for your new environment. Click Edit Dockerfile.

6. In the Dockerfile Instructions field, paste in the following instructions:

   # Install the libraries we want to use in our app
   RUN pip install dash==0.22.0 && \
       pip install dash-renderer==0.13.0  && \
       pip install dash-html-components==0.11.0  && \
       pip install dash-core-components==0.26.0  && \
       pip install plotly --upgrade
   

7. Click Build when finished.

You will be directed to the Revisions tab for your environment. Here you’ll be able to monitor the build process for your new version of the environment. If the build succeeds, you’re ready to use this environment for App publishing.

---

Set up project

The next step is creating a project with the settings and content you need to publish your App.

1. From the Lab, click Projects.

2. Click New Project.

3. Give your project an informative name, then click Create Project.

4. Click Settings in the project sidebar, then set the Compute environment to the one you created in the previous step.

5. Click Files in the project sidebar, then click Add File.

6. Name the file app.py in the title field above the editor.

7. In the body of the file, paste the following example App 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')
   
   app = dash.Dash()
   
   # Configure Dash to recognize the URL of the container
   user = os.environ.get("DOMINO_PROJECT_OWNER")
   project = os.environ.get("DOMINO_PROJECT_NAME")
   runid = os.environ.get("DOMINO_RUN_ID")
   runurl = '/' + user + '/' + project + '/r/notebookSession/'+ runid + '/'
   
   app.config.update({
   'routes_pathname_prefix': runurl,
   'requests_pathname_prefix': runurl
   })
   
   # 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(port=8888, host='0.0.0.0', debug=True)
   

   Make note of the code block after app = dash.Dash(). When serving a Dash application from Domino, you must configure Dash to serve from a relative path, instead of the default root path. This configuration is different in different Dash versions, but this code snippet has been tested for Dash versions 0.22 and higher. If you need to support an older version of Dash, please contact Domino support.

8. Make note of two important variables in the final line of the file. Domino-hosted applications must run on a host of 0.0.0.0 and listen on port 8888. These are the settings Domino will expect when directing users to your App.

9. Click Save when finished.

10. The last thing to do before publishing your App is to create an app.sh file. This is a Bash script that Domino runs after initializing the host that will serve your App. It should contain all commands required to launch your App. In this example, the only command you need is python app.py. Create this file the same way you did for app.py, then save it.

---

Publish

 Now you’re ready to publish your App.

1. Click Publish from the project sidebar.
2. Give your App an informative title and description, and set Permissions to Anyone can access. This will allow anyone with a network connection to your Domino deployment to access the App if they have the URL.
3. Click Publish.
4. Once the App status says Running, click View App to load your App. You should see the interactive scatterplot with a Domino toolbar above it showing the project it’s published from, plus buttons to email the App owner and open the description panel.

---

Share and consume

Now that your App is published, if you set the permissions to Anyone can access, you can now easily share it with colleagues who have access to your instance of Domino. You can try this out yourself by opening a private or incognito browser, or logging out of Domino, and navigating to the App URL.