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 thing you're trying to do in almost every programming language is 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 to not just work out of your 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, 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's a lot of scary sounding terms in computers, 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 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 be bringing those into a virtual environment so they're not spilling out into your entire computer system, hogging memory, bogging things down, perhaps conflicting with other installs.

We've got this little sandbox virtual environment to keep our project 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 like all the cool kid programmers are all about typing in the terminal. 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 like Applications, if you're on a Mac, Utilities, there is 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 View, no, excuse me, 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, we want the terminals way over here on the right.

If you see anything kind of pushing the terminal away, just click on it, click on it, 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'll 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, we would, you'd need to do what's called CD into there.

You know, like move your, you can navigate into various folders. We're not going to get into that. It would be really cool if we could spend time to learn 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 is first, we're going to make a virtual environment. Now it's different on Windows and different on the Mac.

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

If you're on the Mac, type Python-M space venv, again, venv for virtual environment. But if you're on Windows, you type this py instead of Python 3. 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 this plus sign. If you don't see PowerShell, at least the plus sign with the dropdown menu, and you need to click the dropdown menu and choose Command Prompt.

So you're switching from PowerShell to Command Prompts. 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, the 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 message. 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 with slashes between venv, bin, and activate.

The Windows command is venv backslash scripts with a capital S, backslash activate. And again, you need to have done this 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, that worked.

How do we know? It now says venv over here on the left. Windows users, after so here's the Windows view because I'm on a Mac, right? So I've got a little screenshot for the Windows. So the Windows users first need to do the following at right next to PowerShell, click the plus arrow and choose command prompt.

As said, I mean, 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're going to have typed venv backslash scripts with a capital S, backslash 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, you can't necessarily show all the code you want to at times, 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 is more like it, right? 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 P, which means, which stands for pip install 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 on 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 wanna do is make sure that we have the most recent version, which we probably do have, but we'll run this line anyway. We're going to say pip install space dash dash upgrade space pip.

But if you are on Windows, if you already have pip installed, the upgrade attempt will give you an error, in which case, so type this regardless of Mac or Windows. And if you get an error on Windows, type this. Or actually Windows, just type this.

You don't even need to type this part. This part will just give you an error and tell you to type this. Pip install dash dash upgrade pip, or Python m insure pip upgrade, right? It starts with pip, ends with pip on the Mac.

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.

It didn't throw, if it didn't work, you'd see this big thing of red lines of code. It says successfully uninstalled, successfully installed. It basically to upgrade it, to update it, it uninstalls the old one and installs the fresh newest one.

And hopefully that's gonna 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 rear view mirror, you're doing great, honestly. So the next move we're going to, now that we've got our pip install up to date, we are going to install Flask, which is a Python backend 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 backend server. It has the ability to serve pages and write to a database, send requests, 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, okay? 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 we're going to 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, 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. And so this piece of code that we have, our function, will only run when you hit the route.

So the triggering device, not a button click or something, but rather the landing upon a webpage at a 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 here to this destination on the web, our homepage of our app, and the function runs and returns Hello World, the text, and the return value, the output, 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 the Python files have an extension of .py. We're going to make a server00.py file. You can call these anything you want, but it seems like a good name for less than 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 we're going to say 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 little f Flask being the module we installed and capital Flask being the main object of that.

So from Flask, we're just importing Flask. So 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's 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.

And so that Flask capital F is a, it's like a class. It's a main function of this Flask module. And by writing the name of it with parentheses after it, we're calling or invoking the function.

And then we're going to pass it an argument called name with double underscores on either side of it. That is a very special built-in variable in Python, which holds the name of the module where the code is written. The idea being that we're only going to be running this thing on the command line.

It's the file where this code is written 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.

And this function, this instantiation function returns an object, which we are 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, we're going to say app equals Flask name. Next, what we're going to do is we're going to do what is called define a route. And a route is like a web address or a destination.

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

And you'll see what that means in the browser once we try to, once we start the app. Say route slash like that, save. So directly under the route without indenting, 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 colon slash slash address that you receive. And the address will be an IP address of just numbers and dots, not a website. When you hit and there'll be your local host, it'll be like 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'll be invoked immediately when you hit this route, which means when you go to this destination in the browser, this 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 and a colon and then 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 for, that is the keyword for defining or declaring a function. We're going to say index colon enter, return hello world.

So a route, again, let's recap some of this. A route is a destination in the browser or web address. And there you see it, 127.0.0. Yeah, and colon 5,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 zeros, excuse me, with dots in between. And 127.0.0.1 is just a local host one, right? We're not on the internet. No one else can come to this website, right? But us on our local machine.

The home or index route, again, as I mentioned, is always written with a slash and it's always a string. If you had about or something, that would be maybe 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, or when you land on that, 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 home page, 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 here 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 say if the name double equals main, in other words, if you are executing this app from the terminal command line by typing in that terminal box that we were in, which will be the case, then we're going to call the run method of the app with this kind of default debugging thing set to true, allowing you to see where things go wrong with your app. But we don't need to worry about that right now.

And this is actually super boilerplate, like every single Flask app pretty much ends with this or a variation thereof. Sometimes there's actually more code after here, but this kind of thing at the end is pretty typical. If name, right, double equal, we're not setting a value, we're just checking.

If the name double equals main, if name double equals main, main app.run, actually we have to have the ampersand, debug equals true. True, in Python, your Booleans, true, false are capitalized. Oh, sorry, it's not at, at only on the route part.

Okay, app.run debug equals true. So that's what you need. And that is actually all you really need.

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 in the command in the terminal and hitting enter.

Python server.00.py. So actually tell you what we want to do. The start files are, you know, the start folder is nice to have because it seems so organized, but the only thing we really need as a subfolder is done to kind of get everything away from the start file. So what I'm going to do here is, here's what we're going to do, and this is a useful move for you to know how to do too.

We're going to take everything in the start file and just drag it out of there, just drag it down to this empty spot. Now the start file 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 simplify the running of the server, right? We just, we don't want to have to type that folder name all the time when we're navigating to this thing. We're just going to type now Python space, the name of the file, .py. Let's see if that, make sure you can see all that, right? Python server.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 arrows 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. Benv server. What's going on, yo? Python server, 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 run thing, okay? Right, the app.run 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, this moment ago, because I had not saved the file after typing at app.run. So this is exactly what you want to see. The red thing looks like you messed up or something. Don't worry about that.

You're all good. This is what you want, running on HTTP 127.0.0.1. That's what you want. We're going to copy that URL.

Look for the following confirmation message, right? There you go. Copy, 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 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 potentially 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. So the standard Python print statement outputs the terminal.

We're going to go in here and then we'll be able to see whatever message. When the app runs, we'll see whatever message is there. Now before we return, we're going to print app running at index or something like that.

What did I put exactly? Oh, index home route hit. Okay, we can say that. Index or slash route hit, boom.

Something like that, it doesn't matter. You can just say hello world again if you like. And now let's also 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 hello world H1 though.

Hello world from index slash home route of Flask app. How does that sound? Let's just write something long here. It doesn't have to exactly match this.

You can write whatever you like. You can just say, you can just put the hello world in H1s if you wish. I mean, it's just the idea of the H1 is it just makes it bigger.

Refresh, 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, you don't have to quit the server and restart it. You just have to refresh the page.

Look at that. There it is, that's your H1. So let's talk a little bit about, that's it for the code of the lesson.

So let's just end by looking a little at some of the syntax. Flask is a class, just explain a little bit. So Flask with a big F is a class of the Flask with a little F library.

When we instantiate an instance of it, we're starting a new Flask application. And instantiation means when we call the Flask function, passing it this name argument and it returns our app. That's the instantiation move.

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

Now, if you run the script directly, which is what we're doing, by running it directly, that simply means we're starting the server from the command line. If you're doing that, then name is main. So that's why we're asking if name equals main before we run the app.

We're saying if we are on the command line, run the app. Flask uses the value of name, double underscore, name, double underscore to locate static files, right? There's a static folder to identify templates. If you render HTML files.

So static and HTML, when you're trying to load resources from static and templates, you don't have to write static or templates if you are inside this name variable. If your file is understood to be this name thing, it just knows it's part of its capabilities. It just knows where to find these folders.

So, it helps Flask determine the root path of the application to correctly load the resources. All right, standard practice. It just shows Flask knows where it is, helps it load the files and resources relative to the location of the script.

Here is the final code for the lesson, which you have with some comments added. By the way, you can add comments anywhere you like. You can add comments inside Python by putting a hashtag followed by whatever comment you want like that. Okay, so we don't need to do all of them, but there's little comments here everywhere.

And that's it, so that concludes lesson zero, zero.