Frontend Development with Flask and Jinja2

Flask is a popular web development framework in Python, known for being lightweight and flexible. In combination with Jinja2, a template engine for Python, Flask can develop highly interactive web applications. This article will guide you through frontend development using Flask and Jinja2. We’ll begin with an introduction to Flask and Jinja2, proceed through setting up a basic Flask application, delve into the usage of Jinja2 templates, and conclude with a FAQ segment. This article aims to give a comprehensive understanding to both beginners and experienced Python enthusiasts.

Flask: A Brief Overview

Flask, which is based on Werkzeug WSGI toolkit and Jinja2, is termed as a micro web framework. This does not mean that Flask is lacking in functionality; instead, it does not enforce specific tools or libraries. It has no database abstraction layer, form validation, or any other components where pre-existing third-party libraries provide common functions.

from flask import Flask
app = Flask(__name__)

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

In the example above, a new Flask web server instance is created and route is defined for the URL / which returns “Hello, World!”.

Jinja2: A Brief Overview

Jinja2 is a full-featured template engine for Python. It is very fast and easy to use. Pocoo, the creators of Flask and Werkzeug, also developed Jinja2. It offers a similar web development philosophy: unspecifying or not limiting the ways you can do things.

<html>
  <head>
    <title>{{ title }}</title>
</html>

In the example above, a simple Jinja2 template is shown. The double curly brackets denote places where variable content is inserted.

Setting up a Flask Application

We’ll start by installing Flask. Flask is installed using pip, a package manager for Python. Use the following command to install Flask:

pip install flask

Now, let’s create a new Flask application. A basic Flask application can be set up as follows:

from flask import Flask
app = Flask(__name__)

@app.route('/')
def home():
    return 'Hello, PythonTimes readers!'

Understanding Flask Routes

The @app.route('/') decorator in Flask is used to specify the URL that will trigger the associated function. In this case, visiting the base URL of your website (something like http://127.0.0.1:5000/) will trigger the home() function and return ‘Hello, PythonTimes readers!’.

Setting up Jinja2 Templates

Flask is configured to look for HTML templates in a templates folder. To use Jinja2 templates, start by creating this folder and creating a new file named home.html inside it. The folder structure should look like this:

/myflaskapp
    /templates
        home.html
    main.py

In home.html, you can add some basic HTML:

<!DOCTYPE html>
<html>
<head>
    <title>PythonTimes Flask Tutorial</title>
</head>
<body>
    <h1>Welcome to PythonTimes Flask+Jinja2 tutorial!</h1>
</body>
</html>

Now let’s modify our home() function to render this template:

from flask import Flask, render_template
app = Flask(__name__)

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

Now visiting your base URL will show the HTML you wrote in home.html.

Manipulating Templates with Jinja2

Jinja2 allows you to inject content, such as variables or loops, into your HTML. Replace the <h1> line in home.html with the following:

    <h1>Welcome, {{ name }}!</h1>

Now, modify the home() function to pass in a name variable:

@app.route('/')
def home():
    return render_template('home.html', name='PythonTimes readers')

Now visiting your base URL will show the message ‘Welcome, PythonTimes readers!’.

Conclusion

This tutorial has covered the basics of frontend development with Flask and Jinja2. While we have only scratched the surface of what is possible with these tools, we hope this has provided a good starting point for Python developers interested in web development.

FAQ

1. What is Flask? Flask is a micro web framework for Python.

2. What is Jinja2? Jinja2 is a template engine for Python.

3. What is a Flask route? A Flask route is a decorator that specifies the URL that triggers a function.

4. How are templates added to a Flask application? Templates are created in an HTML file under the templates folder.

5. How does Jinja2 manipulate HTML Templates? Jinja2 manipulates HTML templates by injecting content via variables enclosed in double curly brackets {}.

Keep exploring Flask and Jinja2, and let us build interactive web applications with Python. Happy coding!

Frontend Development With Flask And Jinja2