Creating a Python Web Application using Python Flask: Part 2 Adding a home page

Building off of where we left at in part 1 we created a simple page that served a simple string from the view code itself. Now let’s make this Python Flask code look a little more like a web application and be sure to follow me if you want to updated on when the next post is released.

To start off lets add an index.html inside of the templates folder and give it the following content:

<!-- HTML 5 doctype -->
<!DOCTYPE html>
<html>
  <head>
    <title>Hello Flask app</title>
    <link type="text/css" rel="stylesheet" href="/static/css/theme.css"/>
  </head>
  <body>
      <h1>Hello from Python Flask</h1>
  </body>
</html>

This should give us a page that will link to a static sheet. Lets add some folders to static so we can begin to build up the webpage.

static/css
static/css/theme.css
static/images
static/js

Inside of our theme.css lets add a simple background color change on the body to see that Flask is indeed serving our static assets

body{
  background: lightgray;
}

Now that we have some fancy static assets and html page sitting in the templates folder let’s wire up flask to serve our home page. To do this we will go back to the views.py file and update it to be as below.

from app import app
from flask import render_template

# Decorate the index function with the flask route method
# These methods will be executed when the browser goes to the respective 
# routes

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

What this does is it tells flask to use the built in render_template function when people visit the / or /index routes to give back the web page we just made in templates/index.html. Under the hood render template uses the Jinja template engine to interpret our html and serve it back to the user with custom data substitutions and the ability to import templates into templates for more powerful inheritance and routing.

Apple AirPods with Charging Case (Latest Model)
Please help support this site by purchasing items after clicking through our Amazon links

At this point we can either keep going with Jinja or use it along site ReactJS, Angular4+, or any of the other plethora of javascript libraries out there to do client side UI building vs relying on Jinja’s server side interpretting. This is a design trade-off that comes up frequently in coding and honestly there isn’t one clear cut right answer over another. They are just tools for various jobs that may make more sense for one user experience but not as much for the other. In this tutorial I will help get you started with several of these options in future parts.

Back to our page now we can “python run.py” our server and you can see we are getting the title and content from our index.html as well as the background from our style sheet. The page still looks like it was made by a third grader but we are getting closer to doing something cool at least.

As an exercise in Jinja2’s templating and a little more about Python routes lets add another page with a conditional statement.

@app.route('/hello/')
@app.route('/hello/<user>')
def helloDynamic(user=None):
return render_template('hello.html', user=user)

What we are doing is adding a new hello route enabling us to type http://127.0.0.1:5000/hello/ or http://127.0.0.1:5000/hello/yourname into the browser. Flask will determine if the optional user was provided and flask will do it’s fancy magic before serving the page back to the client. To get this to work we will need to make a new template for hello.html with the jinja code to do this. Lets add the following code into templates/hello.html

<!-- HTML 5 doctype -->
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>Hello dynamic</title>
<linkrel="stylesheet"type="text/css"href="/static/css/theme.css">
</head>
<body>
{% if user %}
<h1>Hello {{ user }}!</h1>
{% else %}
<h1>Hello, World!</h1>
{% endif %}
</body>

As you can see there are some new tags here we haven’t seen using the curly brackets. These will be interpreted by Jinja to substitute variables that are rendered with the page and will determine the existence of the user variable to display one html tag or another. This type of substitution is also common with many javascript libraries to do databinding between your controller code and your UIs. Thanks for stopping by and hope to see you next time, if you like the content please help me out by sharing and enabling me to continue bringing more technical content!