Flask Development Part 2: Rendering Templates
This is Part 2 of a series of articles that will walk you through the basics of Flask Web Development by developing and hosting a simple CRUD application.
This series is split into 6 parts:
- A simple Hello World app
- Rendering HTML templates.
- Building a scaleable file structure.
- Configuring a database.
- Handling user login and registration.
- Adding CRUD (Create, Read, Update, Delete) functionality.
Part 2: Rendering HTML Templates
In the last post we learnt to run a Flask App and use it to show “Hello, world!” in our browser using this code.
from flask import Flask
app = Flask(__name__)@app.route('/')
@app.route('/index')
def hello_world():
return 'Hello, World!'if __name__ == '__main__': app.run(host="localhost", port=8000)
In this post we will use the Flask function render_template to load a HTML file in our browser instead of the simple message.
First, we will update the imports to include render_template:
from flask import Flask, render_template
app = Flask(__name__)@app.route('/')
@app.route('/index')
def hello_world():
return 'Hello, World!'if __name__ == '__main__': app.run(host="localhost", port=8000)
Second, we will update our route function:
from flask import Flask, render_template
app = Flask(__name__)@app.route('/')
@app.route('/index')
def hello_world():
return render_template('index.html') if __name__ == '__main__': app.run(host="localhost", port=8000)
Now our route will load a HTML file named “index” within your “templates” folder. Many more arguments can be passed into the render_template() function and we will be adding more throughout this series as they are needed. For more information check this out: https://www.tutorialspoint.com/flask/flask_templates.htm
Now that we need multiple files we need to update our file structure.
First, add a folder called ‘templates’. This is a directory name recognized by Flask so it is important to use exactly this name.
Next, inside this folder add a file named index.html. This can be called whatever you want but it will be easier to follow along with this series if you stick with my naming conventions.
In our index.html file we will start building the HTML we want to show in the browser. For now let’s stick to a basic hello world message.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>Hello, World (But with HTML)!</p>
</body>
</html>Now run your app.py file and go back to your browser and go to http://localhost:8000/.
Now you should see a slightly different message appearing in the browser.
The source code for this part can be found at my GitHub here:
In my next post we will take a break from coding and take a look at how to make a scalable file structure.
