Building this blog

From barebone Flask page to first deployment

Motivation

As briefly mentioned in my welcome post, I built this blog to experiment with tech that I don't usually get to.

Even though my title is Data Engineer (and Business Intelligence prior to this), there is a large variance in type of work and technology that data engineers might experience. My past work happened to closer to business intelligence tools and data warehouse. This means that majority of my experiences are on tools like Looker, BigQuery, dbt, barring some python scripting and bash scripts used in GitHub Actions for CI/CD.

Now that blog is more or less built, I believe that this experience was a fantastic experience that helped me get exposed to following technologies/Tools:

• Flask : Website backend (+ many ecosystem of packages)
• Bootstrap-Flask : For reasonable frontend with minimum effort
• SQLAlchemy / PostgreSQL : Database
• Heroku : Paid service used to host the website / database

Below are two major references I used in creating this website. I also could not recommend the Mega-Tutorial enough, with its thoroughly explained concepts and git commits serving as checkpoints.

• Flask Tutorial
• The Flask Mega-Tutorial

What really helped me in this process was not only going through the tutorial in almost full, but also doing some follow-up work to build extra capabilities on the side, as suggested at the end of the Flask Tutorial

Flask

My project structure largely follows / mirrors that of one presented in The Flask Mega-Tutorial, with two blueprints (auth and main) managing authentication and main blog functionalities.

/FLASK-PERSONAL-BLOG
├── app
│   ├── auth		# "auth" blueprint folder
│   ├── main		# "main" blueprint folder
│   ├── templates
│   │   ├── auth	# "auth" templates folder
│   │   └── main	# "main" templates folder
│   ├── __init__.py
│   └── *.sql		# various sql scripts to trigger when developing / deploying
├── .flaskenv
├── .gitignore
├── blog.py
├── config.py
├── Procfile		# Triggered during Heroku deployment
└── requirements.txt	# Requirements - Required for Heroku deployment

Main functionalities include:

• auth
  • registration, login, logout
• main
  • Browse all (or subset of) post
  • Read / Write / Edit / Remove post
  • Read / Write / Edit / Remove comment

Flask-SQLAlchemy & Database

Must of the Flask Mega-Tutorial dealt with database component with Flask-SQLAlchemy, which is a Flask extention of popular ORM, SQLAlchemy. It had lots of neat features to abstract your schema elements, which allowed you to easily leverage multiple databases, and author's own extension (Flask-Migrate) allowed for easy migration across changes. It is really seamless to work with items that would be the most complicated to do.

However, I chose to stick with writing raw sql queries for this project because:

1. I was already comfortable with writing one
2. My database schema is and will be simple in nature
3. I found learning ORM less appealing at the time, since I wanted to work on other aspects of the webpage and push this project to completion.

But this means that I had to let go of the benefit of using the migration library (Flask-Migrate) and have to stick with a command which triggers .sql file at hand, which I had to modify from the Flask Tutorial

    def run_sql_file(file):
        ...

    # Define a custom Click command
    @app.cli.command('reset-db')
    def reset_db():
        with app.app_context():
            run_sql_file(file='schema.sql')

    @app.cli.command('sample-data')
    def sample_data():
        with app.app_context():
            run_sql_file(file='sample_data.sql')

    @app.cli.command('migrate-db')
    def migrate_db():
        with app.app_context():
            run_sql_file(file='migrate.sql')

And trigger them as part of the step to deploy in Heroku

Procfile :

web: flask migrate-db; gunicorn blog:app

Bootstrap-Flask

The main objective I had with how the website presented itself was geting to a minimally viable in shortest amount possible. After getting a quick introduction on Bootstrap from the aformentioned Mega Tutorial, I decided to look for the quickest way for me to implement boostrap from the scratch, and the answer was the Bootstrap-Flask.

In the end, I was extremely surprised at how easy it was to implement for a project like mine. It helped me do all of the following in a day or less:

• Grid system for website layout, adjustable based on screen size (ex. phone vs. computer)
• Navigation bar
• Preformatted, consistent style for (font, color, etc.) pages and forms
• Quick access to icons

Heroku

Heroku was an another tool recommended from the aforementioned Mega Tutorial that I ended up using for this project, since it was recommended as the easiest path forward in hosting your website. The main caveat were the hosting cost and database migration if you were developing using SQLite locally, which was a non-issue for me. When deploying using its CLI tool, you simply create your repository as an app in Heroku and treat it as if it is an another origin, deploying when changes to it as needed. (Workflow may differ when you use the container / GitHub integration method).

While I used the Heroku option with the instructions provided, something that I would like to get my hands on is deploying them as containers in one of the major clouds. AWS seem likely since I wanted to get more exposure on that side.

Conclusion

I built this blog to get my hands on with some of the tools I wanted to experiment with and create a place to note my self-learning progress.

Tools like Flask, Boostrap-Flask, Heroku allowed me to build a presentable website like this in matter of days, and I was impressed at how quickly I was able to get it done. If you have a small itch to build something for youself, I would definitely recommend doing a project like this.