Basic Navigation Links on Top for Multi-Page Apps

Dash Python
1

I’ve created a dash app and deployed it to Ubuntu instance, and would like to have links to other Dash Apps along the top. Each of these Apps I’d like to be distinct, just simply need links along the top to find them on the server.

I following this tutorial https://dash.plot.ly/urls from Dash exactly when testing on my local host, I’m looking at the section “Dynamically Create a Layout for Multi-Page App Validation”. When I go through and create the files per the tutorial called app.py, index.py, app1.py, and app2.py, I received a 404.

#app.py
import dash

external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]

app = dash.Dash(name, external_stylesheets=external_stylesheets)
server = app.server
app.config.suppress_callback_exceptions = True

index.py

import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
from app import app
from apps import app1, app2

app.layout = html.Div([
dcc.Location(id=‘url’, refresh=False),
html.Div(id=‘page-content’)
])

@app.callback(Output(‘page-content’, ‘children’),
[Input(‘url’, ‘pathname’)])
def display_page(pathname):
print(‘pathname’, pathname)
if pathname == ‘/apps/app1’:
return app1.layout
elif pathname == ‘/apps/app2’:
return app2.layout
else:
return ‘404’

if name == ‘main’:
app.run_server(debug=True)

app1.py

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

layout = html.Div([
html.H3(‘App 1’),
dcc.Dropdown(
id=‘app-1-dropdown’,
options=[
{‘label’: ‘App 1 - {}’.format(i), ‘value’: i} for i in [
‘NYC’, ‘MTL’, ‘LA’
]
]
),
html.Div(id=‘app-1-display-value’),
dcc.Link(‘Go to App 2’, href=’/apps/app2’)
])

@app.callback(
Output(‘app-1-display-value’, ‘children’),
[Input(‘app-1-dropdown’, ‘value’)])
def display_value(value):
return ‘You have selected “{}”’.format(value)

I would love it if somewhere had an simple solution to this, seems silly to have another instance for each Dash app. Thank you!

2

Did you have trouble running this?

3

Yes, I use that code verbatim as well, and still get the 404.

4

I was able to use your code and get multi-page working locally! Next challenge is on my Flask server, you have this code in your app.py:

@app.server.route(’/static/path:path’)
def static_file(path):
static_folder = os.path.join(os.getcwd(), ‘static’)
return send_from_directory(static_folder, path)

Where is this called and is the path:path suppose to be specified somewhere? thanks