 Good morning. In this video, I'm going to show you how to set up a development environment for flask web applications using Visual Studio Code and Python. And so the first thing you'll need if you don't have it already is to install Python. I think a lot of you probably have this on your laptop already, but if not, go to python.org, downloads, and then install it for your operating system. If your operating system comes pre-installed with Python, it's best to go ahead and install the latest version from python.org and particularly the Mac version is not fully supported, the one that comes bundled with macOS. You're also going to want the S code. If you don't have that already, so go to Visual Studio Code, click the download link on the upper right, and install it for your OS. Now, I know I'm using a Mac on this video, but the process is very similar for a PC. So feel free to reach out if you have any questions about that. So I'm going to run the S code for the first time on this computer, so you can see what that's like, and the way code is designed to work is you open a folder, and that's where your project is going to be. So there's no need to create a workspace or to set up project settings or anything like that. I'm just going to click open folder, and for today, I'm going to use my desktop. Although in general, you would use whatever folder makes sense for your project, whatever course you're in, or side project that you're doing. So I've opened the desktop. You'll see there's no files on there yet. That's the brand new project. And I'm going to go ahead and create a little hello world Python program just to make sure everything's working. So I'm going to say new file, and we'll just say something like message is hello world, and then print message. And I'm going to hit command plus to make the font just a little bigger for the sake of the video. So it's a little bit easier to read. Now when I go to hit save, it knows I'm on my desktop. So I'm going to save this as hello.py, and then when I hit save, you'll notice down here at the bottom, let me move my video out of the way, it's like the Python extension is recommended for this file type. So if you haven't been using code before, you don't already have the Python extension installed, you can click that install link. This will take you down here to the extensions view, and you'll see it's currently installing the Python extension from the marketplace. I think Python happens to be the number one extension for code right now. So a lot of people are using it for data science and other Python development. So that's finished installing now. It's good to go. And by the way, you can see what Python interpreter using by clicking on the version in the lower left. So on my computer, it's automatically using this Python 38264 bit that was found, I guess, either, well, user local bin is a shortcut to this library frameworks path, but I'm just going to keep it at Python 3.8.2. That's the latest version that I installed previously. By the way, these other tabs here on the left are for seeing your open files, searching, finding replace. This one is for git integrations. So if you open a folder that's in a git repository, you can do all your pushing and pulling and committing there. There's also a place to create run configurations and then the extensions that we were just looking at. All right, so let me go ahead and run this program. I'll move my video up here so that when I hit the play button, the terminal pops up at below. You can see that it ran library frameworks Python framework version 3.8, blah, blah, blah. That's my Python interpreter. And then it ran hello.py with the absolute path, right? So hello world is the output. In fact, I must have clicked it twice because they ran it twice and now I've run it a third time. So the next step is to get set up for Flask. And I'm going to quickly show you where you can find this information online if you do a Google search for Python Flask that will take you to their project page. And over here on the right, you've got documentation. So I'll click documentation and I can't seem to find a good place with this video window. There's installation instructions and a quick start. So I'm going to go to the installation instructions and you'll see where some of this is described. In particular, you create a virtual environment and in Python, that's a way to create a folder where you install packages with specific versions because often if you're going to be working on multiple projects, each project has its own libraries that might have slightly different versions that are required from each other. And so there's this really easy way built into Python to create these virtual environments. Here's the specific commands on the screen. I'm going to go ahead and do those in VS Code. So here I am in this terminal with my window up here now and I will say let me first make sure which Python 3 I'm running up. That's the one I thought it was. So Python 3 dash m means run a module. I want to run the VM module and I'm going to create a folder with the same name virtual M for V E M V and that will go ahead and create a VM folder here on the desktop and code says, hey, we noticed you created a virtual environment. Do you want it to select it for the workspace? You can be like, yeah, go ahead. So now VM is the Python selected for this workspace. And in fact, if I you'll notice here on the left this VS Code folder was just created with this JSON file for the settings. Now it knows, by the way, this is my Python path I want to use, not the built-in one, but the one that's in the virtual environment. The virtual environment itself includes, you know, links to the Python interpreter, all the libraries that you're going to install. So it comes with pip and it comes with setup tools. We're about to install a bunch more libraries into this virtual environment. But you can browse all that there on the left. I'm going to scroll this up a little bit. And now it's also said, hey, this linter is not installed. A linter is a static analysis tool that checks your code for common mistakes, like, hey, you defined this variable, but then you never used it, or other common programming mistakes that it can tell you without running your code. So first, let me go ahead and get into that virtual environment. So I'm going to type source, virtual environment, then activate, which is a script in that VIN directory there. And you'll notice now that it says VM at the beginning. I'm now in that virtual environment. Typically, code does that for you automatically. So you don't have to necessarily type this yourself. But I went ahead and did that now because when I hit install on this linter, I want to make sure it installed in that virtual environment and not on my main Python environment in my Mac. So let me go ahead and hit install. You'll notice that it went ahead and ran pip install py lint and now it's downloading a bunch of libraries that are required for the linter running setup on it and well, it gives me a warning message that I'm using version 19 of pip instead of version 20 but that probably doesn't matter. So I'm not going to upgrade that right now. You can if you want. You just run the command it told you to run. Okay, so the next step is to install flask, right? And if I go back to the instructions here, we've created a virtual environment. We've activated the environment. So to install flash, you just run pip install flask. Pip is a package manager for Python. In fact, it stands for pip installs packages. So it's a recursive acronym, which is part of the geek humor of CS related things. We go ahead and type pip install flask and that's going to grab all of the libraries that are required by flask including flask itself. In fact, if I open this library directory now, you'll see all the different versions of things that were installed from installing pylint and from installing flask. So we've got quite a bit of stuff in our virtual environment now. All right, I think that's all we need to get started. So let me go move this video down here. I'll try putting it over here for now. I'm going to go back to the flask tutorial page and go to the quick start and they have a nice little minimal application here. This is the hello world for flask. I'm going to copy this and paste it into my code editor. In fact, let me close the settings file and I'll close my hello world file. So on my desktop I'm not going to create a new file and we'll call this one app.py. That's a common name for the main file of the web application. I'll go ahead and paste this in and hit save. Now you'll notice that code here is complaining. It's like, hmm, flask might not be resolved and the thing is is we just barely installed it. So probably code is using slightly outdated information about flask. Let me go ahead and close this editor and then I'll go ahead and reopen it again. All right, and so let me go ahead and open my desktop folder. All right, I've got py and we're good and in fact if you look at Python extension loading here on the lower left, it should automatically figure out that I'm in my virtual environment. So you see how it says VMVM that means oh, okay, this is using a Python interpreter that's specific to this project. And now it actually knows about flask because flask was installed in this environment and not the main one. I probably could have fixed it just by changing this down below rather than closing and reopening, but you know when in doubt, you can always start over, right? So now I need to run this file. Now, you don't hit the play button because play means run file on a Python terminal. I don't want to run this file. I want to launch it with the flask module. And so to do that, I'm gonna go to the run menu and there's a button here to run in debug. So if I say run in debug, it's going to ask, well, do you want to run this as a file, as a module, a remote attach, etc. We want to run this as a flask web application. So I'm going to click that button down below and you'll notice what happens is it's going to put a bunch of settings here on the command line for launching flask. And in fact, you'll notice that the bottom bar just turned red-orange. That means that the application is currently running and it's running on a local web server here at 127.001.Port 5000. So if I hit command click or control click on a PC that will open that link in a browser and here I have hello world. What's nice about flask is it makes it really easy to debug web applications of both in the Python code as well as in the HTML templating that you'll see later. So let me for example put a little break point here on line six, all right? To set break points, you just click the margin next to the line where you want to break and if I go back to the web browser and hit refresh, it's going to reload that page. You'll notice that immediately that break point was hit and it automatically switched back to this window. In fact, if I'm in the browser, it's like waiting for the server to respond. You can see the little spinning icon there. So now I can examine all sorts of things like variables. Well, there's not any local variables in this simple application here. You can also see the call stack and you can watch certain values and step through your code one line at the time just like any other debugger works. So I'm going to go ahead and hit play to let it run, go back to my web browser, and you'll see that it's finished loading there. So that's in a nutshell how to get up and running with flask, with pilot, how to use the debugger, how to start and stop. I can restart the application by hitting this green button here, and there's a whole lot of other features that you'll learn about over time. So I'd encourage you to take a look at the flask tutorial here on their own website. There's also a handy tutorial on VS code. So if you do VS code flask, they have a specific tutorial that shows you not only how to get started with flask, but how you might do certain steps in VS code. You have to take the first few set of instructions with a grain of salt because we've already installed everything and configured it. So the commands might be slightly different or the folder names might be slightly different and that's fine. You can name things whatever you like, but in the end, if you look through each of these steps here, you can learn a lot about how to use flask. So here's the table of contents for that tutorial as opposed to the table of contents for the whole website. So with that, I'm going to sign off and wish you well. Enjoy, and we'll see you next time.