Python Flask Tutorial: Full-Featured Web App Part 1 - Getting Started

hey there how's it going everybody in this series of videos we'll be learning how to build a full-featured web application using the flask framework in python so flask is an excellent micro framework that really makes it enjoyable to work with these back-end web applications and also at the time of this recording they just released version 1.0 of the framework so it's a great time to learn this so first of all let me show you what we'll be building in this series of videos and then we'll get started learning how to actually put all this together so this is the application that we'll be building in this series of videos and you can see that it is a blog style of an application where different users can make different posts now these can be regular blog posts or they can be you know smaller like twitter updates or whatever you want to do with it so let's go through a little tour of the features of this application so we can see that we have a user management system so we can register new users and once a new user is registered we can go to login and if they have forgot their password then they can get a password reset email sent to their email address so if we log in here so i'll log in with the email address that i used to sign up for the application here and once i sign in at the top here we can see that we have a few new options so if i go to my account then we can see the account information that we have here we also have the ability to update profile pictures to where we save pictures on the backend web application so if we update that then we can see that that change is there and that picture also automatically gets resized to save space on our web server so we also have the ability to write new posts here if we go to the home page we can look at other people's posts or if we go to a post that we have written then we can see that we can actually update and delete our post here so if i update this post that can say my latest updated post and post that if i go back to the home page then we can see that that post was updated and if i wanted to delete a post i could just come in and delete and delete and we can see that that post is no longer there so that's a quick tour of what we'll be building and building an application like this is a great way to learn the ins and outs of a framework because we're going to have to deal with databases and also accepting user input from forms and saving pictures onto the backend file system and sending emails and all kinds of different things so we're really going to learn a lot about the framework by building this now i'm going to mention this several times throughout the series but if you're following along and would like to download the source code of each step in the process then i will have links to the source code of each video in the description section below so that you can download that if you'd like and also if you'd like to know how to build this same website in another framework then in the near future i'm also going to be releasing a series showing how to build this same site in django and on pyramid and possibly other frameworks as well okay so let's go ahead and get started learning how to build this using flask so i'm just going to close out of this application and open up my terminal here so first of all let's start off by installing the packages that we need to get started out so you can do this in a virtual environment or in your default python environment but it's always a good idea to separate different projects into their own virtual environments now i'm mainly going to focus on flask in these videos so if you need to install python or want to learn how to work with virtual environments or are wondering how i set up my text editor or anything like that then i'm going to put links to those videos in the description section below but i'm not going to go into those in detail in this series i'm just going to assume that you're specifically ready to start learning flask okay so first of all let's install flask and to do this we can do a simple pip install so i'll say pip install flask and once that is installed let's make sure that it installed correctly so we can do that just by starting up our python repo here and then importing flask so if we say import flask if that doesn't give you an error then that installed correctly so now we can exit out of that interpreter and now let's create a new project from scratch so i'm here on my desktop but you can create this project anywhere you'd like so i'm going to create a new directory on my desktop so within a mac on my machine this is going to be mk der and i'm just going to call this flask blog now on a windows machine that is going to be a different command but you can just create the folder on your desktop like you would any other folder and i'm going to open up this new project directory in my text editor and i'm going to be using sublime text but you can use any editor that you'd like so i'm going to open up sublime text go to file open and then open up this directory okay so now we have a completely empty project now within our project directory here i'm going to create a new file and i'm going to call this flask blog dot pi and now we should be ready for a basic flask application so i have the flask website pulled up here in my browser so if i go to this then if you go to the front page of their documentation then they have about the simplest application that you can start with so let's copy and paste this into our file and i'll explain what's going on so i'm going to grab this code here and paste this into our sublime application i'm going to make this text a little larger here okay so at the top here we're saying from flask import flask so we are importing this flask class and then we're creating this app variable and setting this to an instance of this flask class now passing in the double underscore name can seem a bit confusing double underscore name is a special variable in python that is just the name of the module now if we run the script with python directly then double underscore name can be equal to double underscore main and we'll see that in just a second basically that is so flask knows where to look for your templates and static files and things like that so now we have an instantiated flask application in this app variable now we can create our routes so our routes are what we type into our browser to go to different pages so for example you've probably been to websites that have about pages and contact pages and in flask we create these using route decorators so decorators can be a confusing topic but you don't really need to understand how they work in order to use flask so i would recommend learning at some point just because they're nice to know but if you don't really understand them then don't worry too much about it for this series basically decorators are just a way to add additional functionality to existing functions and in this case this app.route decorator will handle all of the complicated backend stuff and simply allow us to write a function that returns the information that will be shown on our website for this specific route so this forward slash here is just the root page of our website or you can think of it as the home page and we are simply returning the text hello world so this is normally where we'd want to return some html but we'll start off with this text just to make sure it all works so when we start our application if we navigate to our home page then it should show us this text hello world so now let's run this so you can see how this works so i'm going to pull back up my command line here and now i'm going to navigate to my project directory so i'm going to do a cd flask blog and the cd command is the same on windows as well and now we're in the same directory where that flask blog.pi module lives now before we run our application we need to set an environment variable to the file that we want to be our flask application so in my case i can say export flask underscore app is equal to flask blog dot pi now that's the command that you use on mac and linux if you're on windows then that is going to be equal to set flask app instead of export so you can just run that and now with that environment variable set we should be able to run our flask application just by saying flask run so if that worked and you don't have any errors then you should see this message that says that it's serving your flask app on 127.0.0.1 and this is the ip address of your local machine and the 5000 here is the port number now this is a running web server this actually comes with flask itself and you have to leave this running while you're viewing your site or else you won't be able to see it so if i copy this address here and go back to my web browser and paste this in then we should see our sample application now this is a little small here but we can see that we got the text hello world and that is what we returned from that home route now when i said that this 127.0.0.1 was the ip address of our local machine there's actually an alias for that ip address called localhost and i like using that more than the ip address itself so if i go back and paste in that url again and replace this 127.0.0.1 with localhost and hit enter then we can see that that returns the same route and gives us the same results okay so now let's try to update our code to include some actual html so i'm going to wrap our text here in h1 tags which are heading tags and this should make the text look a lot larger so i'm going to open up our flask blog and instead of returning just hello world i'm going to wrap these in h1 tags which are html heading 1 tags so we can close that out and save it and if we go back to our browser and reload that page then we can see that the changes did not take effect so we actually need to stop the web server and then run it again so i'm going to pull up my command line here and stop this using control c and then rerun that with flask run again and then go back to my web server reload that page then now we can see that those changes took effect and we now have our text and our h1 tags and within chrome and other browsers as well you can view the source code of any html page just by right-clicking and then going to view page source and if i do that then this is a little small here but we have our text wrapped in h1 tags okay so most likely when you're developing a site you're going to be making a lot of changes to your application and it would be a major pain to have to shut down and restart the web server each time you make a small change and we can actually get around this and have the server show changes without restarting our application just by running our application in debug mode so here is one way to do this so if we stop our current application so i'll pull up our terminal and hit control c now i'm going to clear out the screen here then if we set another environment variable so i'll say export this one is called flask underscore debug and i'm going to set that equal to 1 and hit enter and remember on windows you use the word set instead of export for an environment variable so now if we run this application so i'm going to go back and do a flask run again then right away we can see that there's some additional information here in debug mode that wasn't there before so if i go back and refresh our page in the browser then we can see that our application is still working and now let me change some text in our code so i'm going to go back and instead of this hello world i'm instead going to change this to home page and save that now without restarting the web server like we did before i'm just going to reload my browser and you can see that since we're in debug mode that those changes reloaded automatically and we didn't have to restart that web server like we did before okay so i also wanted to show you that if you don't want to work with those environment variables then there's another way that we can run our application directly using python so let's go back to our application here and to do this let's go down to the bottom of the file and we're going to want to put in a conditional that says if double underscore name is equal to and in quotes here double underscore main and then within this conditional we can say app dot run and we run run this in debug mode so we'll say debug is equal to true now this conditional here can be confusing when you first see it like i said before the double underscore name is main if we run the script with python directly but if we import this module to somewhere else then the name will be the name of our module so this continu this conditional is only true if we run this script directly and i have a more detailed uh video on this concept if that's still confusing to you so if we were to run this flask blog.pi module with python then it should come in here to this conditional and run this app.run statement so let's do that now so i'll pull up the command line again and i'm going to stop my server here and clear out this page and now instead of doing flask run like we did before that uses the environment variables we could instead just call this script directly with python by saying python and then flaskblog.pi and run that directly if we run that we can see that we get a similar output says that we're running on our local host and debug mode so if we go back to our browser and refresh the page then we can see that that's still working now running the module directly used to be how i always ran flask applications but now the flash documentation uses the flask run command so i've been using that as well so the flash command with the environment variables also allows us to use the flash shell for some debugging and we'll see a couple of examples of that in later videos now in this series i probably will be running the application directly with python just because i don't want to keep setting those environment variables again whenever i shut down my terminal okay so now that we have this running now let's add another route so that we can see how easy this is using flask so let's add an about route to make an about page for our website so if i try to navigate to an about page right now so that would be forward slash about if i go there then we can see that we get this not found error and if we look at our command line that was running the server then we can see that we our last get request returned a 404 response and that 404 response means that the page doesn't exist so let's create that now so i'm going to open up sublime text and now i'm just going to copy and paste this home page route here and then change a couple of things here so for the route i'm going to say forward slash about and we also have to change the function name here so that's something that's easy to forget so just be sure that you do that and i'm just going to call that function about and within here instead of saying home page i'm just going to say about page so now we have a route at forward slash about and this about function is returning the information for that page and in this case it's just an h1 heading with the text of about page so let's see if this worked so let's look at our command line to make sure the server's still running and it is so if we reload this page in the browser then we can see we no longer get that 404 not found error and instead it returns the about page text for our route so now we have two routes here we have this about page and if i take that about away and just go back to our home page then we can see that that route still exists as well now if we ever wanted to have multiple routes handled by the same function then it's as simple as just adding another decorator so let's say that we wanted a route of forward slash home to go to our home page as well as just the forward slash so i'm going to copy this and paste another decorator right below it and just say forge slash home and i'm also going to change the function name here from hello to home then now if we pull back up our browser here and reload the home page we can see that that still works but also if we go to forward slash home then that gives us the home page as well so those two routes are being being handled by the same function okay so i think that is going to do it for the first video now we know how to get a flask application up and running and also how to create some basic routes and in the next video we'll learn how to return some more complicated html code using templates and also how to pass variables to our web page but if you have any questions about what we covered in this video then feel free to ask in the comments section below and i'll do my best to answer those and if you enjoy these tutorials and would like to support them then there are several ways you can do that the easiest ways to simply like the video and give it a thumbs up and also it's a huge help to share these videos with anyone you think would find them useful and if you have the means you can contribute through patreon and there's a link to that page in the description section below be sure to subscribe for future videos and thank you all for watching you

Channel: Corey Schafer

Views: 1,261,850

Rating: 4.9766936 out of 5

Keywords: python, flask, flask tutorial, python flask tutorial, python flask tutorial for beginners, flask tutorial for beginners, python tutorial, flask getting started, flask hello world, hello world, flask project, python web, python web framework, web framework, flask web framework, python web application, web application, corey schafer, python framework, flask framework, python (programming language), python flask, python programming

Id: MwZwr5Tvyxo

Length: 17min 8sec (1028 seconds)

Published: Fri May 04 2018

Reddit Comments

[u/evilmorty2000]

Nice series !!!

[u/Bakanyanter]

Many thanks for this! I couldn't find many Flask 1.0 tutorials but now I can finally get to learning Flask!