Workflow and templates follow for a small, routed, multi-page flask app - for MacOS / Linux based systems only.

First of all we need to set up the folder structure ready to host the project, setup and activate the python virtual environment, and install flask.

mkdir flask_demo
cd flask_demo
python -m venv venv
source venv/bin/activate
pip install flask
-m pip install --upgrade pip
pip list

Package            		Version
-------------------------------------
click				8.1.3
Flask 				2.2.3
importlib-metadata  		6.0.0
itsdangerous             	2.1.2
Jinja2                         	3.1.2
MarkupSafe              	2.1.2
pip                            	23.0.1
setuptools               	49.2.1
Werkzeug                  	2.2.3
zipp                           	3.15.0

Next we create the main program file in the root folder - in this case I have called it demo.py.

touch demo.py

demo.py

demo.py is a very simple file that imports app from the program folder.

from program import app

Next we create the program subfolder, and create two files within it. __ init __.py and routes.py.

mkdir program
cd program
touch __init__.py
touch routes.py

__ init __.py

__ init __.py is the main application. Here we import Flask, assigns itself within Flask to the app variable we called into the main program, and also imports routes.py

from flask import Flask

app = Flask(__name__)

from program import routes

routes.py

routes.py starts off by identifying the routes or addresses within the application.

routes.py also imports the render_template module und uses it to render any html templates that have been stipulated against each route, rather than stipulating output directly here.

from program import app
from flask import render_template

@app.route('/')
@app.route('/index')

def index():
	return render_template('index.html')

@app.route('/about')
def about():
	return render_template('about.html')

@app.route('/occupancy_calculator')
def work():
	return render_template('occupancy_calculator.html')

Finally we create a templates subdirectory within the program folder, and we create our template files within it.

mkdir templates
cd templates
touch base.html
touch index.html

base.html

We create base.html - we sets out the main html page structure that the app will use. Note the jinja templating inside the curly brackets, calling in the content of linked templates.

<html>
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- load MUI -->
      <link href="//cdn.muicss.com/mui-0.9.39/css/mui.min.css" rel="stylesheet" type="text/css" />
      <script src="//cdn.muicss.com/mui-0.9.39/js/mui.min.js"></script>
    </head>
    <body>
        <div class="mui-panel">Menu Bar - 
            <button class="mui-btn mui-btn--raised"><a href="/index">Home</a></button>
            <button class="mui-btn mui-btn--raised"><a href="/100Days">100 Days</a></button>
        </div>
        <hr>
        {% block content %}{% endblock %}
    </body>
</html>

index.html

Then we create all of the other page templates - note the jinja templating again, first declaring the extension of the base template, declaring the block content, and then defining the content.

{% extends "base.html" %}

{% block content%}
		<h1>Hello!</h1>
		<p>This is the text we've included in our HTML files</p>

{% endblock%}

Finally, we return to the route folder, and run flask.

cd ..
cd ..
flask run

One extra thing that we can do is to install the python-dotenv, defining the app within the environment to speed up each launch.

pip install python-dotenv
touch .flaskenv
env | grep FLASK_APP
flask run