Need help with dash-sample-apps?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

plotly
1.6K Stars 2.0K Forks MIT License 2.7K Commits 27 Opened issues

Description

Open-source demos hosted on Dash Gallery

Services available

!
?

Need anything else?

Contributors list

Dash Sample Apps CircleCI

This monorepo contains open-source apps demoing various capabilities of Dash and integration with the Python or R ecosystem. Most of the apps here are hosted on the Dash Gallery, which runs on the Dash Kubernetes platform and host both open-source apps and demos for Design Kit and Snapshot Engine. Reach out to get a demo of our licensed products.

Running an example app after cloning the repo

You will need to run applications, and specify filenames, from the root directory of the repository. e.g., if the name of the app you want to run is

my_dash_app
and the app filename is
app.py
, you would need to run
python apps/my_dash_app/app.py
from the root of the repository.

Each app has a requirements.txt, install the dependecies in a virtual environment.

Downloading and running a single app

Visit the releases page and download and

unzip
the app you want. Then
cd
into the app directory and install its dependencies in a virtual environment in the following way:
python -m venv venv
source venv/bin/activate  # Windows: \venv\scripts\activate
pip install -r requirements.txt

then run the app:

bash
python app.py

Contributing to the sample apps repo

"DDS app" below refers to the deployed application. For example, if the deployment will eventually be hosted at https://dash-gallery.plotly.host/my-dash-app, "DDS app name" is

my-dash-app
.

Adding a new app

Create an app on Dash Playground. This will be the location of the auto-deployment. To do this, log into the app manager on dash-playground.plotly.host and click "initialize app".

Create a branch from

master
to work on your app, the name is not required to be anything specific. Switch to this branch, then navigate to the
apps/
directory and add a directory for your app.

There are two options when you are naming the folder:

  1. Make the folder have the exact same name as the Dash app name.

  2. (Python apps only) Select any other name, but update the file

    apps_mapping.py
    with the Dash app name and the folder name you have selected.

Navigate to the directory you just created, and write a small README that only contains the name of the app. Stage the README and commit it to your branch.

See project boilerplate!

Notes on adding a new Dash for R app

Contributing an app written with Dash for R is very similar to the steps outlined above.

  1. Make the folder have the exact same name as the Dash app name.

  2. Ensure that the file containing your app code is named

    app.R
    .
  3. The

    Procfile
    should contain
web: R -f /app/app.R
  1. Routing and request pathname prefixes should be set. One approach might be to include
appName 

at the head of your

app.R
file.
  1. run_server()
    should be provided the host and port information explicitly, e.g.

app$run_server(host = "0.0.0.0", port = Sys.getenv('PORT', 8050))

Making changes to an existing app

Create a new branch - of any name - for your code changes. Then, navigate to the directory that has the same name as the DDS app.

When you are finished, make a pull request from your branch to the master branch. Once you have passed your code review, you can merge your PR.

Dash app project structure

Data

  • All data (csv, json, txt, etc) should be in a data folder
  • /apps/{DASH_APP_NAME}/data/

Assets

  • All stylesheets and javascript should be in an assets folder
  • /apps/{DASH_APP_NAME}/assets/

These files will still need to be present within the app folder.

  • Procfile
    gets run at root level for deployment
    • Make sure python working directory is at the app level
    • Ex.
      web: gunicorn app:server
  • requirements.txt
    • Install project dependecies in a virtual environment

Project boilerplate

apps
├── ...
├── {DASH_APP_NAME}         # app project level
│   ├── assets/             # all stylesheets and javascript files
│   ├── data/               # all data (csv, json, txt, etc)
│   ├── app.py              # dash application entry point
│   ├── Procfile            # used for heroku deployment (how to run app)
│   ├── requirements.txt    # project dependecies
│   └── ...                 
└── ...

Handle relative path

Assets should never use a relative path, as this will fail when deployed to Dash Enterprise due to use of subdirectories for serving apps.

Reading from assets and data folder

Python
Img(src="./assets/logo.png") will fail at root level

Tips

import pathlib
import pandas as pd

get relative assets

html.Img(src=app.get_asset_url('logo.png')) # /assets/logo.png

get relative data

DATA_PATH = pathlib.Path(file).parent.joinpath("data") # /data df = pd.read_csv(DATA_PATH.joinpath("sample-data.csv")) # /data/sample-data.csv

with open(DATA_PATH.joinpath("sample-data.csv")) as f: # /data/sample-data.csv some_string = f.read()

Developer Guide

Creating a new project

# branch off master
git checkout -b "{YOUR_CUSTOM_BRANCH}"

create a new folder in apps/

mkdir /apps/{DASH_APP_NAME}

push new branch

git push -u origin {YOUR_CUSTOM_BRANCH}

Before committing

# make sure your code is linted (we use black)
black . --exclude=venv/ --check

if black is not installed

pip install black

App is ready to go!

# once your branch is ready, make a PR into master!

PR has two checkers.

  1. make sure your code passed the black linter
  2. make sure your project is deployed on dns playground

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.