Setting Up VS Code for Flask

Lesson double zero, set up vs. Code. So set up a new vs. Code project—we just did that. Set up a virtual environment in the terminal—that's what we're about to do now—and install some modules or packages, including Flask and OpenAI.

And we're going to write a Hello World Flask app. Actually, we don't need the OpenAI module yet, but we do need Flask right out of the box, first lesson. And the goal, as is typical in programming, your first task in almost every programming language is to try to get the famous phrase “Hello World” to show up somewhere.

We're going to try to get Hello World to show up in the browser, but dynamically using a Flask app. So step one, set up a new vs. Code project. We'll be typing our Python code in vs. Code.

Download and unzip the AI for Python course folder. Yeah, I'm reading out of the book, but I wrote the book—I'm allowed to. Okay, JK.

Anyway, put the folder in Documents. I always encourage my students not to just work out of Downloads. So download, yeah, but then get the thing, unzip it, and get it out of your Downloads, right? Put it into Documents, please.

Then we're going to launch vs. Code, which we've already done. File → Open Folder, already done. Browse to your AI for Python class folder—done.

Click Open to return to vs. Code, where the project folder will be open. We should actually be right here. That is lesson zero, step one.

So hopefully you got all that and you're ready to go. So next, what we're going to do in step two—and of course, now when I'm teaching in a real live course, I'm always stopping, checking with the students to make sure they got everything. But of course, in this scenario where you're self-paced, you'll just need to pause and go back for any of these little moves.

Carrying on to step two, we're going to set up what is known as a virtual environment in the terminal. Now, don't be daunted by any of these terms, okay? There are a lot of scary-sounding terms in computers and computer programming. They're meant to make the Programmers sound a lot smarter than everybody else.

But the fact is, a lot of these fancy terms are for relatively basic concepts. So what a virtual environment does is it makes a little capsule in your system that's kind of sealed off from the rest of the system—at least as far as your project’s so-called dependencies are located. So Flask, for example, OpenAI, other modules, libraries, dependencies—things that you need to install and import—you want to bring those into a virtual environment so they're not spilling out into your entire computer system, hogging memory, bogging things down, or perhaps conflicting with other installs.

We've got this little sandbox virtual environment to keep our project’s so-called dependencies isolated from others. We're going to be typing commands in the terminal to do this—so you get to be really extra cool because you're typing in the terminal, which is what all the cool-kid Programmers are all about. So in vs. Code, let us choose Terminal → New Terminal.

Right, so here we are. Now, the terminal is a standalone program that you can just launch, but it's also built into vs. Code. It's in your Utilities, actually.

If you go into Applications—if you're on a Mac—Utilities, there's this thing called the Terminal, which you can just open, and you could type in this thing. But we don't want to do that. We want to stay in vs. Code.

We're going to go to Terminal → New Terminal. And there's this little invisible border you can kind of mouse over and pull stuff up. If any of this stuff pushes the terminal away, just click on it—click, click, click. Tasks closed—there you go, okay.

When you're in the terminal—also called the CLI, the Command Line Interface—the first thing you will see is your user, like your system username. “Brian McLean”—that is the name of my hard drive, basically my home.

And then there will be a further path ending in the name of the folder that you're in, which is this thing: AI for Python. Okay, so that is where we are. Now, it's going to know to take you there automatically, but if for some reason it didn't, you'd need to do what's called “cd” into there.

You know, like move—you can navigate into various folders. We're not going to get into that. It would be really cool if we could spend time learning about the terminal right now, but I'm just going to assume you're looking at this because that is the default.

You're in vs. Code, you have your project open. When you go to Terminal → New Terminal, you don't have to navigate anywhere. That's the nice thing—it's already right there.

And by the way, this Explorer can be opened and closed too, all right? And widened and collapsed as well. So in the terminal, what we want to do first is create a virtual environment. Now it's different on Windows and on Mac.

The Mac and Windows are different. If you're on the Mac, we're going to make a virtual environment, which installs dependencies and modules locally, not globally. We're going to type the following and hit ENTER:

If you're on the Mac, type: `python3 -m venv`—again, “venv” for virtual environment. But if you're on Windows, you type `py` instead of `python3`. But first, there is a Windows Terminal setup thing you need to do. So in the terminal at right—this is only if you're on Windows; I’m not—

So I don’t have this, but I have the screenshot for you. Go to the right, look for PowerShell and the plus sign. If you don’t see PowerShell, at least the plus sign with the dropdown menu, click the dropdown and choose Command Prompt.

So you're switching from PowerShell to Command Prompt. And then what you type won’t throw errors like it will otherwise. So this is one thing that really messes Windows users up right out of the box.

It’s very typically the case that whenever you're doing a new tutorial-type thing—like we're doing—that you get the most messed up, ironically, right? You'd think Lesson 0, Lesson 1 is going to be the easiest thing. It’s actually quite often the hardest thing because people just get stuck. It doesn’t work.

The setup didn’t work. So how can I do all the rest of it? So I’m going to type the Python 3 (Mac) command and take it from there. Dash M for message, venv, venv.

So basically what we're doing—the reason we're typing “venv” twice—is `-m` is for “module.” We’re basically naming our virtual environment “venv.” Hit ENTER.

And what should happen is—not a lot’s going to happen here in the terminal—except you get a new line. But more importantly, over in the Explorer, you've got yourself a brand-new folder that you don't want to mess around with. I mean, certainly don’t go edit anything in here.

“venv”—it should build you a venv folder. So to get the venv folder, you're absolutely in business. So far, so good.

So check vs. Code to confirm that you now have a venv folder. All huge accomplishments. Really, honestly, just that much is big.

Now what we have to do is activate the virtual environment. And we’re going to type the following in the terminal. The Mac command will be: `source venv/bin/activate`.

The Windows command is: `venv\\Scripts\\activate` (note the capital “S”). And again, you need to have done the Command Prompt move in Windows—switching from PowerShell to Command Prompt—for this to work. So here we go.

We're going to say: `source venv/bin/activate`. Fingers crossed. Believe-it-when-you-see-it kind of deal, right? Aha—it worked.

How do we know? It now says `(venv)` over here on the left. Windows users—here's the Windows view (since I'm on a Mac). I've got a little screenshot for you.

So Windows users first need to do the following: at the right, next to PowerShell, click the plus arrow and choose Command Prompt.

As said—I mean, I just keep saying it because it's so important—Windows view after successfully setting up the virtual environment. You can see “Command” over there instead of “PowerShell.”

And it’s going to say—you will have typed `venv\\Scripts\\activate`, and it’ll say “(venv)” over on the left to show that you’re in the virtual environment.

And the Mac version is here, right? I keep the screen a little bigger. Yeah, all right, I'm going to keep making sure the code is a little bit bigger because I've done tutorials where—hey, this is great—too bad the code's too small. I can't read it.

So I'm going to always try to remember to keep the code nice and big. And it’s a trade-off, right? The bigger the code, the less of it you can show at once—but this is better. All right, “(venv)” should appear in the terminal.

Confirming that you have—should appear at left in the terminal, in the Command Line, terminal Command Line—we'll call it—in a new terminal Command Line. How's that? Confirming that you have successfully made the virtual environment. You made it—and you entered it, more like it. You didn’t just make it.

You made it before with `venv`, and then you entered it. You activated it. Now that we have our venv, we are in our little sandbox. We are going to proceed to install required dependencies, which are modules and packages.

There is something called pip, which stands for “Pip Installs Packages.” So it’s kind of funny that some of these computery acronyms have the acronym as the first thing in the acronym. It’s called a recursive acronym.

Anyway, pip is a standard tool for installing Python packages and their dependencies from the Command Line in a secure manner. But it’s already installed. You go to venv—you’ll see it.

There it is—pip. But what we want to do is make sure that we have the most recent version—which we probably do—but we’ll run this line anyway. We’re going to say: `pip install—upgrade pip`.

But if you are on Windows, and if you already have pip installed, the upgrade attempt may give you an error. In that case—type this regardless of Mac or Windows—and if you get an error on Windows, type this alternative instead. Actually, on Windows, just type this:

`Python -m ensurepip—upgrade`

Double dash—boom—already satisfied. I mean, I’ve been using the latest versions of stuff for my own purposes, but that’s good. Green, no errors.

If it didn’t work, you'd see this big thing of red lines of code. It says “Successfully uninstalled, Successfully installed.” It basically uninstalls the old one and installs the newest one.

And hopefully that’s going to be working for you on Windows as well. Regardless of Mac or Windows, you should see a “Successfully installed” message if it does work—and that’s really important.

So another hurdle—you get that in the rearview mirror—you’re doing great, honestly. So the next move, now that we’ve got our pip install up-to-date, we are going to install Flask, which is a Python back-end server application.

This is how servers—this is the… I mean, in JavaScript, this would be Node, okay? A JavaScript Node Server. Flask is a back-end server. It has the ability to serve pages, write to a database, send requests, and handle results.

It’s essential—it’s a server. It’s pretty, you know, fundamentally important here. We’re going to next install Flask.

So let’s give that a go: `pip install flask`—all lowercase. Should be the same on Windows, I hope.

Boom—there you go. Successfully installed. It also installed this thing called Jinja, which is a templating engine for rendering HTML—installed stuff.

Successfully. Okay—we’re moving along. What we’re going to do now is write a Hello World Flask application.

We’re going to spin up, as they say, a Flask server and set up what is called a route. A route is a destination in the browser, like a webpage, a URL, a web address. The code for each route contains a function, which runs automatically when the route is hit.

When you hit the route—when you land on the webpage—a function runs and does stuff. Keeping it simple to start, we just want our route function to return “Hello World”—a return value of the function. This is why it’s kind of important to know some programming—to understand what a return value is.

It’s basically the output of a function. And a function is some code that doesn’t run until you call it. So this piece of code we have—our function—will only run when you hit the route.

The triggering device—not a button click or something—but rather the landing upon a webpage, the reaching of a web address, will trigger the function. It’s just like getting to the front door of someone’s house triggers the dog to bark at you or something. It’s like—you go somewhere, and something happens.

You go to this destination on the web—our homepage of our app—and the function runs and returns “Hello World” as the output. The return value will just appear in the browser. So you’ll get this little piece of text in the browser that says “Hello World.”

We’re going to make a `.py` file. All Python files have an extension of `.py`. We’re going to make a file called `server00.py`. You can call these anything you want, but that seems like a good name for Lesson Double Zero. And this is going to be in our vs. Code project folder.

We will go here. We’re going to make a file and call it `server00.py`. That’s a file ready for editing. In the file, we’re going to first import Flask.

So the way it works is: first comes the install, then comes the import. We’re going to say: `from flask import Flask`—“flask” being the lowercase module we installed, and “Flask” being the capitalized class/object we are importing from that module.

So from `flask`, we’re just importing `Flask`. The Flask server itself is pretty big. It’s got a lot of things.

We’re importing one small part of it. It’s kind of like going to a toolbox full of socket sets and wrenches and just taking the one wrench. You know, there are 50 wrenches—you just take the one you need.

We’re going to do that. And next up, we’re going to instantiate the Flask application by calling the `Flask()` function.

That `Flask` (capital F) is a class—it’s the main object of the Flask module. And by writing the name of it with parentheses after it, we’re calling or invoking the function.

And we’re going to pass it an argument called `__name__` (with double underscores on both sides). That is a very special built-in variable in Python, which holds the name of the module where the code is written. The idea is that we’re only going to be running this thing on the Command Line.

It’s the file where this code is written that will be stored. So our server file will be stored there. It’s basically saying that this server is our Flask app—that this file stores our Flask app code.

This function—the instantiation function—returns an object, which we’re going to store. And the conventional name for that is to call it `app`. You can call it anything you like, but “app” is a pretty good name.

We’re going to write on the next line: `app = Flask(__name__)`.

Next, we’re going to do what is called defining a route. And a route is like a web address or destination.

The most fundamental route name of your homepage is just a slash—it’s a string, and it goes in quotes. We’re going to call the `route()` method on the app object and pass it the slash string in quotes. In other words, we’re defining the route for the homepage.

And you’ll see what that means in the browser once we start the app. Say: `@app.route("/")` and save.

Directly under the route (without indenting the decorator), we’re going to define the home route function called `index()`.

So the idea is: every route, when you land on it or hit it—in other words, when you go to the homepage—and the homepage will be some `http://` address that you receive. The address will be an IP address—just numbers and dots, not a named website. It’ll be your localhost—it’ll be a locally hosted app.

And when you land on the homepage of that locally hosted app—the address of which will be given to us once we start the app—it’s going to call this function. This function will run immediately. It will be invoked the moment you hit this route, which means when you go to this destination in the browser, the function will run.

Now, by convention, we call the function `index()` because “index” means “home” or “homepage.” But it doesn’t matter. You could call it anything you like—like, you know, `banana()` or whatever—as long as you put parentheses, a colon, and do something inside the function.

This is, again, why it’s kind of helpful to know some Python, because we’re defining a function.

And what are we doing inside the function? We are simply immediately returning, which ends the function and provides output. So the return value of a function is the output. Okay—just like if you juice carrots and apples, the output is apple-carrot juice.

Our output is a string of text called “Hello World.” We’re going to write:

def index():
    return "Hello World"

So a route—again, let’s recap—is a destination in the browser or web address. And there you see it: `127.0.0.1:,000`—that’s your port.

So all the websites you ever go to are really numbers under the hood. The name is just something to make it user-friendly. They really just resolve to what are called IP addresses, which are numbers.

Four sets of numbers with dots in between. And `127.0.0.1` is just a localhost—one right on your own machine. We’re not on the internet—no one else can come to this website except you on your local machine.

The home or index route, again, as mentioned, is always written with a slash (`"/"`), and it’s always a string. If you had “about” or something, that would be the route to an About page. We’ll be getting to that.

All routes have a function that runs when the route is requested or hit—when you go to that URL. The function must return a value back to the requesting page. It always returns a value.

In this case, we just want to return the text string “Hello World, ” and because it’s being returned to the requesting page (the route, the homepage), it’s going to output that. It doesn’t just take the string and put it in its back pocket—it publishes it to the page.

When you hit the route—visit the URL—go there in the browser—the text will appear in the browser. Now we’re going to end the file with the following statement, which will ensure that the app will run only when the script is executed directly—that is, as a standalone program from the Command Line.

At the end of this lesson, there is a detailed explanation of this syntax. We’re going to write:

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

This tells Python to run the app only if this script is run directly (not imported). The `debug=True` part allows you to see where things go wrong with your app. It’s optional, but super useful during development.

This block is actually super boilerplate—every single Flask app pretty much ends with this or a variation of it. Sometimes there’s more code afterward, but this “if `__name__ == "__main__"`” thing at the end is standard.

Now we’re ready to go ahead and run the application and see our message in the browser. How exciting is that, right? We’re going to start the server now and run the app.

We’re going to start the server by typing the following command in the terminal and hitting ENTER:

Python server00.py

So actually, here’s what we want to do. The Start folder is nice to have because it seems organized, but the only subfolder we really need is Done—to keep everything else clean. So what I’m going to do here is a useful move for you to know how to do too.

We’re going to take everything in the Start folder and just drag it out—drag it into the root of the project. Now the Start folder is empty. And the reason we’re doing that—just assume “this” is Start, okay? All this stuff is Start.

It doesn’t need a subfolder. The reason we want to keep it loose like this, so to speak, is to simplify running the server, right? We just don’t want to have to type that folder name every time we run the app. We just type: `Python server00.py`.

And by the way, you can’t really just come and click over here. If you want to move—like if you mess up—you have to use the arrow keys to navigate. This is a Command Line Interface. There’s no GUI.

So you don’t have a mouse, really. You just have the cursor. Hit it—yeah.

Hit ENTER. What’s going on? It doesn’t say “Running.” Why does it not say “Running?” We have static.

We have templates. `venv`, `server00.py`—what’s going on, yo? `Python server00.py`—oh.

Looking for the confirmation message. Oh—I don’t think I saved my page. Okay, now I’m going to rerun the line.

I hadn’t saved the page since I typed the `app.run()` thing, okay? Right—the `app.run(debug=True)` at the end is what runs it, and I hadn’t saved the page. Now I want to rerun the command. I don’t want to type it again.

So hit the up arrow on your keyboard to rerun the command. Hit ENTER—there you go. Okay, that’s what we were after.

Again, it didn’t run last time because I had not saved the file after typing `app.run()`. So this is exactly what you want to see. The red text might look like an error—but don’t worry about that.

You’re all good. This is what you want: “Running on http://127.0.0.1:,000”. That’s what you want. We’re going to copy that URL.

Look for the following confirmation message. There you go. Copy and paste that URL into a new browser tab. The “Hello World” message should appear.

There. There it is: “Hello World.”

Hello. Yep—it worked. That is a Flask app up and running.

Congratulations! That might not seem like much, okay—but that’s huge. If you got this far, you are doing awesome.

Congrats. Pat on the back—that’s huge. Now let’s also print a message.

Known as a server log, the message will appear in the terminal. So you’ve got output to the page—the webpage, the home route—as we just saw. That’s where the “Hello World” is.

But you can also output logs—messages to the terminal. So what we’re going to do is not just return to the browser, we’re also going to print. The standard Python `print()` statement outputs to the terminal.

We’re going to go in here and add a print line so we’ll see whatever message when the app runs. Before the `return` statement, we’re going to write:

print("Index (home) route was hit")

Now when you refresh the browser, you’ll see “Index (home) route was hit” appear in the terminal—right beneath where it says “GET /.”

Now let’s look at something else—it’s kind of cool. You can return any HTML. We could wrap our message in a tag, right?

We could say:

return "<h1>Hello World from index (home) route of Flask app</h1>"

How does that sound? Let’s just write something longer. It doesn’t have to exactly match that.

You could just say “Hello World” in an H1 if you wish. The idea of the h1 tag is it just makes the text larger in the browser.

Refresh—and there you go. You just have to refresh the page. You do not have to restart the server.

That happens automatically. So every time you edit the code, you don’t have to quit the server and restart it. You just have to refresh the page.

So let’s talk a little about the syntax. Flask is a class—let’s explain a little bit. `Flask` (with a capital F) is a class in the `flask` (lowercase) library.

When we instantiate an instance of it, we’re starting a new Flask application. Instantiation means calling the `Flask()` function, passing it the `__name__` argument, and receiving an object in return. That’s the instantiation move.

We initialize the `app` object, which will manage our routes and configurations. The `__name__` variable is a special built-in variable in Python. It holds the name of the module (file) where the code is written.

Now if you run the script directly—which is what we’re doing—then `__name__` will equal `"__main__"`. That’s why we ask: `if __name__ == "__main__":` before running the app.

We’re saying, “If we are on the Command Line, run the app.” Flask uses the value of `__name__` to locate static files (like from the static folder) and to identify templates (like from the templates folder).

When you’re trying to load resources from `static` or `templates`, you don’t have to manually write those folder names in your code—Flask just knows where to look because of `__name__`.

It helps Flask determine the root path of the application so it can correctly load those resources. All right—standard practice. It just shows Flask knows where it is and helps it load files relative to the script’s location.

Here is the final code for the lesson—with some comments added. By the way, you can add comments anywhere in Python using a `#` followed by your note. You don’t need to comment everything, but little notes can help.

And that’s it—so that concludes Lesson zero.