Getting started with a simple Dash App - Part 1/2

Plotly Dash Enterprise is a great platform to design your custom applications to suite any kind of technical problems. Based on python, it also offers all the standard features of the python with simplicity and ease of use. Capabilities to use and integrate any other python libraries seamlessly takes it beyond any of the BI tools available in the market. This article will help you to understand how to start working with Dash apps from scratch. So, let's get started. (If you do not have Dash installed on your system, you may install it using command: pip install dash)

Let's understand the building blocks of a simple Dash app using below diagram.

Import Dependancies: 

To import required libraries

Initialization: 

To Initialize the Dash app (This one is standard for all apps)

Define Layout: 

Here we define the layout using Dash provided html components, so you don't have to write the html code from scratch. Dash will generate backend html from the simple layout defined by you using Dash components.

Run: 

It's time to run ! Not from here, but to run the code 😜. This one is also standard for all the Dash apps, though you can customize it as per need.

Enough of discussion ! Let's have a look at code for our first app.

Open a blank folder in your VS Code editor

Create a file named index.py. Now, here we will start with addition of the building blocks that we discussed above along with code.

Let's understand the code in detail.

First, we will import the dependent libraries - Dash and html which are required for this app.

# import dependancies

from dash import Dash, html

Now, create the app object so that we are initializing our app creation

# initialization

app = Dash(__name__)

To define app layout, we just need to add the 'children' details within the html.Div component. You can also build the hierarchy of children, but let'e keep it simple as of now. So, we define app.layout here which will be converted by Dash internally to pure html layout. We don't have to worry about all the html syntax etc..

# define layout

app.layout = html.Div('Hello World')

Let's run the code. This will be almost common for all the apps, unless you want to explicitly customize it.

# run

if __name__ == '__main__':

    app.run_server(debug=True)

You can see the output in your browser window by using url 'http://127.0.0.1:8050/' as indicated in the screenshot above.

Great ! Your first app is ready.

Well, this is good enough to start when you are new to Dash, but it has lot of potential to suite your customized need of technical solutions. Stay tuned for some more articles on interactive apps creation. I hope you like this one and try to get some hand on. So, best of luck !!!