Flask With Jinja

00:00 In the previous lesson, I showed you template tags. In this lesson, I’ll introduce Flask, the web application framework.

00:09 You are still watching a Jinja2 templating course, and this may seem like a bit of a right turn, but web pages are a very common use case for templating.

00:18 Jinja2 gets used in both Flask and Django to manage HTML pages. Django also has its own templating language, which uses most of the same symbols and a lot of the same tags and filters.

00:30 Because this use case is so common, the rest of this course uses HTML as examples. Flask is a web application framework that makes it pretty quick to create web pages.

00:40 Pairing the right decorator with a short function gives you a web page. Both Flask and Jinja2 are part of the Pallets Project and being maintained by the same group of people.

00:51 It isn’t surprising then that they work closely together. As Flask is a third-party library, you’ll need to pip install to use it.

01:03 This eleven-line program is a website. Pretty wild, huh? Flask calls its programs apps, and the main program tends to be named app.py. The first thing your Flask app needs is to import flask, and then you instantiate an app object.

01:22 You can instantiate multiple apps, and to differentiate them, you name them. Similar to how logging works, common practice is to name it after the file it is in, so you don’t have to worry about whether your name is unique.

01:34 The @route decorator is what turns a function into a web view. A view is responsible for outputting content for a page. The argument to @route is the relative URL for this page.

01:48 Sticking with my Hello, World! theme, this is the /hello/ route. After that, it’s pretty much just a function. You return a string from the function, and Flask takes care of turning that into HTTP content for your browser.

02:05 Flask includes a development server that you use while you’re building and testing your website. If you haven’t seen the __name__ trick before, this checks if the file is being run directly as opposed to being loaded as a module. If it is being run directly, then the .run() method on the app turns on the development server. Passing in debug=True turns on some debugging features.

02:31 I pretty much won’t be using them, but it’s common practice, and who am I to flaunt that? Okay, now to the command line.

02:40 I run the app.py as a script, and this launches the development server. You can see here that it has output the host and port that it is listening to, which defaults to port 5000.

02:52 Let’s go to a web browser and visit this host with the /hello/ relative URL.

03:08 There’s the URL, and that’s the resulting page. Nothing terribly dramatic, but it is kind of exciting how little code it took to get a web server going. That’s the beauty of Flask.

03:22 Let’s go back to app.py and write another view, this time using a Jinja2 template because that’s what you’re here for.

03:32 I’ve added a new view to the app.py file. The key difference here between home and hello is I’ve used Flask’s .render_template() method. It takes the name of a template, which it expects to be in a directory named templates/, and keyword arguments to be used as the context for the template.

03:52 Note that as this is going to be for the home page, the route is just a lonely old slash.

04:02 And here’s the template, which I’ve named base.html. I’ve done this on purpose rather than home.html, and I’ll explain more about that in the next lesson.

04:13 This file is pretty much just an HTML page with a single variable that’s going to get rendered. I’ve added a new tag here for future use. The {% block %} tag is used to note a chunk that can be replaced later. For now, don’t worry about it. In this situation, it does nothing.

04:30 I’ll come back to it in the next lesson. My dev server is still running in the background. In fact, you can leave it running. It automatically detects changes to the app.py file and reloads as necessary. So let’s go take a look at the output.

04:52 There’s the URL, and here’s the page. Still nothing dramatic, but now it’s prettier because it is actually HTML instead of plain text. And of course, variable substitution still works, so title got replaced with Jenny's Server.

05:11 HTML is rather repetitive. Wouldn’t it be great if you could organize it the way you do with functions and classes in Python? Spoiler alert, you can! Next up, template inheritance.