✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

How do I make a multi-page Dash app active/live on an Apache2 server on Ubuntu

I am running the example Dash dashboard on a google cloud. This runs fine and I can view it on the internet under my url.

Seperately, I also have two reasonably involved Dashboard apps located in the same directory that are linked using the first example under “Structuring a Multi-Page App” at https://dash.plot.ly/urls. This runs when I call python3.7 index.py locally on the server and I can view both apps in this structure in the server’s web browser using vnc.

I am using ubuntu 18.04, apache2, mod-wsgi.

My question is, how do I switch my website from reading __init__.py in the standard example to running index.py in the Multi-Page App? In other words, how do I launch the live server with index.py and get the multi app up and running?

There is no other website, just the apps I want to load.

Here are the relevant files and directory structures.

root@nmtech:/etc/apache2/sites-available# nano FlaskApp.conf

<VirtualHost *:80>
                ServerName neilmurphy.tech
                ServerAlias www.neilmurphy.tech localhost

                ServerAdmin neil@neilmurphy.tech
                DocumentRoot /var/www/FlaskApp/FlaskApp

                WSGIScriptAlias / /var/www/FlaskApp/FlaskApp.wsgi
                <Directory /var/www/FlaskApp/FlaskApp/>
                        Order allow,deny
                        Allow from all
                </Directory>
                ErrorLog ${APACHE_LOG_DIR}/FlaskApp-error.log
                LogLevel warn
                CustomLog ${APACHE_LOG_DIR}/FlaskApp-access.log combined
</VirtualHost>

root@nmtech:/var/www/FlaskApp# nano FlaskApp.wsgi

#!/usr/bin/python3.6
import sys
import logging

logging.basicConfig(stream=sys.stderr)
sys.path.insert(0,"/var/www/FlaskApp/")

from FlaskApp import server as application

(the following works on my website addy no problem)
root@nmtech:/var/www/FlaskApp/FlaskApp# nano __init__.py

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div(children=[
    html.H1(children='Dash Tutorials'),
    dcc.Graph(
        id='example',
        figure={
            'data': [
                {'x': [1, 2, 3, 4, 5], 'y': [9, 6, 2, 1, 5], 'type': 'line', 'name': 'Boats'},
                {'x': [1, 2, 3, 4, 5], 'y': [8, 7, 2, 7, 3], 'type': 'bar', 'name': 'Cars'},
            ],
            'layout': {
                'title': 'Basic Dash Example'
            }
        }
    )
])

server = app.server

if __name__ == '__main__':
    app.run_server(debug=True)

(This is from my multi-page app)
root@nmtech:/var/www/FlaskApp/FlaskApp# nano app.py

import dash

# Set up CSS Stylesheet.
external_stylesheets = [
    "https://codepen.io/rmarren1/pen/mLqGRg.css",
    "https://codepen.io/chriddyp/pen/bWLwgP.css",
]

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

root@nmtech:/var/www/FlaskApp/FlaskApp# nano 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 app_psar, app_factor


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):
    if pathname == "/":
        return app_psar.layout
    elif pathname == "/factor":
        return app_factor.layout
    else:
        return "404"

# server = app.server

if __name__ == "__main__":
    app.run_server(debug=True)

Tree structure under /var/www/:

├── FlaskApp
│ ├── FlaskApp
│ │ ├── init.py
│ │ ├── app.py
│ │ ├── apps
│ │ │ ├── init.py
│ │ │ ├── app_factor.py
│ │ │ ├── app_psar.py
│ │ │ ├── data
│ │ │ │ └── DashData.db
│ │ │ ├── psar.py
│ │ │ └── update.py
│ │ ├── index.py
│ │ ├── requirements.txt
│ └── FlaskApp.wsgi
└── html
└── index.html