RONGXIN: Good afternoon, everyone, and good evening, good morning from all over the world. So today, this seminar will be going through how to develop your project locally with VS Code. And so, VS Code, basically, Visual Studio Code is a lightweight source code editor that you will normally edit source code. And this Visual Studio code is available on multiple platforms, like on Windows, Mac, and Linux. 

And in the past-- in this semester right, over the past few months, and students have been using Codespaces. And before we actually dive into how to develop your project locally using Visual Studio Code, let's quickly just go through what's happening behind the scenes when you are using Codespaces. 

So in the context of the Codespaces, the VS Code editor is actually running on a Linux machine, virtual machine managed by Microsoft and sitting remotely in the cloud. And this space is providing a cloud-based development environment, and users generally work with this environment in a browser-based editor. 

So this page probably familiar with most of you. Most of you probably are familiar with this page whenever you open your Codespaces. And what it is happening is actually the remote Linux machine is actually launching and provisioning an environment for your Codespace. It is where all the compute associated with the software development happens, for example like compiling, debugging, restoring, et cetera. 

And at a high level view, the Codespaces environment provided by CS50 comes with the software package, such as Python, Node.js, SQLite, HTTP server, and some CS50 C libraries that you will need to use it to successfully complete your problem sets. And once the Codespace, the Linux machine, launched, once you are in, the Codespace automatically configures everything you need to work with your problem set. The runtime environment, the compiler, the debugger, editor, custom user settings, and relevant editor extension, and more. 

So in a nutshell, to recap, when running VS Code on Codespace, it is running in a Linux operating system. There's many pre-installed package that we already configured for you. But the most important software package are the Python's library, the Node.js library, the HTTP server software, Flask, and SQLite. 

Now what happened when it comes to Mac, if you want to use VS Code on your Mac OS. So similarly, you will want to have the Python library installed on your Mac. You will want your Node.js environment configured on your Mac. You will also want to install HTTP server, Flask, and SQLite. All this software package also available on Mac. And once you have all these software packages installed and configured properly, you can also continue to develop on your Mac locally, without using VS Code. 

So first, of course, to run VS Code on your Mac, you need to install VS Code. Let's actually just do that. Install VS Code, right? Normally you can just Google search "Visual Studio Code" and usually the first result pops up. And the website detected that you are on a Mac and will prompt you to install the VS Code on your Mac. You can just click Download. And unzip it. So these are the VS Code software you are going to use on your Mac. And usually we just drag it to the application folder to finish the installation process. 

OK, so let's actually launch VS Code. Now this is VS Code running on your Mac. As you can see, the interface pretty similar to what you would see on a Codespace environment. You got the File Explorer on the left, or you got your terminal in the bottom, and the editor on the center. 

Now first, let's go through the package installation process, starting with Python. So if you go to a python.org, and head over to Download. Similarly you can also download a Mac OS version of Python and install it on your computer. Just going to double click on this. [INAUDIBLE] And usually the installation would take a while, but it should be very straightforward. The installation will take about a few minutes 

And again, because these are all pre-configured on the Codespace, that's why, each time you launch a Codespace, it doesn't take that long, because all the software is already pre-installed on the Codespace. But on your Mac, locally, you will need to do this manually. But this is a one-time installation. So to verify your Python has been installed successfully on your Mac, you just go to your VS Code terminal and type python3. And it will launch a Python shell, and as you can see by zooming, you can see it's Python 3.1.0, the version we just installed. 

So now that you have the Python environment installed on your Mac, you can start actually coding some Python script. But we will just continue moving on to install other software package. The next one is Node.js. So this one is a Node.js runtime that's required by the HTTP server. So in order to use HTTP server, we will need to first install Node.js. And after installing Node.js, besides installing HTTP server, you can also discover many other Node.js package on the internet that you can install. Let's just do over-- let's just do that. 

So again similarly, a user can search Node.js on Google. And you will want to download the latest long term supported version for the Node.js. And again, after installation you can type node -v to verify the Node.js runtime has been installed successfully on your Mac. 

So once we install the Node.js runtime, we can go ahead and install the HTTP server. So the HTTP server is actually a node application that serve your local directory, just so you can view the web page, view all the web content, locally on your Mac without needing to connect to the internet. This is actually very useful to help developing web application on your Mac locally. 

So usually people will search npm-- npm is just a number package registry-- and you will find http-server here. And to install the HTTP server, we actually need to run a command on the terminal. So "npm install" is actually the way you install a package. You can npm install vsc, for example, if you want to develop a VS Code extension. You can install that package. 

But right now, we are installing the http-server package, and so that's why I'm typing "npm install -g http-server". -g means you want to install this package globally, so that you can run this command anywhere on your Mac. And usually, once the installation is finished, usually you'll find there's no error message are logged. It means your http-server has been installed successfully. 

Now let's actually gets a demo on how we can serve the home page problem set on your Mac locally. I'm going to git clone the home page problem set. We're going to cd into homepage. Clear the browser. So now I'm in the home page, right? I want to view this index.html file on a browser. How can I do that? 

So similarly, you would type http-server. So on Codespaces, the http-server is actually a wrapper that we wrote, that we simplify many arguments. So if I'm typing http-server right now and hit Enter, you will actually spawn a server and run it on port 8080 on my Mac address. And I can actually open this. 

As you can, see the home page has been served here. "Hello, homepage." And I can-- so this is how you start developing a web project on your Mac locally. Right now, I'm not connecting to Codespace at all. This IP address is simply just my address. It's a reserved IP address, and a private IP address that's running on my Mac. 

And I can go ahead and update my web page. Do that "Hello, world." And we can change it title to VS Code Seminar. Let's go back to here, and then refresh the browser. And as you can see, the content has been updated. So this is all happening within my Mac. All right, let's stop the server by hitting Control + C. 

So next one, the sqlite3. So next one is SQLite, which is a database viewer. If right now-- So if we want to demo this-- I'm going to use the finance problems as an example. So there is a finance.db file on my file explorer and I want to view it, right? If I type sqlite3 and finance, right now, it's running on my Mac and I'm able to view it. 

But to install it-- your Mac doesn't come with SQLite initially, so to install it, we also need to download this SQLite software and install it on our Mac. And to do it, let's actually go to the sqlite3 website. And sometimes it's a software distribution, it's kind of messy. As you can see, SQLite is actually supported by many, many operating systems, but we only care about macOS right now. So I'm just going to quickly search Mac and find this package. I'm going to unzip it. 

So as you can see, after you unzip the file, it has three binaries that you can execute, actually, but this is the one we want to install on our Mac. And the installation process for this one is actually a little bit complicated, but not that difficult. Let me explain why. So right now, I already pre-install SQLite. And I can ask Mac, where is the SQLite install? And Mac tells me, SQLite is installed under this directory. It's in /usr/bin/sqlite3. So the installation process is literally copy the sqlite3 to the correct directory. 

And to do it, you want to locate your software package. You will want to copy this software to the correct location. This one. And since I already installed it, I will probably get an overwritten prompt. 

So I mean, once you copy your sqlite3 library into your /usr/bin directory. Mac will be able to search this software when you're trying to launch, because there's a PATH environment variable on Mac as well. And I can also display, because Mac-- whenever you type a sqlite3 command, your Mac will search all these locations and find that package. And since we copy paste the sqlite3 software into that location, your Mac will be able to find it. And that's how you are type the sqlite3 command and launch the database viewer. We can go back to our example. 

And run "sqlite3 finance.db". And we are now opened finance.db. And to view the schema, just to verify we are able to view this database, I'm just going to type .schema, and you can see we are able to actually view the finance.db on your Mac. 

And lastly, you want to run a more elaborate HTTP server, such as Flask server, right? When we are doing the finance problems, that you want to run "flask run" so that you can launch your application. And we need to install the Flask Python library in this scenario. So to do that I'm going to type "pip3 install flask". This is how you install a Python package. It's different than installing a node package. To install Flask, I'm just going to hit Enter and run this command. 

And as you say as you can see, you don't see any error message. It means your Flask package has been successfully installed on your Mac. And to launch your finance web app, you will type "flask run". And usually students will have a mistake because they forget to put the environment variable there. [INAUDIBLE] Yeah. 

Yeah, usually-- this is actually a good teaching moment. So since I never install Flask on my Mac before, after installation my terminal actually did not know about it. So what I did was I quit my terminal and then relaunched again, so then my terminal knows of all the newly installed package. So right now, I can just run "flask run". 

But before I do that, because the finance problem set require us to specify an API key, I'm just going to do it quickly. Just randomly typing my token here. And Carter, do you know why I'm getting this import error? 

CARTER: So I think-- you installed Flask with Python, right? 

RONGXIN: Yes. 

CARTER: And the finance piece that also relies on a package called flask_session, so I think we need to pip install that one. And then there's also another library, called the CS50 Python library, we could probably talk about to. 

RONGXIN: All right, thank you, very good. So another teaching moment. Since on the Codespace we also install a Python CS50 library for you already. But on your Mac, of course, Mac doesn't come with CS50's Python library. We also need to install that. I'm going to type "pip install lib50". But I think there's another problem here, actually. But we will see if it goes well. 

All right. I'm going to run "flask run" again. So I'm getting this error. I'm going to do something else. I'm going to try-- I'll explain later, after typing this. 

CARTER: I think we also need the cs50 Python library. Because I think you did lib50, but I think it's pip install cs50 is one of the packages, as well. 

RONGXIN: OK, let's try that. Then maybe, let's try-- all right, thanks Carter. 

CARTER: Yeah. 

RONGXIN: So yeah. So through all these steps of process, you see, as a novel programmer myself, if I'm going to develop my software locally on the Mac, I will have to go through all these steps to provision my environment. And this is the truth. We really need to properly or correctly provision our environment before we can start development. And that's why, usually when you develop your software locally, you have to go through so much pain before you actually start writing your code. And that's why Codespaces exist, and we, CS50, pre-provision environment for you. 

But again, right now, as you can see, after consulting with Carter, after some googling, and some trial and error, I was able to successfully launch the Flask server, eventually. And similarly, this is running on port 5000 this time. It's a Flask web app, and it's running on my Mac IP address as well. 

And right now I can see the finance distribution codes already being served on port 5000. And right now, this is actually-- and the remaining steps are actually similar. You move on to a finish, implement, all the routes, and this all happens on your Mac locally. It's not happening on Codespace, again. For example, if I click the register route, I would get 400. I haven't implemented it. 

And as you can see, your terminal will also get all those debug output, similar to what you would get on a Codespace environment. 

So after talking about provisioning your environment, next I'm just going to briefly mention what else you can do with VS Code running on your Mac locally. For example, you can install many, many extension from the Microsoft VS Code Market. You can install, for example, I want to change my theme. How can I do that? I can install a GitHub theme that I usually use. 

I would just search it. I installed it. My VS Code theme get updated immediately. And I can change to the other there. There's more you can discover yourself. You can keep exploring the extensions you want. But again, at the end of the day, VS Code is just a is just a source code editor. It just like a more fancier version of a plain text editor, really, and all these extensibility provided by VS Code is always available on both Codespace and your Mac. 

So your editing experience won't change much regardless which platform you are using. And the reason why you might want to do it locally is because sometimes you don't have reliable internet connection. Sometimes you just want to develop your secret project locally. You don't want it to live on the internet. That's another reason to do it. 

But, yeah, again this-- and also you have more flexibility, to be honest, because this is your own Mac. Your own laptop. You can do whatever you want. You can provision the environment however you want and, you can-- that's how you can further customize your development experience on your Mac. And there's many other reasons why you want it to be locally. And sometimes Codespace might suffer some outage. You don't have Codespace available, but you can always open your Mac and continue your coding there. 

Yeah, and with that I think this concludes all the require steps to set up an environment to develop your product locally with VS Code on Mac. I hope this walkthrough and seminar is helpful for you. And I think we have some more time to open for Q&A. Does anyone have questions? Please raise your hand, or ask questions on the chat. I can answer. 

CARTER: Rongxin, we had a question about are there steps we could look at to install Flask? Like does Flask have documentation of how to install itself, and so on, and where would we look for that? 

RONGXIN: Oh, yes, good question. So again, I'm a good fan of Google search. So I would just search Flask documentation. So here is the Flask official website. It has a pretty substantial documentation on how to install Flask, and how you can develop your web application using the Flask library, as well. So here you will find all the necessary documentation you need, and specifically regarding the installation. 

It has, like, how you can install Flask on Mac or Windows. It has all the documentation. This website will be the one you want to look for. I'm going to send it to everybody. 

CARTER: And, also, correct me if I'm wrong, Rongxin, I think some of those first steps, like the environment things, are somewhat optional, and the core part is that install flask, sort of lower there, like the "pip install flask", and so on. It's like nice to have a contained environment where you can have your own packages, but I think the core piece of installing Flask is that second piece, later down the page. Is that right? 

RONGXIN: Oh, yes, the pip install is actually the actual installation. Yes, correct. So, here, to create an environment and activate an environment, that's something else. So you can also have multiple environments on a platform. You can switch between-- when you are switched between development projects, you want different dependencies. These are neat things to have, but not required to install Flask, and the only place you want to pay attention to is the install Flask section. 

CARTER: And another question that we got, if we can move on from this one, is how would we use git on VS Code? Is there anything different about using git locally versus how you would use it in Codespaces? Just, how would we use git through VS Code? 

RONGXIN: Sure, good question. So let me actually demonstrate real quick. So what I'm doing right now, I'm just going to remove all the cloned repositories from my demo folder right now. And I can go through the clone process. So on Codespaces, right, especially on the CS50 Codespaces, since we want to simplify all these git commands, all this git clone, git, push, git commit steps for students, we actually write a wrapper software submit50. And underneath the hood, submit50, if you are familiar with this, underneath the hood, it's actually running a bunch of comments for you to submit your homework. 

And you will also familiar with get50, which is a git clone command underneath the hood. On your Mac, because your Mac doesn't have get50 and submit50, if you want to get a distribution code-- let's say the home page assignment-- on your Mac, you would want to type "git clone", and paste the assignment URL. 

And git is actually a common software that is already pre-installed on Mac, but usually when you're first hand launching it, Xcode pops up, saying you want to install some package. You just click Install the required command line package, and you will be able to use git. So git is actually pre-installed on Mac. And the command I just managed is git clone, to get the distribution code. 

CARTER: And we also just finished up a seminar on Git, and using that for collaboration version control. So on the course website, on the seminars page, there is a recording of a seminar on how to use git that sort of goes in much more depth as well.