Multi-Page Dash Application

Question

I'm trying to build a multi page Dash App. When I run the following code, everything works except it won't route to my /dash_1 or /dash_2 urls. Was wondering if someone could help me out.

My structure looks like this:

dash-project/ app1/ app.py

app2/ app.py

server.py run.py

My run.py code is

from app import server as application
from app import app

import app_1.dash_1
import app_2.dash_2

My app.py code is:

from flask import Flask
from flask_sqlalchemy import SQLAlchemy
from werkzeug.wsgi import DispatcherMiddleware
import os
import pandas as pd
import dash
import flask

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go
from analysis import *

server=flask.Flask(name)
app = dash.Dash(name)
app.config.suppress_callback_exceptions = True

app.css.append_css({
‘external_url’: ‘https://codepen.io/chriddyp/pen/bWLwgP.css’
})

My dash_1.py code is:

import dash 
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output 
import pandas as pd
import plotly.graph_objs as go
from analysis import * 

from app import app, server 

app = dash.Dash(name='dash_1', sharing=True, 
url_base_pathname='/dash_1', csrf_protect=False) 

app.config['suppress_callback_exceptions']=True

df = pd.read_csv('/Users/ds/app_1/main.csv')

layout = html.Div([
dcc.Graph(
    id='Senators ',
    figure={
        'data': [
            go.Scatter(
                x=df[df['candidate'] == i] 
['contributor_individual'],
                y=df[df['candidate_name'] == i]['contributor'],
                #z=df[df['candidate_name'] == i]['contributor'],
                text=df[df['candidate_name'] == i]['contributorl'],
                mode='markers',
                opacity=0.7,
                marker={
                    'size': 15,
                    'line': {'width': 0.5, 'color': 'white'}
                },
                name=i
            ) for i in df.candidate_name.unique()
        ],
        'layout': go.Layout(
            xaxis={'title': 'Contributor '},
            yaxis={'title': 'Contributor '},
            #margin={'l': 40, 'b': 40, 't': 10, 'r': 10},
            #legend={'x': 0, 'y': 1},
            hovermode='closest'
            )
        }
    )
])

layout = html.Div(children=[
html.H1(children='Senators '),

html.Div(children='''
    God Bless.
'''),

dcc.Graph(
    id='main.csv',
    figure={
        'data': [
        {'x':df['candidate'], 'y': df['sectorl'], 'type': 'bar'},
        {'x':df['candidate'], 'y': df['industry'], 'type': 'bar'},
        {'x':df['candidate'], 'y': df['contributor'], 'type': 'bar'},
        ],
        'layout': {
            'title': 'Let Them Eat...'
            }
        }
    )
])

My dash_2.py code is

import dash 
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import pandas as pd 

from app import app, server  

app = dash.Dash(name='dash_2', sharing=True, 
url_base_pathname='/dash_2', csrf_protect=False) 

app.config['suppress_callback_exceptions']=True 

df = pd.read_csv('/Users/ds/app_2/slice.csv')



layout = html.Div(children=[
html.H1(children='Bars'),

html.Div(children='''
    One Bite....
'''),

dcc.Graph(
    id='slice.csv',
    figure={
        'data': [
        {'x':df['Slice'], 'y': df['Score'], 'type': 'bar'},
        ],
        'layout': {
            'title': 'Bars'
            }
        }
    )


])

Any help would be greatly appreciated - I can't seem to wrap my head around this - Thanks!

Answer 1

You need to pass your flask app to your Dash instance. Like this.

app = dash.Dash(__name__, server=server)

So try importing server and include it as a parameter in your Dash instances in app1 and app2. Like so:

from app import server

app = dash.Dash(name='dash_1', sharing=True, 
url_base_pathname='/dash_1', csrf_protect=False, server=server)

app = dash.Dash(name='dash_2', sharing=True, 
url_base_pathname='/dash_2', csrf_protect=False, server=server)  

Hope it helps.