GatorLF Part 2: Hello World

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

mkdir app

Inside the app directory, we need an __init__.py file. This tells python that the app directory is a package and gives it a starting point when the package 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 kind of 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

At this point, 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.

Our very simple Hello World web 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 certainly won’t get me hired. Let’s add some styling and the actual content. Since I’m not a designer, I’m going to 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 whatsoever. Even worse than using BootStrap, I’m going to 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?).

We will retrofit this Start Bootstrap theme to fit our needs later on.

To get this working on our website, we need to create a folder called templates. Templates are the 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 it’s 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 file so that styling is included. 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 right now, main.css from Start BootStrap and the actual BootStrap files themselves. The theme assumes that the CSS file for the template is located at a path relative to the index.html file of css/main.css. We need to update that. Instead of hard-coding the location of the CSS file, I’m going to 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 small change to our routes.py file. Currently, the index route just returns a Hello World string. We need to update it to utilize 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 take a look at how the application looks now!

Better than a HelloWorld string!

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

Leave a Reply