 Right so hey guys and welcome back to another flask tutorial. So in this video We're going to pretty much learn how to render out templates that we create using HTML from our flask server So first of all what I'm going to go ahead and do is open up visual studio code and then open up the Website folder that I created in the last tutorial So in the last tutorial we learned about how to get started with flask What flask is and how you can pretty much? Enable different settings on flask to host your own website and kind of get an outcome from the web server when the user visits your site So what I'm going to do is I'm going to go ahead and open my website folder that I created in the last tutorial Okay, so once that's opened up what we have in here is the app.py Which is the main file that controls the web server and is being run by the flask as soon as we run the server and What we also have is the app.blueprint file which pretty much allows the App file to import the blueprint file and know which routes are going with so in the blueprint file We were able to pretty much set up the different routes to The web server so the initial route is we're going to return a home page header tag The route to about is going to return a header tag for an about page And similarly the route to a contact page is going to return a header tag for a contact Cool, so since we've got all of that sorted in this tutorial What we're going to be learning is instead of having to return these elements separately We're going to learn how to actually render out an actual template or send off an actual html file to the browser Like a normal web server would because having to write code in here would be really long and it can get confusing and Hard to manage after a while, so that's what we're going to be learning in this tutorial now before we proceed I'd like to say if you haven't watched part one of this tutorial I really recommend you do because this all will make a lot more sense as it is a continuation to the part one So without further ado, let's begin So what you want to do first of all is actually go ahead and create a templates folder in your my website or your main Website directory, so I'm already in my main website directory that is just called my website I'm going to go ahead and create a new folder and then I'm going to call it templates. So templates Okay, I'm creating in the wrong place. So make sure that it's outside So exactly in your my website directory create a new folder and call it templates So make sure that you're spelling this correctly because by default the naming convention that you use is templates so if you use this the Flask server already knows where to look for your templates and you don't need to specify the Entire directory unless you rename this to a different folder name you'd have to then specify the folder Cool. So what you want to do in your templates folder is go ahead and add a few HTML files So I'm going to add three HTML files one for my home page one for the about and one for the contact us So I'm going to go inside my templates folder create a new file and call that index.html Now since it's a .html file, it's pretty much anything that a browser can render so this is a Hypertext markup language file that is recognized by most Browsers and it will just display all the elements that I create on it. So now instead of Rendering elements from each return statement that we have in here We're going to create those elements in this file index.html and then render out the file in here instead So first of what I'm going to do is initialize the dog type then type in HTML to create my HTML Starts and end. So I have an opening and closing HTML tag then I'm going to have my head tag Which is pretty much going to include information like my title So I'm going to include the title and I'm going to call this let's say this is going to be like a store that I'm going to have So I'm going to say your hands store because this is going to be like my little store website I guess and then once I'm done with the head tag I'm going to go ahead and create a body tag and a closing body tag So this is an opening body and closing body so anything that is physically visible on the website goes in here Now obviously I'm not explaining this in depth because this is not an HTML tutorial. This is more about flasks So yeah, so what I'm going to do in my body tag is go ahead and create a header one tag So that we can create a header and I'm going to call this your hands store And what I'm going to do is I'm going to center this using a center tag now in HTML This would be a really bad practice, which is why it's all also highlighting it as red But obviously since we're not going to be using this as a live website And we're just doing it for the sake of this tutorial as like an example. We can roll with that I'm going to also create a paragraph tag, which is going to say, I don't know best merge in the game I know it's cringe, but hey nothing else coming to my mind right now So I'm going to do a paragraph tag, which is going to be under the Header tag and I'm going to center it out as well So if anything between the center open and closed tag is going to be centered out Cool. So that's pretty much all that's going to be on my homepage So now you might say hey, you've already created this index.html page that is in your templates folder How do you actually host it on your flasks so that when the user goes to your initial route or the forward slash Route on your web server the index.html file is served to him So the answer is pretty basic what you want to do is go back to your app blueprint.py file Unless you've got your routing in the app.py file, which is the old method or the inconvenient method if you've got a lot of roots So go in your app.app underscore blueprint.py file And then in the first line what you want to do is from flask you want to import blueprint And you also want to import something called render template So flask makes it really convenient as it already has a class in it's called render template Which pretty much helps us render an entire HTML file or an HTML template using a single line So otherwise we'd have to type in a load of lines, but it makes flask makes it really easy So now that we're done importing the render template class What you want to do is I'm going to go to my index function right here, which is where my home page should be returned I'm going to get rid of this H1 and home page because I'm not returning normal markup in here anymore I'm actually going to render out the file and return it to the browser So I'm going to return render template Which is the name of the class that we just imported and then in here We need to specify the name of the file that is going to be rendered out now as I said before since we've gone with The naming conventions and called the folder templates. It already knows where to look for the template So it's going to by default look for the templates folder and in the templates folder It's going to look for the index.html file since I've mentioned it in here now so let's save this up and Now that I've got everything ready. That's about it. What I need to do is open up CND I'm going to go ahead and zoom in a little bit So it's easier for you guys to see and in here. I'm going to do cd desktop forward slash my website My website because where that's where the App.py file is that's going to be run by a flask So first of all what I'm going to do is set flask in debugging mode Which means that we don't need to keep running the server again and again for it to notice changes It will automatically notice it and refresh itself So set flask underscore debug equals one So when I press that debugging is going to be enabled in flask, so I can go ahead and type in flask run now and As you see right here It says debug mode is on because we enabled that and this server is going to be hosting our app.py file Or the app.py Server is going to be hosting on our local machine address at the port of 5000 So let's go ahead and copy this address right here So copy and I'm going to go ahead and open up a chrome tab in there I'm going to go ahead and paste this and As you see right here, it's a beautiful little Yohan store header one and we have best merge in the game as a paragraph So as you see this is actually an index.html file that is being rendered out instead of Returning just specific text or specific elements like we were in the last tutorial. So this has worked fine So every time we do a forward slash request, which is the first request we do when we type in an address What my code is going ahead and doing is it's going and importing this app.blueprint and then it goes ahead and says Hey, what's the route for initial forward slash and then it goes ahead and finds out here I need to run this index function and the index function says hey You need to return and then render out a template that's already in the templates folder Which is called index.html now the contents of the index.html are Johan store Johan store best game in the merge Now it's gone ahead and changed the title up here to Johan store And then it's also given a header which is in the center and put the paragraph type a tag in the center too Now if I go ahead and do forward slash about it's obviously got the same old method Which is just rendering out a single element and the same for contact So let's go ahead and update those as well and then we'll bring an end to this tutorial because that's going to Teach you guys how to pretty much render out HTML templates instead of Returning just normal elements one by one cool. So just to make life easier I'm going to go ahead and copy the code from index.html because it's going to be pretty similar what we're about to do So I'm going to create a new file in my templates folder So make sure you're in the templates folder again Create a new file and I'm going to call this about.html because it's going to be representing my about page Now I'm going to go ahead and paste the code in there and then I'm going to say about us Okay, so I'm going to type in about us in here and Then I'm going to replace this text with a Tech YouTuber trying to sell much Cool, so that's going to be a text for the about page. So it's the same as before We're just setting up a header that's going to be centered and a paragraph that's going to be centered cool Now let's go ahead and also create a contact page. I'm going to save this and close this Now back into our templates folder to create a new template for our contact us page. So let's go ahead and create that Contact.html press enter and I'm going to paste all the code again now. I'm going to change the title to contact us and then I'm going to say Contact And then I'm just going to put a fake email in here. So something like much Here at hand.com something like that. That's a ridiculous Domain, but oh well, whatever. So now that we've done all our templates We need to just go ahead and link about.html and contact.html to our roots So let's go into the root for the about which is right here and then instead of returning h1 about us We're going to render out the template instead. So render template Speechmarks and then the name of the file which is about dot html And then we're going to do the same for our contact roots as well. So return render template and then we're going to do Contact.html Now make sure you're spelling these right and they match all your spellings and also make sure that all your templates are in Your templates folder and nowhere else So once that's all done You know don't need to restart the flask server because it's set to debugging on which means it's also refreshing each time a change has been Noticed. So let's go ahead and check if those changes were saved I'm going to refresh and as you see right here if I go ahead and inspect my page I'm going to do that and If you notice we have all the html code that we typed up in our contact.html page So we have a header tag or the head tag which includes the title then we have our body We have the center tag. We have the h1 We also have the paragraph tag and pretty much everything that was in our markup file Now if we go to sources, we also see that this is running being Rooted to our contact page. We obviously don't see other sources because they're not being shown Cool, so let's go ahead and try our about page for the last bit of this tutorial and make sure that it works and As you see right here, this is working just fine So that was it for today's tutorial guys Just wanted to create a short tutorial to kind of show you how to render our html files or html templates Instead of having to render out each html element or a bit of text from our flask server each time So if you guys enjoyed this tutorial Please make sure to drop a like comment subscribe and please share it with your friends and family If you guys would like to support the channel directly you can sign up as a patron Using the patreon link in the description where I'm going to be very soon uploading a load of private videos Which are going to be about back-end and a lot of backdoor stuff So if you're interested go ahead and sign up If you guys would like to join the discord server that we have it's also going to be stated in the description And so are my socials so go ahead and do that and guys I will see your beautiful faces in the next tutorial. Peace