Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
      You have completed Flask with SQLAlchemy Basics!
      
    
You have completed Flask with SQLAlchemy Basics!
Preview
    
      
  Start creating a basic website using Flask.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
                      Are you ready to jump
into the world of flask?
                      0:00
                    
                    
                      Let's start with importing flask.
                      0:03
                    
                    
                      From lowercase f,
import flask with an uppercase F.
                      0:06
                    
                    
                      To start our site, we'll need to
create a new variable called app,
                      0:14
                    
                    
                      and set it equal to Flask and
pass in Dunder name.
                      0:19
                    
                    
                      Dunder name refers to
the namespace this is running in,
                      0:25
                    
                    
                      we will be running this
in app.py directly.
                      0:29
                    
                    
                      So the namespace will be Dunder main.
                      0:33
                    
                    
                      If we were to import this
file to be used elsewhere,
                      0:36
                    
                    
                      it would take on the name of
the file it is located in.
                      0:39
                    
                    
                      In this case, app for app.py.
                      0:43
                    
                    
                      Now that we've created our app,
let's create our first route.
                      0:48
                    
                    
                      A route from the user side is just
like a URL, like teamtreehouse.com.
                      0:52
                    
                    
                      From the application side, a route is
a command to run a specific function,
                      0:58
                    
                    
                      which then returns
the response to the user.
                      1:02
                    
                    
                      To create one,
we'll have to use a decorator.
                      1:06
                    
                    
                      It looks like this.
                      1:09
                    
                    
                      @app.route, and
we're gonna give it a slash.
                      1:11
                    
                    
                      In simple terms,
decorators are functions that wrap around
                      1:18
                    
                    
                      other functions and
let you do things with them.
                      1:23
                    
                    
                      Next, we'll define
a function called index.
                      1:28
                    
                    
                      This is the function our
decorator wraps around.
                      1:38
                    
                    
                      Index is the typical name used for
the homepage.
                      1:42
                    
                    
                      And it's a pattern you'll see a lot.
                      1:46
                    
                    
                      Inside this function,
we'll return a string
                      1:47
                    
                    
                      that says, Hello from Pet Adoption.
                      1:53
                    
                    
                      Here, the app.route function works as
a part of the request response cycle.
                      1:57
                    
                    
                      When someone requests our apps homepage or
                      2:06
                    
                    
                      the root route,
this decorator will call our function,
                      2:11
                    
                    
                      which will then send
a response of our string.
                      2:17
                    
                    
                      Now before we run this,
we need to tell the app to well run.
                      2:23
                    
                    
                      I'm going to place this inside of
a Dunder main at the bottom here.
                      2:29
                    
                    
                      We're going to use our app
variable to call the run method.
                      2:44
                    
                    
                      This method is going to
take a few parameters.
                      2:49
                    
                    
                      First, we're going to set debug to true.
                      2:52
                    
                    
                      This will restart our server
every time we change our code,
                      2:59
                    
                    
                      which is a nice little feature
that saves us some time.
                      3:02
                    
                    
                      Next, we're going to give it a port and
a host.
                      3:07
                    
                    
                      This is like the address
the website will be working on.
                      3:10
                    
                    
                      We're going to use a port of 8000,
and a host for
                      3:14
                    
                    
                      those working locally of 127.0.0.1.
                      3:20
                    
                    
                      If you're working in workspaces,
then this needs to be all zeros like this.
                      3:26
                    
                    
                      Since I'm working locally,
I'm gonna save my file with the 127.0.0.1.
                      3:32
                    
                    
                      Run the file python3 app.py.
                      3:40
                    
                    
                      Again, if you're on Windows or
in workspaces,
                      3:42
                    
                    
                      you may not need this 3 here and run it.
                      3:46
                    
                    
                      And you can either type in this
address here into your browser like
                      3:48
                    
                    
                      Google Chrome or Firefox,
whatever you want to use.
                      3:53
                    
                    
                      Or if you have the option,
you can do a command click or
                      3:56
                    
                    
                      control click if you're on Windows,
to automatically open this up.
                      4:00
                    
                    
                      Now if you're working in workspaces,
                      4:08
                    
                    
                      you'll need to click on this little
eye up here in the top right corner.
                      4:10
                    
                    
                      Click on the matching port and
this will open up your website.
                      4:14
                    
                    
                      And awesome,
our message is being sent to the user.
                      4:25
                    
                    
                      It seems like magic, right?
                      4:30
                    
                    
                      Well, maybe not so much anymore,
                      4:32
                    
                    
                      especially now that you
know how this works.
                      4:34
                    
                    
                      But it can still feel like it sometimes.
                      4:36
                    
                    
                      This works because you've just
made the first request response.
                      4:39
                    
                    
                      By navigating to the matching address,
                      4:43
                    
                    
                      you've requested the homepage
route from our application.
                      4:46
                    
                    
                      And it sent back the response, which
is our Hello from Pet Adoption string.
                      4:51
                    
                    
                      This all happens in
a matter of milliseconds.
                      4:59
                    
                    
                      Nice work.
                      5:03
                    
                    
                      Now, I challenge you to create
another route on your own.
                      5:04
                    
                    
                      You've got all the tools
here that you need.
                      5:09
                    
                    
                      It should have a different
location from the homepage,
                      5:12
                    
                    
                      but it should still start with the slash.
                      5:16
                    
                    
                      The function you create should
also have a unique name,
                      5:19
                    
                    
                      try to name it something
that matches the page.
                      5:22
                    
                    
                      This is the pattern you'll want
to work with moving forward.
                      5:26
                    
                    
                      Pause me and give it a go.
                      5:30
                    
                    
                      I made a cat route and sent back meow.
                      5:34
                    
                    
                      In the browser,
I can see this by calling that route/meow.
                      5:39
                    
                    
                      And there it is.
                      5:45
                    
                    
                      Check the teacher's notes for more
information on decorators and namespace,
                      5:50
                    
                    
                      if you would like to dive
deeper into those topics.
                      5:55
                    
                    
                      If you're saving your
work in a GitHub repo,
                      5:58
                    
                    
                      now would be a good time to add,
commit and push your work.
                      6:01
                    
                    
                      Before you leave, let's
check out Flask's documentation.
                      6:05
                    
                    
                      On their website, they have a quickstart.
                      6:10
                    
                    
                      You'll notice their quickstart code
looks a lot like what we've created.
                      6:13
                    
                    
                      Many popular frameworks and
                      6:18
                    
                    
                      libraries include quickstarts to
help show you how to get started.
                      6:19
                    
                    
                      There's some excellent information here.
                      6:23
                    
                    
                      So, take some time to read or
scan through it.
                      6:26
                    
                    
                      Don't worry about needing to
understand every detail of the page.
                      6:30
                    
                    
                      We're just getting started.
                      6:34
                    
              
        You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up