Before You Install Flask...Watch This! Flask Fridays #1

what's going on guys john elder here from cody.com in this video we're going to dive into flask for web development all right guys like i said in this video we're going to start to learn flask but before we get started if you like this video you want to see more like it be sure to smash the like button below subscribe to the channel give me a thumbs up for the youtube algorithm and check out codeme.com drive dozens of courses with hundreds of videos that teach you to code use coupon code usually one to get 30 off membership that's all my courses videos and books for 110 feet just 49 which is insanely cheap okay it is friday here in vegas and i am starting a new segment called flask friday that's right flask friday because flask is incredibly fun and friday should always be fun so from now on on fridays we're going to do flask and we're really going to dive into this and learn it from the beginning to the end we're going to get all the way into it this is going to be a comprehensive and complete playlist and it should be a lot of fun so we're going to start out building a blog and we're going to call it flasker sort of like blogger but flasker and uh that's we're going to start out with so in this video we're going to talk about flask a little bit we're going to uh install it get it started build a simple web page with it you know nothing too complicated in this first video but we will have something actually finished by the end of this video and it should be really cool now a lot of you may ask why flask and not django i have a lot of django videos and we're going to continue to learn django in this channel but flask is a little bit different than django so django is sort of a complete web framework flask is more of a lightweight framework right and there are benefits and drawbacks for both of them right so django is great for huge projects it's very complete it has everything you could ever want flask has less let's just call them things for now but gives you more control because it's a smaller lighter weight framework you can really get in there and do exactly what you want and you can pull in third-party things uh utilities and things to make it more robust more django like if you want but you don't have to so that's the beauty of flask it's great for very simple projects it's great for large projects it just depends on you as a developer and what you like most so let's head over to the website really quickly and i just went to google and typed in python flask and the first or second thing that popped up is the flask website you see it's flask.palletsprojects.com it's kind of a weird name but you can dig through here there's a user's guide there's some lots of documentation and all kinds of things if you really want to you know kind of read about all this stuff you can do that there we're not going to bother with that in this video we're just going to dive right in and get started so as in all of my courses here i'm using the slime text editor and the git bash terminal and you can find those at sublimetext.com and git dash scm dot com forward slash download i believe this is the git bash terminal it's completely free so sublime so those are the tools i'm going to be using so let's just jump right in and pull up our git bash terminal so i just open this and if i take pwd i can see i'm in the c user's codeme directory now kodamy is the name of my logged in windows username so that's what's coming up there yours will say something different obviously but the first thing i want to do is make a directory to hold our new flask project and all of our flask projects so i'm going to type mkdir stands for make directory and i want to put this in the c drive and let's call this flasker now if you're on a mac obviously you don't have a c drive just stick it anywhere you want and that will be fine so now we need to change into that directory cd change directory and let's go c flasker and you can see right here now we're in that flasker directory if i type in ls there's nothing there so the first thing we always want to do with any sort of python project is create a virtual environment so to do that we go python dash m v e n v and now we just name our virtual environment and i'm going to call this vert short for virtual and it usually takes a second sort of spins up and installs this thing now vim v-e-n-v comes with python so you should be good to go all right so now we can activate our virtual environment by typing in source and then vert which is that directory we just created right there and then scripts and then activate so source vert scripts activate if you're on a mac i believe it's source bin activate or source vert bin activate something like that play around with that google it if you have to for a mac but i think that's what it is so okay we can clear the screen now and you see we have this vert thing above our command prompt i hit enter a bunch of times it's always there so we can turn it off by typing deactivate if we want to and you can notice now that vert thing is gone right so i'm gonna turn it back on again source vert scripts activate okay so our virtual environment is turned on now if we type in pip freeze this will show us all the python things that are installed in our new virtual environment and you can see nothing is installed at all because we haven't installed anything so the first thing we need to do is install flask so we just go pip install flash if you get an error while doing this saying that pip doesn't have permission or something it means you didn't install python correctly reinstall python and in the first installation screen there's a box at the bottom that says add python to path make sure that's checked restart your terminal try it again and it should work so all right you can see it downloaded and installed a bunch of stuff so we clear the screen and now if we type in pip freeze we can see we've got all this stuff that's been installed click flask it's dangerous ginger to a markup safe and vert zoo so these are all the things that we need for flask that come with flask all the dependencies and all that good stuff and we're ready to go so the first thing i'm going to do we're in our c flasker directory if we type ls we see there's this vert directory that's our virtual environment stuff we're not going to really do anything with that but just notice that it's there so now let's create a file that we can start doing flasky stuff with so i'm just going to type touch and then let's call this hello.pi you don't have to do it this way but touch creates files so now if we type in ls we can see this hello dot pi file that's been created there's nothing in it and that's cool so let's head over to our sublime text editor and open this up and i'm going to go to project and add folder there it is add folder to project that popped up over here and now just navigate to that file or to that directory we just created so that was flasker so i'm in my c drive here you can see you may have to navigate around to find your c drive but uh go ahead and find that and here's our flasker directory so i double click that and we can select this folder so boom we do this this pops up here's our virtual stuff we can just ignore that and then here's this hello pi hello.pi file so if we click it and open it there is absolutely nothing in here so to start a flask file a flask project of any kind we need to import flask into our little project here so to do that we go from flask import flask and that is capital f and that's all we need to do now we're also going to need something else in a bit so i'll just go ahead and import it now too and that is render underscore template and we'll see what that is in just a minute so okay now let's create a flask instance so to start using this we need to create a an instance of flask that we'll be running that does all the things right and to do that we just call app equals and then flask capital f and now underscore underscore name underscore underscore right so you see two underscores no spaces in there and what this does is this helps flask find all of our files in our directory here it doesn't really matter how but this is how you always start a flask project so app equals flask underscore underscore name underscore underscore so okay that's cool so we've got this app instance here we can call on in the future and do stuff with so what we want to do now is create a route so let's create a route it's actually called a decorator decorate tour i don't like to get bogged down in names of things and you don't really need to know that that's a decorator or why that's just what it's called so basically we're creating a route anytime you have a website it needs urls so www.yourwebsite.com index.html that index.html that's a route we need to create that www.yourwebsite.comabout.html that about.html that's a route anytime you have a web page it needs a url and we need to create those by creating routes so to do that it's really simple we just call at and then app which is just our app right there our app instance so app dot route and then inside of here we just create the route that we want so we need an index route the very first page of our website so when we go to www.ourwebsite.com forward slash nothing that's sort of the homepage of the website if we wanted this to point to about.html we would do something like that or even just about whatever but for now we just want the root route which is the main web page and that creates that so now we need to define this thing so define index and now we can just return whatever we want so we're going to get more complicated in the future but for now let's just say we want to return the words hello world and let's be fancy let's put this in an h1 tag this is an html h1 tag if you're not familiar with html we have an opening tag here and a closing tag here h1 stands for header one or heading one it just makes the text really big you can have h2 which makes it a little smaller h3 h4 h5 x6 h6 and it keeps getting smaller and smaller so that's all there is to that so i think that's pretty much it this will create a simple website with one page that says hello world on it now obviously this is not what we want we want more complicated things we want to be able to call actual web pages like about.html has entire web pages on them we don't just want one line of text here on our web page but just to get started this will work so let's go ahead and save this head back over to our terminal now in order to run this thing usually you just have to type in flask run but before we do that we need to do a couple other things that will work and that will run our web server but in order for our website to appear in a web browser the server has to run and the server will be running inside of this terminal and anytime we make a change to our code say back here if we just do flask run and the server's running we need to we will have to turn off the server and then restart it again for those changes to take effect and that's really annoying because we're going to be making changes all the time we don't we don't want to have to restart the server every time we do that so to get around that we can set in a couple environmental variables and let's just go ahead and do that now so we type export and then flask underscore env stands for environment environmental variable and this is our development development environment whenever you're building stuff on your computer that's the development environment you're developing your website when you push it up online that becomes the production environment the production website we'll do that much later right now while we're building this thing we're going to be building it locally just on our computer until we're ready to push it online which we will eventually but when we first started eating out or just building it we're just going to be working in the development environment so we set that and then we also type in export flask underscore app and set that equal to something now if we head back over here we name this file hello.pi so we need to tell the server basically hey our app is sitting at hello dot pi right oh typo so no spaces boom there we go all right so that looks good now we can flask run and this will run the little sort of baby web server that comes with flask and you can see it's created a little url which we can copy and this is 127.0.0 that is computer for localhost so you can go to that colon 5000 this 5000 is the port that this thing is running on port 5000 so the server is listening for port 5000 the web browser will send the web page to port 5000 and everything syncs up so we can go to this thing or we can go to localhost we'll do both and see what that does so we can come over here and paste this in here and you can see boom hello world so notice it's 127.127.0.0.1 like i said we could also just type in localhost colon5000 same thing i usually just use localhost because it's easier to type than 127.0.0.1 but they're the exact same thing and you see we it says hello world and very very cool and very very easy so this is our first webpage with flask congratulations fantastic it's amazing it's an amazing web page all right but it's you know it was quick and easy and you can see just how cool this is so like i said in the future we're going to push this to live online but for now we're just going to be dealing with this locally so we're going to use localhost and that's cool so what else can we play around with this we can change this around let's head back over here and let's create another one of these i'm just going to copy and paste and instead of index let's call this user and let's create another route so app.route and then our parentheses and quotation marks you notice these are single quotation marks you could also use double quotation marks it really doesn't matter so i'll just use single now for this one let's let's go forward slash user forward slash and let's put these little brackets and inside of here let's put name right so this will allow us to pass a name so this will look like uh you know local host colon 5000 forward slash user forward slash john so we're going to create a blog that's going to have users you know we might want to designate a user's profile page by calling it their name so this will allow us to do that sort of dynamically right so that's kind of cool now instead of here we can copy this in our user page itself we can pass in that name now we can use that name whatever it is inside of here so instead of hello world i could type in hello and then squiggly brackets and then we could type at the end of this dot format and then pass in that name so this will say hello hopefully name which if we go to this page let me just copy this should be john or let's go capital j because you know my name is capital i don't know it's friday it's flask friday so okay let's copy this let's save this let's head back over to our website paste this guy in user john now it says hello john very cool if we change this to pete hello pete change this to april follow april very very cool and that doesn't seem nearly as exciting we need some exclamation points so let's go boom boom boom maybe three three so we hit reload boom hello april and you'll notice we made some changes to our code right here we did not have to come back to our web server and break out of it restart it because we set these environmental things earlier so it's sort of listening for changes and it figures out we've made changes and then it see it reloads on its own and that's very very cool so all right we are moving right along one more thing i want to look at very quickly before we get out of here we just did a very basic one line thing right which is generally not what you want to do you want to create entire pages and those pages are going to have lots of code lots of html css all the things we're not just going to have one line so how do we do that we don't want to write all like pages and pages of html code between these quotation marks that would be crazy instead we can create templates so to do that i'm going to head up to my flasker directory right click and click new folder and you can see down here we can name it i'm going to name it templates you can see boom it popped right up and it did not where did it go now we come over here to project and refresh okay there it is for some reason it didn't pop right up like i said i just go to project and refresh folders and boom there it is now i can right click on here and create a new file and when i do it pops up here i can go to file save as and let's save this as index.html now inside of here let's go h1 and let's go hello world close that then down here let's go just a p tag this is my first web page or yeah web page is fine and it's very exciting and we can close this and all right that's fine for now let's go ahead and save this as index.html now we can come back over here and instead of this which i'm just going to copy this and i'm going to comment this out just so it's still here but and i may not have mentioned it but the code for all of this stuff will be available on my github page i'll put a link in the description below in the comment section the first pinned comment will always have a link to the code that you can look this up so i'll leave this in here just so you have it as an example but i'm going to re-paste this in and now we can use this remember this render template thing we added we imported at the beginning we can actually instead of just rendering html like we did here we can render a template that's what render template is right so instead of return and then just some html we can get rid of all of this and we can return render underscore template and then just pass in the template we want to render so this is index.html so how does flask know where this is because we put it in this tip in this templates directory and flask knows that our templates go in the templates directory so it's looking there for it and we can come up here and refresh folders again for some reason this isn't auto refreshing maybe it's time to restart my computer or something but it should just pop up automatically and you can see there it is if we close this that looks good so now if we save this head back over to the website and go back to our index our root route you'll notice boom hello world this is my first web page and it's redirecting to that index.html page if we right click and view the page source we can see yep sure enough there's that code we just typed in that other page which is let's see right there right there do it again isn't this cool all right save this come back over here hit reload boom pops right up and that's very very cool now this other thing still works we can go user tem it still says hello tim that still works fine but when we go to our index route it will go to the index.html page from now on and that's cool so that's intro to flask like i said in this playlist every friday we're going to be diving very deep into flash we're going to get into the nitty gritty we're going to learn how to do stuff why to do stuff we're going to learn all about all the different things in great detail and we're going to do that to begin with by building out a blog with flask so it's going to be a lot of fun and in the next video we'll dive in and really start building this thing out and getting some actual tangible stuff instead of these basic little nothing web pages in this video i just wanted to sort of wet your appetite and get started now last year i did another flask playlist and i was like i don't know 10 or 12 videos something like that it wasn't very long it just went over very basic stuff we're going to fly through that very quickly in the next couple of videos but if you don't want to wait a whole week you can go back and check out that last playlist the link is in the channel somewhere in the playlist section uh you can look at that but we're going to get into much greater detail in this playlist and it's going to be much longer we're gonna probably work on this for the next six months or so every friday and really really become expert in flask because flask is a lot of fun it's a great tool to have it's great for if you've got to build out a website very quickly you don't want to get bogged down in django flask is quick it's easy it's lightweight and it's a lot of fun so that's all for this video if you like to be sure to smash the like button below subscribe to the channel give me a thumbs up for the youtube algorithm and check out codingme.com where you can use coupon code youtube1 you get 30 memberships forty a dollars to access all my courses over 47 courses hundreds of videos in the pdf of all my bestselling coding books join over 100 000 students learning to code just like you my name is john elder from codename.com and i'll see in the next video

Channel: Codemy.com

Views: 17,271

Keywords: Python Flask, Flask, flask tutorial, flask python, flask vs django, Python Flask Web Development, Flask Friday, Flask Fridays, Codemy.com, Flask Codemy, Flask Tutorial #1, John Elder, John Elder Flask, Flask Web Development, flask web app, flask website, flask web development with python tutorial, flask web app tutorial, flask web development, flask website example, flask website tutorial, flask web app example, flask web application, flask web app python, flask framework

Id: 0Qxtt4veJIc

Length: 21min 0sec (1260 seconds)

Published: Fri Jan 15 2021