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