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 and 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 will 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 is a blog style of an application where different users can make different posts now these can be regular blog post 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 login 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 changes 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 you 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 back-end 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 gonna 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 and another framework then in the near future I’m also going to be releasing a series showing how to build the same site and 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 gonna 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 repple 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 m’kay Durer 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 and my text editor and i’m going to be using sublime text but you can use any the 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 than double underscore name it 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 a Prout decorator will handle all of the complicated back-end 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 Ford’s last year 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 that 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 dot 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 a 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 127th 0.01 and this is the IP address of your local machine and the 5000 here is the port number now this is a running webserver 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 dot 0 dot 1 was the IP address of our local machine there’s actually an alias for that IP dressed 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 one 2700 dot one 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 and h1 tags which are HTML heading one 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 shutdown 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 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 homepage 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 and 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 continue this conditional is only true if we run this script directly and I have a more detailed video on this concept if that’s still confusing to you so if we were to run this flash blog dot PI module with Python then it should come in here to this conditional and run this app dot 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 flask blog dot 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 localhost and debug mode so if we go back to our browser and refresh the page that we can see that that’s still working now running the module directly used to be how always ran flask applications but now the flask documentation uses the flask run command so I’ve been using that as well so the flask 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 that probably we’ll 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 forged slash about if I go there then we can see that we get this not found air and if we look at our command line that was running the server then we can see that we are last get requests 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 homepage route here and then change a couple of things here so for the route I’m going to say ford 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 homepage I’m just going to say about page so now we have a route at ford 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 and make sure the server is 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 air 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 ford slash home to go to our home page as well as just the ford slash so I’m going to copy this and paste another decorator right below it and just say ford 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 ford 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 it’s 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 comment 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 these this 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 who 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

100 thoughts on “Python Flask Tutorial: Full-Featured Web App Part 1 – Getting Started”

  1. Corey,
    Two questions please:
    1) When someone becomes a paid subscriber to your channel, is it safe to assume that you offer more technical tutorials than the ones you post for free ?
    2) I recently understood "well enough" the concepts of MVC (Model View Controller) and I want to put these concepts into perspective by building a simple project using Python, with an editor that enforces that MVC structure so I need help / guidance … Are we talking pycharm editor ? Maybe something else ? Maybe you already have a course as part of your paid subscribers you can recommend ?
    I would appreciate your feedback tremendously ..
    Thank you

  2. thank you! i couldnt get my flask app to run using git bash but it worked after adding
    if _name_ == "__main__":

    app.run(debug=True)

    at the bottom

  3. I have built the application thanks to your excellent videos. I have one key question.
    The "Our Sidebar" is currently a static place holder, are you planning a video on how to make it dynamic?
    I ask as I have tried to get it to e.g. update the latest post, but I cannot get it to display along with the current forms.
    Thanks again for an excellent series of videos .

  4. For those starting from scratch (not knowing how to install python or packages, not knowing what a virtual environment is etc.) I found this tutorial to be amazingly helpful https://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-i-hello-world
    After reading through the first page or so it should be much easier to follow Corey's video

  5. Thank you for these videos, I was wondering if there was anyway you could do a video on the testing for a flask web application, primarily this one?

  6. If you are using pycharm on windows use this after the hello world part and then run it. In the run it will then have a link to open the page.

    if _name_ == "__main__":

    app.run()

  7. I have the misfortune of trying this on my work computer running (shudders) Windows 10.
    Apparently, to set the environment variable in Windows, you need to type something a bit more complicated than what you describe
    $env:FLASK_APP = "flaskblog.py"

    Hope that helps anyone else who had trouble with that.

  8. Hey guys, I have completed this tutorial project up to video 6 i.e. User Authentication, you can find the working project on my github => https://github.com/ap4gh/coreyms_flaskblog_tutorial. If you go pass video 6, make sure to fork it and complete the project. 😀

  9. Thanks for the tutorial. but when I "flask run" on windows, this is the error I get (C:UsersOhotenii Augustineflask_blog>flask run

    * Serving Flask app "flaskblog.py"

    * Environment: production

    WARNING: Do not use the development server in a production environment.

    Use a production WSGI server instead.

    * Debug mode: off

    Usage: flask run [OPTIONS]

    Error: Could not import "flaskblog".)
    Please help me out… because I can't continue again

  10. Thanks a lot for your tutorial, it's helping me as a beginner but I tried and got stack on this error "python app.py

    File "app.py", line 9

    if _name_ == '__main__':

    ^

    IndentationError: unindent does not match any outer indentation level"

  11. Nothing happens when I type python into the terminal. I came back from the 4th tutorial to figure out why, but this doesn't have the answer either.

  12. Thanks for the great video!
    Even though I didn't run it in debug mode page still gets updated when I change the code, why is that?

  13. Hey, Corey. Is there a big difference between Django and Flask? What is more easy to start with? What is more powerfull? etc. Thx!

  14. I am using sublime text. Everything is right but in the debug mode , if __name__=='__main__' is giving an error. I am using windows machine.

  15. 7:34 – "export FLASK_APP=flaskblog.py" (Setting environment variable to the file we want to our Flask app to be)
    8:03 – "flask run command" (running our flask app)
    8:06 – flask webserver details
    8:45 – localhost
    9:13 – Updating code with HTML
    9:16 – "<h1></h1>"" (heading HTML tags)
    9:45 – Restart web server for changes to take effect
    9:52 – "ctrl-c" (To stop web server)
    10:10 – viewing source code in Chrome (If left click doesn't work use "view" tab in toolbar)
    10:22 – How to avoid having to restart web server every time you make a change (That is, debug mode)
    10:41 – Debug mode
    10:51 – "export FLASK_DEBUG=1" (Setting another environment variable; That is,for debug mode now))
    11:08 – Running application in debug mode
    11:47 – Running application with Python instead of environment variables
    12:05 – "if _name_ == '__main__':" (Running application with Python)
    13:12 – "python flaskblog.py"
    14:00 – Adding another route
    14:06 – Adding an "About" route
    14:10 – Trying to navigate to a route that does not exist yet
    14:21 – 404 response in command line from server
    15:36 – If you want multiple routes to be handled by same function (Simply add another decorator above function)

  16. Thanks alot Corey. To be honest you are the best teacher I have ever met and I'm confident after this course am going to finds a job. Thanks again.

  17. is there a reason that >>console>>(python3 -m flask run) worked but it wouldnt set the environment variable? It threw an error when I tried to set it in the exact same way…Im on a raspberry pi

  18. Great video! Thanks very much! One thing I'm curious is what happened behind the scene of the form. I'm not an expert in HTML, so I'd like to ask: When is the form validation done? Since the "register" route handles both the initial GET and the subsequent POST, I wonder whether the validation was done at the end of the GET, right before the submission, or at the beginning of POST after the same route caught the POSTed form data. I tried to print the POST body to the console by adding `print(request.get_data())` in front of `form = RegistrationForm()`, and tried a registration with an invalid email. It seems the invalid form content was posted without error attributes. So I was convinced that validation is done in the subsequent POST routes by `form = RegistrationForm()`. (I located that this line consumed the POST data because if I move the `print(request.get_data())` function after this line, I always got empty string printed on the console.) So the form constructor must have access to the request object, which is weird for me because request should live only in the route function, and if I didn't pass it to the constructor as an argument, how can it access the request object?

  19. When I run the flask….. it shows an error ! "Could not locate a flask application. You did not provide the FLASK APP environment variable and app.py module was nt found in the current dir"… how must I proceed further ?

  20. Hello Corey. In flaskblog.py you defined home and about function but didn’t call it, so when you run this file, how these functions are working?

  21. While I run this on my android phone by using pydroid 3? And when i'm running this code, it's showing attribute error in _main_

  22. In the register function there are 2 return statements. So as soon as the function is called, the return statement with render_template is executed and user is dircted to the register.html page. So when exactly is the control given back to the register function to execute the if statement and the second register statement.

  23. For anyone getting "failed to find Flask application" errors on Flask run… apparently flask is a keyword now so files with flask in them will not be recognized. I changed the file name to test.py and it works now.

  24. Top 5 YouTube Channels for Learning Programming?

    1. Corey Schafer
    2. Corey Schafer
    3. Corey Schafer
    4. Corey Schafer
    5. Corey Schafer

  25. when I run flask I get an error "eError: Could not locate a Flask application. You did not provide the "FLASK_APP" environment variable, and a "wsgi.py" or "app.py" module was not found in the current directory."

  26. If you're using Visual Studio Code, is it a good idea to just run it inside the integrated terminal or use command line of windows?

  27. Hello Corey, amazingly good video, keep it up!!!

    I am planning to build the website with the following features:
    • Business Type

    Fashion Accessories

    • Site map

    Standard site map…I can come to this later

    The graphics are extremely important (it should be very pleasing site)

    Functionality

    There are various categories of products

    • Cat1

    • Cat2

    • Cat3

    • ….Catn

    In Every category there are various products

    • Prod1

    • Prod2

    • Prod3

    • ….Prodn

    Each Prod have various attributes

    • Attrib1

    • Attrib2

    • Attrib3

    • ….Atrribn

    There are two kinds of clients

    • Retail

    • Wholesale

    For wholesale there are various clients:

    • Client1

    • Client2

    • Client3

    • ….Clientn

    There is one Admin

    • Can create and a lot username and password to clients/ or clients can create themselves and admin can approve it.

    • Who can add the products, there category, photos, and attributs

    • He can create the customized filters for each clients, for not to show all the products and all the stock to all the clients.

    • For eg. Client1 (Filter: Prod1 (quantity1) and Prod2(quantity2)

    Client2 (Filter: Prod2 (quantity2), Prod4(quantity4), and Prod7(quantity7)

    Admin should be able to adapt the prize and quanity for every client

    And so on

    • These rights are given for the limited amount of time, and client should be able to put his choice in the basket, see the total and individual costs/ and can see the approximated freight cost/ and finalise the order.

    • Client can see various photos of the product

    • Client should be able to zoom in the photo (downloadable protected)

    • Client can choose to pay online / or pay later/ or pay by cheque/ or on delivery etc

    Retail client can see the products and quantity directly on the website/ line any other ecommerce site, he can choose/ pay and finalize

    So the admin has to manage different godowns of stocks

    • Godown1: for retail clients

    • Godown2: for wholesale clients

    • Godown3: virtual godwn created depending upon the filters.

    Content Type

    The content is mainly the photos of product, there are high quality photos , size form 2M to 4M

    Storage

    The Phots can be stored on Google Photos/ or any other platform

    Platforms

    The site should be compatible with

    • windows/mac/linux

    • PC/tablet/Phones (iphone/android/windows Phone)

    • Almost all the know browsers (Safari/Chrome/Edge/Mozzarella etc)

    Content Language

    French/ English…to start with

    Note: this is the first (not final) version of the requirements.

    Question: So since I am new to webdesing, I have no clue where to start from. The whole idea is to create web app with fined grained user rights (for clients).
    I know basics HTML/ CSS/Python
    Shall I go for platforms like Wix/shopify etc or not. Please give me clarity

    Regards
    Rahul

  28. Thank you so much for this. I've been trying to find a good flask tutorial and getting stuck too far in the beginning. I knew I should have checked to see if you made a tutorial first!

  29. First try while running the about page: 
    AssertionError: View function mapping is overwriting an existing endpoint function: hello
    Second try after waiting 10 minutes, reading a bit but changing nothing… not even restarting server or anything:
    about page!
    … well it works
    Great job btw

  30. Payment options is not their. What if we need to add PayPal options??
    Please create a video on that also!

  31. Have been trying to learn Flask for my Web App Dev group project, and never really understood the decorator concept or when to set my environment variables. Thank you so much for these tutorials!!

  32. I do flask run and it says flask is "not recognised" even though I did everything the video said, why is it saying this even though I downloaded python and set the file to flask

  33. For some reason, the socket is not closing when I use the terminal built-in with VS Code. Closing the server by hitting Ctrl+Z and running "flask run" again gives me [ER082]: Address already in use. Issue resolved by restarting VS Code.

  34. Thank you so much for the detailed introduction! Going through every step of the way was exactly what I needed to get Kickstarted with this topic!

  35. If anyone one windows has an issue where the server won't start, it helped me to run the server as a module. so instead of just 'flask run', type 'python -m flask run' and it worked.

  36. I cracked the interview as fresher in Django. I have self-taught my self. Most of the credit goes to you @corey schafer. Now, back to here, to learn flask.

  37. Hi Corey, first of all thanks for your videos, they're awesome!! Now… Do you have/recommend/would be interested in making one tutorial talking about user access control in Python/Flask? i.g: Let's say we have an application with 4 menus Users, Reports, Salaries, Contracts, and we have an Admin that has access to perform CRUD to all menus, a Lawyer that can only access the "Contracts" menu and perform CRUD there, and finally a "Lawyer-Assistant" that can only access the "Contracts" menu but cannot delete any contracts. To give these access to users an Admin would select the user under "User" menu and go to let's say "Permissions" where there would be a list of all menus (with check boxes) in the system…. Hope I could express myself. If you could at least talk about the concepts involved into something like this in a video I would be already be grateful. Thanks a lot 😀

  38. ‘Flask’ is not recognized as an internal or external command, operable program or batch file

    Anyone know how to fix?

  39. PS C:Users3lw3utDocumentsPython ScriptsFlask_Blog> set FLASK_APP=flaskblog.py

    PS C:Users3lw3utDocumentsPython ScriptsFlask_Blog> flask run

    * Environment: production

    WARNING: This is a development server. Do not use it in a production deployment.

    Use a production WSGI server instead.

    * Debug mode: off

    Usage: flask run [OPTIONS]

    Error: Could not locate a Flask application. You did not provide the "FLASK_APP" environment variable, and a "wsgi.py" or "app.py" module was not found in the current directory.

    Corey, this is the error i actually get…

  40. Can you please help me to run your example in docker container ? Also planning to do below steps : 1. Read a file name and search word from user in python and print the lines which had that word user given as a service. 2 Run this service inside docker container 3. We have to call this service from angular front-end page ….Are these steps are possible ? Any help appreciated….

  41. at 7:58 if You're using Windows PowerShell (not CMD), use $env:FLASK_APP = "hello.py", same with debug – not 'set' but '$env:'

  42. can anyone please explain me why we have to pass _name_ while instantiating Flask App–> app = Flask(__name__) at 5:45 ???

  43. it seems like the Flask homepage has a different "Hello World" code now…

    '''
    from flask import Flask, escape, request

    app = Flask(__name__)

    @app.route('/')
    def hello():
    name = request.args.get("name", "World")
    return f'Hello, {escape(name)}!'
    '''

Leave a Reply

Your email address will not be published. Required fields are marked *