Ayush@Machine
/root/latent-space/topics/resume
Integrating HTML Pages with Flask

Integrating HTML Pages with Flask

PURPOSE

Understanding how to Render HTML Pages on a Flask based Web App

The Author assumes that you have read this blog [01] or have basic understanding of Flask, and HTML.

Step 1: Creating a templates directory, where your HTML files will be placed

Create a templates\ directory in your Project Root.

# assuming your project root is called 'flask_app' & app name is 'app.py'
flask_app
│   app.py
└───templates <- create this folder
    │   index.html <- create this file
cd flask_app/
md templates
cd templates
gvim index.html

Step 2: Let's write a simple HTML Page

In your index.html present in your templates directory, add the following code:

<h1> Hello World! </h1>
<h2> Made with <3 and Python </h2>
<em>by <b>Ayush Mandowara</b></em>
<!-- enter your name instead of mine! -->

Step 3: Let's render the HTML Page just created through Flask

If you followed the previous tutorial, your app.py file looks something like this:

from flask import Flask

app = Flask(__name__)


@app.route('/')
def index():
  return 'Hello World!'


if __name__ == "__main__":
  app.run(debug=True)

Modify the file to:

from flask import Flask, render_template # adding template support

app = Flask(__name__)

# rendering HTML template

@app.route('/')
def index():
  return render_template('index.html') # pass the name of the HTML file you created.

if __name__ == "__main__":
  app.run(debug=True)

Run the app.py file:

py app.py
  • That's about it, just visit localhost:5000 on your browser, and say hello to the first of many pages you will serve using this technique.

Next Blog: How to render Dynamic Data to your webpage


Tagged in flask