Flask Tutorial #10 - Blueprints & Using Multiple Python Files

hello everybody and welcome back to only flash tutorial so in this video we're gonna be talking about blueprints which essentially allows us allows us to divide up our application into separate Python files where we can actually pass specific views and render templates from different areas of our kind of project our application now this is really nice because sometimes you might create let's say maybe like an admin page or specific login script or something that you could reuse in different applications well with our previous knowledge we would have had to put all of that in the same Python file which would make it much more difficult to reuse those different components in new flask applications so here I'm gonna show you how we can divide things up with blueprints how we can create kind of our own little mini apps inside of the big web application and then how we kind of reference those and use those properly shouldn't take too long but let's go ahead and get started now the first thing I'm gonna do is create a new Python file which is gonna be our blueprint now the blueprints are kind of just extensions to your app so you're gonna think of this main file that we have and I've just kind of modified this a little bit from last time and I'm sure you guys understand what's going on here as like the driver for our application this is kind of what sets all the blueprints up it's the first thing that we go to and this is gonna define kind of the behavior and those blueprints are kind of little extensions that can be used from this file so what I'm gonna do is go file new file to keep this simple I'm going to save this directly in the same directory as my main dot PI file I'm gonna call it second PI and what we're gonna do is just import a few things at the top here so from flask import blueprint and import render template now what I'm gonna do is set up this as a blueprint so the way that I do that is I'm gonna create a variable in this case I'm gonna call it second but you can call this variable whatever you want so long as you know the name of it and I'm gonna say is equal to blueprint now in here I'm gonna set the name of my blueprint which I recommend is the same as the file name and as this variable but doesn't have to be and then our import name is always going to be under Stratus core name pretty much like unless you're doing some advanced uses you're always just going to do this which represents the name of this file it's a special Python variable now the next thing that we need to define and this is optional but you usually will want to define it is the path your static folder and your template folder now the reason you do this is because technically you could have a different folder that stores the templates for these views and this is gonna have whatever functions we define here maybe they want to use templates with the same name but that look a little bit different so in that case maybe we create a new template folder we create a new based on HTML file and from this template or from this blueprint we're gonna render those templates now in this case what I want to do is just reference the original template and static folder that we have so to do that I'm gonna say static under square root folder equals static like that and I'm gonna say template underscore folder equals templates if I could spell that correctly okay so that's as easy as it is and again you can change the name those to be whatever you want and what is this black box I'm gonna try to get rid of this and be right back okay so I don't know what that was but anyways now that we've done this um everything's kind of the same as what we've done before there's no need to run like app dot Ron do this if name equals main because we're not gonna be running the application from this file we're only gonna run it from here and then we'll just use some code from here so what we can do is just set up our routes and set up our functions like we would before so what I'm gonna do is rather than using a hat app this time I'm gonna say at second dot root and then I can set these root to be whatever I want so let's start by just doing slash home and let's actually set another root and let's just make it equal to slash as well now we'll just make this really basic we'll say define home render underscore template and then we have that home dot HTML template since we've referenced this templates folder up here we have home dot HTML we can render that and then we'll see this image popping up I'll just get rid of that h1 tag for now ok awesome so now that we have that what we're gonna do is actually set up this blueprint from our main flask application set we actually use it properly now what we need to do when we start doing this is just import the actual Python file that holds this blueprint so second is the blueprint we need to import that file so I'm gonna say from second import second now if you named your variable something else so maybe you named it second one like that then you would have to change this to second one there because that's actually what you want to import in what you want to use okay so that's pretty much all we really need to do now we're just gonna say app dot register blueprint we're gonna type the name blur blueprint which is second then we're gonna set an optional URL prefix I'm gonna set it equal to blank for now and we'll get back to this in a second and talk about what that is this is as easy as it is with any other blueprints you have if they're in the same directory you just go from third import third from fourth import fourth and obviously you can name them whatever you want just do those import register the blueprint as whatever it is and then whenever you go to /home it'll just find it in this blueprint and you'll be you'll go there and we'll talk about how this works in a second so notice first of all before I run this that I have this app dot root a slash so test is slash and it's gonna render h1 test now but here I have slash as well so what does that actually mean when I type slash am I gonna go to test or am I gonna go to the home page well that's what we're gonna test right now but take your guess and you know why you think we're gonna go there so let's run Python main dot pie let's get our web browser up here I'm just gonna go this was already up before so let's go slash hit enter and whoa and we get an error and that is because I forgot to return from here so let's make sure that we returned that let's refresh this page or it actually already refreshed for us and give me a second there we go so notice that when I go to slash and I apologize about that that I go directly to the home page I don't actually go to that test page that was here the reason this is is because essentially whenever we register a blueprint we look at this URL prefix which in this case is blank which means any URL we pass it to the blueprint so into here and we see if anything matches so we say in this case we type slash we go to this blueprint we see that slash matches so we immediately return and render this home HTML now if slash didn't exist in here so if we get rid of that and we run this again so let's go here now if click enter on this you see we get directed to test and that's because we didn't have that slash root in this specific file so since it didn't find it in there we went to here now how can I make it so that we can actually reference slash here but we can also reference the /root over here maybe using a little bit of a different URL well this is where things get a little bit interesting and this is where we can do the URL prefix so essentially the URL prefix is what needs to come first for us to send something to that blueprint so let's say this blueprint represented all of the admin functionality of our website in this case our URL prefix would be admin and I guess we can do admin slash like that or slash admin and if we see slash admin what we'll do is we'll actually pass the rest of the URL to this second dot PI file and then go to this view based on that so in this case what's gonna happen is if we type slash admin and we don't type anything else what we'll get is just go to this slash page here because the like kind of extension actor slash admin it was nothing so we're gonna return home and then if we go to slash admin slash home will reference home here and we'll go to that page now to make this a bit more clear I'm just gonna say define test and we'll add a root here so at second root let's just make this test so that you guys understand how this works and under street return in this case we'll return some h1 tags and just say tests like that okay so let's run this again and let me kind of show you an example so this makes a bit more sense so why do we run this by default now we go to test that is because again if we look here we have slash that's gonna go to test and we only go to this blueprint if we see slash admin so now watch what happens I type slash admin you see that we rendered this home page now why did that work well we have URL prefix of admin so what we do is we pass whatever comes after slash admin so if we add like slash admin slash like that's what came after it so we passed that here we see that we have a slash so we render the home template now let's do a few more tests I guess I'm gonna have to actually get rid of whatever I wrote here so this doesn't crash it so let's do that and let's go to slash pad min slash test and notice when we do that we get this test because again we took that slash test after admin rendered the view this is very useful this makes it a lot cleaner so you don't the type slash admin slash home slash whatever in all of these blueprints and that is kind of how that works so now I'm going to show you how we can do this in a bit more advanced way with different template folder and different static folders inside of kind of different directories and then we'll be done talking about blueprints all right so now I'm going to show you kind of a more advanced part of templates where what we can actually do is have a better structure in here where we kind of have mini apps inside of our main app so to do this I just want to quickly mention that I actually found this webpage you guys might have seen me pop it up before that explains this really well kind of how this project structure works so I'll leave a link to this is kind of the way that I figured out how all of this work so I figured I'd give them a little bit of credit and put it in the description so anyways you guys can have a look at that it explains it really well but I'm gonna go through kind of an example here because if the web page doesn't really go through examples it kind of just explains it on how we do this so what I actually want to do is put my second dot pipe file in its own folder and it has its own static images and its own templates because realistically if we can do that then that means we can just take that folder and we can just put that into any flask application and just use that as kind of like a little component of the app so for example you know logging in had been all that kind of stuff is some basic examples of what when we might use that so I'm going to start by just creating a new folder in here and let's just start by calling this I don't know admin so it has some admin functionality for our application now what I'm gonna do is move this templates folder move this static folder and move the second up high file into admin so to do that this actually might take me a second I think I can move this okay so we'll say admin slash perfect that move that what the same one here so admin oops slash and then we'll move this second up high so last one admin / awesome so we move those in here into this admin folder and we have this maned up high file so now how can I actually import the second file and have the blueprint work properly like you did before well all we actually need to do is add one file inside of our admin folder to create this as a Python package now I'm not gonna explain how this works because it's kind of a whole new topic on its own but essentially creating an underscore underscore and knit underscore underscore dot pi file just saving it and not putting anything in it inside of a folder will actually make that folder a Python package and what that allows you to do is reference the folder name to import modules from it now this might seem a bit confusing but from my main dot pi file now I can't just import second because the thing is there's no second file in the same directory as this main dump I file so how do I actually import that file it's inside admin well to do that all you do is admin dot second import second and we don't have to change anything this is just gonna work properly now now the reason this works is because when you create a Python package with this init PI it allows you to reference the folder name and then that other folder but if we didn't add this an it to up hi in there we'd be out of luck this wouldn't work because we couldn't reference admin dot second so anyways to prove you guys are not making this up I'll just actually run the app again so you see my go-to slash admin that works fine when I go to slash admin test same thing and then we can go back to the home page and we just get the big upper case test so that works properly that's how you do that then inside here now we have our own static and our own template folder and if I wanted to create a new kind of like mini app that had its own blueprint again well I can just create another new folder in this case we'll just call this like I don't know other and then inside here what I can do is the exact same thing I did here so I can create another file another nipped up hi templates static just mention again like we have in second that our static folder is static our template folders template it will use the ones that are inside this interior directory so inside other and then we can have different kind of templates and different static files for that so that is how blueprints work you can use as many blueprints as you want all you need to do is just register them here and set their URL prefix and that's pretty much all there is to it so with that being said that has been it for blueprints this will probably the last technical video and we're actually gonna do a deploy next I think and show how we can get this flask application out onto the web so that anyone can access it but with that being said if you guys enjoyed make sure leave a like and I will see you guys in another video

Channel: Tech With Tim

Views: 76,645

Keywords: tech with tim, python flask blueprint, python flask blueprint tutorial, blueprint flask, blueprint flask tutorial, flask blueprints, flask blueprints tutorial

Id: WteIH6J9v64

Length: 13min 8sec (788 seconds)

Published: Tue Nov 19 2019