Flask Development Part 2: Rendering Templates

Shawn Hymers
Apr 3 · 3 min read

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:

  1. A simple Hello World app

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.

Analytics Vidhya

Analytics Vidhya is a community of Analytics and Data…

Sign up for Analytics Vidhya News Bytes

By Analytics Vidhya

Latest news from Analytics Vidhya on our Hackathons and some of our best articles! Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Shawn Hymers

Written by

Analytics Vidhya

Analytics Vidhya is a community of Analytics and Data Science professionals. We are building the next-gen data science ecosystem https://www.analyticsvidhya.com

Shawn Hymers

Written by

Analytics Vidhya

Analytics Vidhya is a community of Analytics and Data Science professionals. We are building the next-gen data science ecosystem https://www.analyticsvidhya.com

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store