Made withFlaskTutorial

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

C

Corey Schafer

Creator on the Flask channel

Watch on YouTube ↗

2.1M viewsMay 4, 201817:09 runtime

Learn how to build a full-featured web application from scratch using Python and the Flask micro-framework. This tutorial starts with an overview of the final blog-style project, covering user registration, login, profile updates, and post creation. You'll then dive into setting…

Chapters

#flask#tutorial#backend

Project Overview

This series will guide you through building a full-featured blog application with Flask. The final product will include:

User registration, login, and password reset via email.
User account pages with profile picture uploads and resizing.
Creating, reading, updating, and deleting blog posts (CRUD operations).

Initial Setup & Installation

Create a Project Directory: Create a new folder for your project (e.g., flask_blog).
Install Flask: It's highly recommended to use a virtual environment. Install Flask using pip:
```
pip install flask
```
Verify Installation: Open a Python interpreter and run import flask. If there are no errors, the installation was successful.

Your First Flask Application

Create a Python file (e.g., flaskblog.py) and add the minimal code for a Flask app:

from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello():
    return "<h1>Hello, World!</h1>"

app = Flask(__name__): Creates an instance of the Flask application. __name__ is a special Python variable that helps Flask locate templates and static files.
@app.route("/"): A decorator that maps a URL endpoint (/, the root of the site) to a Python function.
def hello():: The view function that handles requests to the / route and returns the response to be displayed in the browser.

Running the Application

There are two primary ways to run the development server.

Method 1: Using `flask run` (Recommended)

Set Environment Variables: Tell Flask which file is your application.
- macOS/Linux: export FLASK_APP=flaskblog.py
- Windows: set FLASK_APP=flaskblog.py
Run the Server: flask run

Important
Enable Debug Mode: For development, enable debug mode to get detailed error pages and have the server automatically reload when you save code changes. This avoids constant manual restarts. export FLASK_DEBUG=1 (or set FLASK_DEBUG=1 on Windows).

Method 2: Running the Script Directly

Add this block to the end of your flaskblog.py file:

if __name__ == '__main__':
    app.run(debug=True)

Then, run the file directly: python flaskblog.py.

Note
The if __name__ == '__main__': conditional ensures that the app.run() command is only executed when the script is run directly, not when it's imported into another module.

Defining Routes

Create New Pages: To create a new page, like an about page, add a new route decorator and a corresponding view function:
```
@app.route("/about")
def about():
    return "<h1>About Page</h1>"
```
Multiple Routes for One Function: You can assign multiple URLs to a single function by stacking decorators:
```
@app.route("/")
@app.route("/home")
def home():
    return "<h1>Home Page</h1>"
```

Project Showcase: A Full-Featured Flask Blog

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 I 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.

Environment Setup and Flask Installation

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 REPL 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 mkdir, 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 flaskblog.py, 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.

Creating a "Hello, World!" 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 __name__ can seem a bit confusing. __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 __name__ can be equal to __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!'.

Running the Flask Development Server

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 a cd command is the same on Windows as well. And now we're in the same directory where that flaskblog.py 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_APP=flaskblog.py. 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.

Enabling Debug Mode for Auto-Reload

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_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.

Alternative Method: Running the Script Directly

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 __name__ == '__main__':. And then within this conditional we can say app.run() and we'll run this in debug mode, so we'll say debug=True.

Now this conditional here can be confusing when you first see it. Like I said before, the __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 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 flaskblog.py 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 flaskblog.py and run that directly. If we run that, we can see that we get a similar output. It says that we're running on our local host in 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 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 flask 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.

Adding More Routes to Your Application

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 /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 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 '/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 /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 /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 /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 /home, then that gives us the home page as well. So those two routes are being handled by the same function.

Conclusion & What's Next

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 way is 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.