Make a dash-ing project — 1

Aditya Badola
3 min readMar 11, 2021

A small tutorial on building a useful webapp with Dash in python.

Dash is ideal for building data visualization apps with highly custom user interfaces in pure Python. I will demonstrate a few simple procedures to help you develop a deployable app with dash.

Github: https://github.com/AdiBad/dashing_project/blob/main/simple.py

The simplest app

With only a dozen lines of code, it is possible to make a webpage that is guarded by authentication. We begin by importing the following libraries:

#FOR APP
import dash_bootstrap_components as dbc
import dash_html_components as html

These packages contain basic components that dash uses like lego pieces to build an HTML page. If you are familiar with HTML syntax, you can easily write your own content in the later stages.

Next we import the authentication library

#FOR AUTH
import dash_auth

We can provide the username & password as a dictionary object to a variable.

# Password protection
VALID_USERNAME_PASSWORD = {
‘eater’: ‘apples’
}

The app itself is going to be described in two stages. First, we provide it access to an external stylesheet for the HTML to appear nicely. We provide the authentication using the following code

# Define app itself
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
auth = dash_auth.BasicAuth(
app,
VALID_USERNAME_PASSWORD
)

The second stage is giving the webpage itself some layout. I am only creating a basic div component in html that contains the word “Success!”

# Set app layout
app.layout = html.Div(“Success!”)

The app is finally linked in the main function using run_server as follows

# run app
if __name__ == ‘__main__’:
app.run_server(debug=True,port=8051)

Note, you can change the value of port to any other number as well. This is useful in case you want to open multiple dash servers. The debug option is set to True so that any changes made to the source code (once saved) can immediately reflect on the app; we won’t need to rerun the code everytime we make a change.

The code should look like this:

I have saved my file as simple.py so to run it on the Anaconda/cmd prompt, just write “python simple.py”

The prompt should show the following output:

Copy the given http link and paste it on any internet browser. The screen should display the authentication, as well as the success message once the user’s input is accepted.

I will discuss how to create callbacks using other dbc & dcc components in the next blog (https://adibad.medium.com/make-a-dash-ing-project-2-544cd373d1a)

--

--

Aditya Badola

Data analytics enthusiast. Bioinformatics. Creative Writing. Photography. Black Mirror.