├── .gitignore ├── README.md ├── backend.py ├── dash_app.py ├── frontend.py ├── main.py └── requirements.txt /.gitignore: -------------------------------------------------------------------------------- 1 | __pycache__ 2 | venv 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # dash-with-flask 2 | Simple example of integrating [Dash](https://plot.ly/products/dash/) into the flask framework. 3 | 4 | This is a demonstration on how to get [Dash](https://plot.ly/products/dash/) working inside of a flask framework. Dash is a fantastic library for those that want to create dashboard interfaces while still staying within the python domain language. 5 | 6 | I created this because I myself had trouble figuring out this setup given the documentation out there. From the plotly forums to the documentation for werkzeug, flask and dash, none had a complete living example that tied it all together. *Although, some were quite helpful in helping me get there* 7 | 8 | ## Instructions: 9 | 10 | `git clone https://github.com/mbkupfer/dash-with-flask.git` 11 | 12 | `cd dash-with-flask.git` 13 | 14 | `python3 -m venv venv` 15 | 16 | On Windows: 17 | 18 | `py -3 -m venv venv` 19 | 20 | **Activate the environment** 21 | 22 | `. venv/bin/activate` 23 | 24 | On Windows: 25 | 26 | `venv\Scripts\activate` 27 | 28 | You know your virtual environment is active when you see the `(venv)` at the beginning of the CLI line. 29 | 30 | `(venv) C:\Users\user\path_to\dash-with-flask>` 31 | 32 | **Install requirements** 33 | 34 | `pip install -r requirements.txt` 35 | 36 | **Run code** 37 | 38 | `python main.py` 39 | 40 | This should launch the application on your localhost as such: 41 | 42 | ``` 43 | * Restarting with stat 44 | * Running on http://localhost:5000/ (Press CTRL+C to quit) 45 | 127.0.0.1 - - [06/Aug/2018 13:40:23] "GET / HTTP/1.1" 200 - 46 | ``` 47 | 48 | Navigating to http://localhost:5000/my-app will launch the dash application. 49 | 50 | ## Future: 51 | This is part of a larger project in which I'm trying to learn about web app development. I'm planning on refining this repository with new branches to showcase other web app architectures that incorporate dash. 52 | -------------------------------------------------------------------------------- /backend.py: -------------------------------------------------------------------------------- 1 | from flask import Flask 2 | from werkzeug.serving import run_simple 3 | 4 | app = Flask(__name__) 5 | app.debug = True 6 | 7 | @app.route('/') 8 | def back_end(): 9 | return 'back_end' 10 | 11 | -------------------------------------------------------------------------------- /dash_app.py: -------------------------------------------------------------------------------- 1 | from flask import Flask 2 | import dash 3 | import dash_core_components as dcc 4 | import dash_html_components as html 5 | 6 | server = Flask(__name__) 7 | app = dash.Dash(__name__, server = server) 8 | app.config.requests_pathname_prefix = '' 9 | 10 | app.layout = html.Div([ 11 | html.H1('Dash application'), 12 | dcc.Graph( 13 | id='basic-graph', 14 | figure={ 15 | 'data':[ 16 | { 17 | 'x': [0, 1], 18 | 'y': [0, 1], 19 | 'type': 'line' 20 | } 21 | ], 22 | 'layout': { 23 | 'title': 'Basic Graph' 24 | } 25 | } 26 | ) 27 | ]) 28 | 29 | @server.route('/') 30 | def myDashApp(): 31 | return app 32 | 33 | if __name__ == '__main__': 34 | app.run_server(debug=True, port=8050) 35 | -------------------------------------------------------------------------------- /frontend.py: -------------------------------------------------------------------------------- 1 | from flask import Flask 2 | from werkzeug.serving import run_simple 3 | 4 | app = Flask(__name__) 5 | app.debug = True 6 | 7 | @app.route('/') 8 | def front_end(): 9 | return 'front_end' 10 | 11 | -------------------------------------------------------------------------------- /main.py: -------------------------------------------------------------------------------- 1 | from werkzeug.wsgi import DispatcherMiddleware 2 | from werkzeug.serving import run_simple 3 | from frontend import app as frontend 4 | from backend import app as backend 5 | from dash_app import app as dash_app 6 | 7 | application = DispatcherMiddleware(frontend, { 8 | '/backend': backend, 9 | '/my-app' : dash_app.server 10 | }) 11 | 12 | if __name__ == '__main__': 13 | run_simple( 14 | hostname='localhost', 15 | port = 5000, 16 | application = application, 17 | use_reloader=True) 18 | -------------------------------------------------------------------------------- /requirements.txt: -------------------------------------------------------------------------------- 1 | certifi==2018.4.16 2 | chardet==3.0.4 3 | click==6.7 4 | dash==0.23.1 5 | dash-core-components==0.26.0 6 | dash-html-components==0.11.0 7 | dash-renderer==0.13.0 8 | decorator==4.3.0 9 | Flask==1.0.2 10 | Flask-Compress==1.4.0 11 | idna==2.7 12 | ipython-genutils==0.2.0 13 | itsdangerous==0.24 14 | Jinja2==2.10 15 | jsonschema==2.6.0 16 | jupyter-core==4.4.0 17 | MarkupSafe==1.0 18 | nbformat==4.4.0 19 | plotly==3.1.0 20 | pytz==2018.5 21 | requests==2.19.1 22 | retrying==1.3.3 23 | six==1.11.0 24 | traitlets==4.3.2 25 | urllib3==1.23 26 | Werkzeug==0.14.1 27 | --------------------------------------------------------------------------------