GatorLF Part 2: Flask and Bootstrap setup

Let’s get a Hello World application up and running. We will create a package called app by creating a directory called app.

mkdir app

Inside the app directory, we need an __init__.py file. This file tells python that the app directory is a package, and it is the starting point when the module is imported.

Our app file needs to import Flask and create an instance of a Flask application.

from flask import Flask
app = Flask(__name__)
from app import routes

We need to create the routes module referenced above. In Flask, the routes file defines what your application should do when it receives a request tied to a certain URL. Let’s import the app module from the app package (This is confusing, but one is an instance of the class Flask and the other is the name of our package) and define index routes.

from app import app
@app.route('/')
@app.route('/index')
def index():
    return "Hello World"

We also need to create a main.py file

from app import app 

and let Flask know that’s where our application is located by setting the FLASK_APP environment variable.

set FLASK_APP = main.py

We should be able to spin up a local development server and get a working web application (although it will only return a simple “Hello World” string). By default, Flask serves your application at 127.0.0.1:5000. Let’s give it a shot.

flask run
> Serving Flask app "main.py"
> Debug mode: off
> Running on http://127.0.0.1:5000/ (Press CTRL+C to quit) 

Navigating to this URL in your web browser gives us our Hello World application.

Adding functionality to the site

We are on the right track, but a website that just returns a string really isn’t very useful and won’t get me hired. Let’s add some styling and the actual content. Since I’m not a designer, I will cheat and use BootStrap. If you don’t know BootStrap, it’s an awesome tool for developing websites that beautiful and responsive with no design skill. Even worse than using BootStrap, I will hijack a free BootStrap theme called Shop HomePage from Start Bootstrap to make life even easier (aren’t all the best engineers at least a bit lazy?).

To get this working on our website, we need to create a folder called templates. Templates are Flasks’ V in the MVC web-development model. Templates allow us to serve dynamic web content that wouldn’t be possible with HTML alone. Flask uses Jinja2 as its template engine by default. We will talk about templating in more detail later.

Let’s make a new folder for our templates.

mkdir app/templates

And drop in the HTML files from the Shop Homepage theme we downloaded. Great, but we still need somewhere to add our CSS files. We could just drop that in templates right next to the index.html file, but let’s put it in Flask’s static folder. The static folder is reserved for files (often CSS/JS and images) that don’t change. Flask will instruct the client to cache these files for better performance.

mkdir app/static
mkdir app/static/css
mkdir app/static/js
mkdir app/static/images

I’ll drop in the only static files we have, main.css, from Start BootStrap and the actual BootStrap files themselves. Instead of hard-coding the location of the CSS file, I will take advantage of Flask’s templating features.

All that’s required is changing lines like:

<link href="css/main.css" rel="stylesheet"> 

to this:

<link href="{{url_for('static', filename="css/main.css"}}" rel="stylesheet">

The double curly brackets indicate that we want Flask to evaluate this statement prior to serving our web page. This is a good practice and will dynamically generate paths for all our static files.

We need to make one minor change to our routes.py file. Currently, the index route just returns a Hello World string. We need to update it to use the Flask function render_template to return our nicely styled template.

from app import app
from flask import render_template
@app.route('/')
@app.route('/index')
def index():
    return render_template('index.html')

Okay, finally we can look at how the application looks now!

Okay, that’s enough for now. In the next part of the series, we will build a database for storing our application’s data.