Building Dynamic Webpages with Flask

Now, lesson one. Flask for rendering HTML in the browser. We're rendering HTML here—an <h2> tag.

So I guess, yeah, we are rendering HTML, but I mean an entire HTML page—a whole webpage ready to go that we could render. That's what we're going to do. That's what you typically do, right? You're not just dumping text into the browser.

We want whole webpages published. So for that, we are going to import the render_template method, which is a function that belongs to the Flask module. And we are going to make an index page, index, being the homepage name.

Every time you have a webpage, you're typically calling your homepage index. Although we have multiple lessons, so we're going to have an index01 page, which we're going to load in the browser. And then we're going to modify our route—you know, that index route, the thing with the slash, right? That home route—to render the index HTML page, as opposed to just returning raw text to the browser.

We are going to proceed by making an index01.html page. In vs. Code, we're going to click the new file icon and name the file index01.html right here. index01.html, which you have already, actually.

Okay, here, we already have it. So let's not—I don’t, you know—let's not make all this stuff again, like the CSS. I'm going to spare you having to type the CSS.

But what you would do is place the index01.html file in the templates folder. If you're making it fresh, drag it in here. Although we already have it, so let's delete that to expedite matters. I’ve already prepared the basic index01 file for you.

Since this is not a class about writing lots of CSS or HTML from scratch, I’ve prebuilt that part for you. But I will show you—because it's useful to know—how to make a file. We'll call it index.html, then you would type an exclamation mark and hit TAB.

If that’s not working, no worries. That means we need to turn on Emmet shortcuts and so on.

So, like I said, stay with the provided index01 file. Click the new folder icon and make a new folder called templates. Once again, we already have that.

If we didn’t have it, here’s what you would do: drag the index page out of the templates folder and look at how to create it again. You can make the templates folder. It’s good practice, right?

Click the new folder icon as instructed in the book. Templates is the default name of the folder where all your HTML pages go—just like static is the default name for all your resources like images and CSS.

And because we're using __name__ == '__main__', it knows your index pages are inside your templates folder. When you specify that you want a page to be your app's homepage, you don’t need to include the folder name—it just knows. Likewise, if you're loading an image, Flask understands that static is where those kinds of resources are stored.

So drag the index01.html file into the templates folder. Okay, that's what we did. So you've got a templates folder with index01.html in it.

And it's got a little starter template. We looked at this in the browser before, right? We're going to add an <h1> tag. You already have it.

Actually, we have more than that, right? You can type this exact thing, but we have it already. And there's some CSS to type. But again, just to tighten the screws a little bit, I'm sparing you from writing that out.

You could delete all this and write it from scratch, absolutely, if you'd like. But that’s not exactly the goal of this course.

Now we're going to make a new server script. Because we're on a new lesson, we're going to have a new server—a whole new script—just like we made a new script for the lab. So from server00.py, we're going to do a “Save As” and call the new file server01.py.

And we're going to add the render_template module to the Flask import statement because that's a function we can call to pass in our HTML page. That’s what publishes it to the route. So you're already importing Flask from Flask. Now we're also going to import render_template.

Change the return statement to render index01.html. In other words, we're not simply going to render some text—not just an <h1>.

We're not just rendering a message. We're rendering an entire webpage. So for that, you call render_template and return that call, passing in the page you’d like to render at that route (the URL destination), which in this case is the homepage.

We are not going to return just text. We're going to return render_template('index01.html'). And we’ll take the old return statement out.

We're going to start the server now to run the app. We'll quit the server00.py lab (which is the one currently running) and start server01.py, the new one that we just created—the one rendering the HTML page.

Type Control + C to stop the currently running server. Then, run this line to start the new server. In the terminal: Control + C. Perfect.

Hit the up arrow, back up a little, and run server01.py. Hit ENTER. Boom.

Looks like it works. Back to the browser. Refresh. Here we go.

Refresh. Template not found. Very well.

Okay. index01.html wasn’t found, huh? Hmm. Why should that be? Doesn’t run server01.py under templates/index01.

Hmm. Oh, the new folder is template, right? Of course. It shouldn't have gotten too confused. Oh goodness.

Okay. I get it. Oh—the templates folder is inside the venv folder. No, no, no, no, no.

Drag it out of there. Okay. That’s why—it cannot be inside the venv folder.

All right. This is the kind of stuff that’s super important to know how to troubleshoot and spot. There it is.

It worked. Okay. We're at the server, and that is our page.

It's actually good to see these error messages. This kind of stuff should be kept in—it's useful for students to see. Our new server is still using the same URL.

So just refresh the browser. The index HTML page should load. The file name does not appear in the address bar, by the way—just the route. It does not say :,000/index01.html.

The only thing that appears in the browser are the routes. So on the /about route, it did say /about, but the pages themselves don’t appear. Interestingly enough.

And that concludes the lesson. We're going to call that Lesson 01. Import Flask with render_template now as well. Have your index function return the call to render_template, passing in the index file. Make sure your index.html page is inside your templates folder, and that your templates folder is in the main project directory—not inside the venv folder or something. This is unchanged.

Here is your final HTML with no CSS—just some kind of message, basically. Which we could change. We have a few more lines of code here. It's just basic boilerplate HTML with an <h1>. You could publish something besides that, but it’s fine. And that concludes it.

So that’s the CSS omitted—no styles, too many lines, not important.