If you find typos or problems with the lab instructions, please let us know.

Note: Part 1 of this lab is individual work.

Step 1: A basic Hello World webapp using Flask

Flask is a Python module/framework that provides an easy way to get started with web programming.

The easiest way to get started is to try some small examples. Below is a small example of a Python program that uses Flask. There are seven lines of code here (not including the blank lines), and before the end of this document, we’ll explain every single part of every one of these lines.

This web application isn't very interesting — it puts the words “Hello World!” up in the browser every time you send it a request. But it provides a starting point, from which we can begin to do more interesting things.

To create the simple web app, do this:

• Create a new repl. It doesn't matter what you call it—this is just for practice

• In the main.py file, type these lines of code
  
  (You are encouraged to type them in rather than just copying/pasting; that will get the code in your head a bit more.
  But, if you want to copy/paste, it's fine; we can't and won't check up on you there.)
  

from flask import Flask

app = Flask(__name__)

@app.route("/")

def hello():

return "Hello World!"

if __name__ == "__main__":

app.run(host='0.0.0.0')

Note that sometimes, depending on browsers, platform, etc., if you copy/paste you may get extra blank lines between your code, i.e. something that looks like the image on the left below nstead of the image on the right. In that case, please take the time to remove the extra blank lines.

Though we won't mention it again, we'd really like you to remove the blank lines any time they pop up in copy/pasted code.

Now run the code, and you'll have a web app running!

To get this working, all you have to do is click Run.

Here is what the output in the terminal should look like (there'll probably be some extra output as well, but this line is most important):

* Running on http://0.0.0.0:5000/ (Press CTRL+C to quit)

If that works, great! This may not be very impressive, but it gets a little more awesome when you realize that you’ve just put up a local web server that you can connect to with a browser! A mini web browser window should open automatically in Repl.it for you to see this -- you should see the message “Hello World” come up in the browser.

Now: check in with your partner and verify that both of you were able to get a simple hello world app running before moving on.

NOTE: If you don't see "Hello World" in this little "mini browser" at the upper right hand corner of Repl.it:

• Some folks found, when testing this lab, that the mini-browser inside of repl.it didn't work in Firefox on Mac.

• It worked just fine in Chrome on Mac, though.

• In all cases, though, loading the app in a regular browser, as explained in the next step, worked fine. Keep this in mind throughout all six parts of this lab.

(2) Now copy the address in the mini browser inside the repl.it page, and paste it into a regular browser (e.g. Firefox, Chrome, IE, Safari), as shown below.

Does the URL work there?
If you refresh the regular browser, does it do the same thing in the Python Console window as refreshing the mini browser?

Step 3: Understanding all the lines of code

Ok, here is an explanation of each of the lines of code. Then, we’ll walk through how to do a few things that are a bit more interesting.

1) from flask import Flask

This code pulls in the definition of a new datatype called Flask (note the uppercase F) from a module called flask (note the lowercase f.) In Python, when you import something, you are telling the Python interpreter that you want to build your software on top of some software already written by someone else.

2) app = Flask(__name__)

This line of code is an assignment statement. The right hand side is evaluated, and then the variable on the left is set to the result of the right hand side. The right hand side, Flask(__name__), creates a new object of type Flask. The __name__ parameter is explained further in the box “About the First Parameter” on this page of the api documentation. We’ll defer the details for now, and just say: for very simple Flask applications, __name__ is always the correct choice.

3) @app.route("/")

The @ signals that what follows is a Python annotation. It indicates that there is some special way the following function definition should be handled. In this case, the annotation app.route("/") indicates that this function is called whenever we ask for the main page on this web server (i.e. "/". This will make more sense when we add other pages later.

4) def hello():

5) return "Hello World!"

Lines 4 and 5 are a regular plain old Python function definition. We can see that the function is called hello, and takes no parameters. This function returns a string, "Hello World!", which is used as the page to display for the main page of the web server ("/").

6) if __name__ == "__main__":

Line 6 has an if test that checks the special variable __name__ to see if it has the special value __main__. This is the mysterious “conditional script stanza”, which we aren’t going to explain in detail here (though if you are curious, here's an explanation).

Instead, we’ll just say that whatever “main thing” a Python code is supposed to do when you type python3 main.py, in this case python3 main.py should typically be wrapped in this if test. That makes your file much more useful, because then the definitions it contains can be included as a module in another file.

7) app.run(host='0.0.0.0')

Line 7 is the line that actually causes our web server to start running. The dot-notation app.run(host='0.0.0.0') tells us that run is a method of the object app. By putting () after it, we are making a function call to that method, and starting things in motion. The host='0.0.0.0' is necessary for Repl.it to recognize that you want to use Repl.it's browser window.

And after you Commit it (i.e. save it), it will look like this when formatted:

That's it for Part 1! Ok, what's next?

Next, we'll try to make an app that can actually run some code instead of just printing Hello.

That's in Part 2. which you may start now!

Links to: Overview Part 1 Part 2 Part 3 Part 4 Part 5 Part 6