Using Jupyter Notebooks to Run Dash Apps

Running Dash apps on Jupyter

With a change to imports and a minor change to app instantiation, we can easily start to run our apps within Jupyter Notebook environments. The package that makes this possible is jupyter_dash. Essentially, the difference is that we import the JupyterDash object (instead of importing Dash), and app instantiation occurs by calling this object, as follows:

from jupyter_dash import JupyterDash
app = JupyterDash(__name__)

One of the advantages of running apps in a notebook environment is that it is less tedious to make small changes, iterate them, and see results. Working with an integrated development environment (IDE), the command line, and the browser, we need to constantly shift between them, while in a notebook environment, everything is in one place. This makes introducing simple changes and testing them easier. It can make our notebooks far more powerful and interesting as well.

The jupyter_dash package also provides an additional option while running the app in which we can determine whether we want to run the app in one of these three modes:

• external: In a separate browser window, exactly as we have done so far.
• inline: In the code output area of the notebook, right underneath the code cell.
• jupyterlab: In a separate tab while/if running in JupyterLab.

We can also set our desired width and height if we wish to. Running the app takes additional optional parameters, as follows:

app.run_server(mode='inline', height=600, width='80%')

As we can see, setting the height and width can be done either by specifying an integer—that is the number of pixels—or for width, a percentage of the screen size as a string. Still, there is another important benefit of running apps in a Jupyter Notebook environment, other than keeping the code and narrative in one place.

Isolating functionality for better management and debugging

When running and developing apps, we inevitably come across bugs and issues. In order to handle them, we need to isolate the cause and create the simplest reproducible example that causes the bug to happen. Only then can we properly troubleshoot the problem. And only then can we ask others for help. We won’t wait for bugs to happen to isolate issues and figure them out. Instead, we can preemptively isolate all new features before incorporating them so that we can handle and manage them better.

From now on, introducing new features can be done by, first, creating them in an isolated environment in which we create a minimal app containing only this functionality. Once we’re comfortable that we understand how it works and that it functions as expected, we’ll keep a copy for reference and see how to incorporate it into the existing app. This will also help us if we want to make changes to that specific functionality in the future, in which case we go through the same process again.

Let’s start with our first example, which will be a drop-down menu with three values. The user selects one, and right underneath it, they see a message showing the value they chose. The illustration below shows an example of what this might look like in its simplest form: