Building a flask web app

I wanted to create a flask web app so I could record my workouts there was a few requirements I wanted to satisfy: Be able to create workouts with sets and exercises, save data to an online database, Host it to workout.willotty.com.

I had no prior knowledge of flask, hosting dynamic web apps or online database management so there was a huge knowledge gap. Step one was understanding what tools I would need to use to get the job done. I settled on using Flask and python (obviously) as well as firebase for the database side of things. I had used firebase hosting before to launch a static website (The very website you are reading at the moment).The first part of the project was to attempt a hello 👋 world 🌎 with flask and host it locally. Luckily, 🍀 this was quite easy as flask allows for quick configuration to host locally.

from flask import Flask

    app = Flask(__name__)
                    
    @app.route('/')
    def index():
        return 'Web App with Python Flask!'
                    
app.run(host='0.0.0.0', port=8000)

The next step was to play ▶️ around with different (preferrably free) services that allow me to deploy webapps to the cloud ☁️ and different BaaS (Backend as a service) options. I settled on cloud run and firebase real-time database as they are both gcloud offerings with very generous free tiers. Little did I know at the time ⏰️ this would not match my requirements. As although it satisfies requirements 1 and 2. It is impossible to host to a custom domain for free 💰. Instead I opted to host the middle layer on Heroku and use firebase real-time database as the project's BaaS.

Below is the python code used to host the app. Note that if deploying the app yourself, the secret key should be set to a unique string instead of app.secret_key = "YOUR_SECRET_KEY".

Next, the HTML code should be set up. Start off with the header (base.html) which will be used at the top of all pages. Note line 29 {% if session['id'] is defined %} which changes the login and register button to logout when logged in.

Next, the template jinja2 html files will need to be built for each route specified. I will include only one example here of how it works but the full code can be found here.