Made withFastAPIClip

#2 FastAPI Setup in VS Code

T

Telusko

Creator on the FastAPI channel

Watch on YouTube ↗

72K viewsAug 20, 202513:02 runtime

Master the essential setup for your FastAPI projects in VS Code. This guide walks you through verifying your Python installation, creating a project folder, and setting up an isolated virtual environment (`venv`) to manage dependencies. Learn to install FastAPI and the Uvicorn…

Chapters

#fastapi#clip#backend

Core Prerequisites

Python: Verify your installation and version by running python --version in your terminal. Versions 3.12 and 3.13 are confirmed to work.
Node.js (Optional): This is only required if you want to run the provided React front-end application. Check your version with node --version.
IDE: The video uses VS Code, but any modern code editor or IDE like PyCharm will work.
VS Code Extension: If using VS Code, ensure you have the official Python extension from Microsoft installed.

Initial Project Setup

Create a main project folder on your local machine (e.g., fast-api-demo-recording).
Download the front-end source code from the specified GitHub repository.
Tip
It's recommended to download the ZIP file rather than cloning the repository. This makes it easier to isolate and copy only the frontend folder that you need.
Move the extracted frontend folder into your main project folder.

Front-End (React App) Setup

This section is optional if you plan to interact with your API using tools like Postman, Insomnia, or the built-in Swagger UI.

To run the React front end:
1. Open a terminal and navigate into the frontend directory: cd frontend.
2. Install all the necessary dependencies defined in package.json by running: npm install. This command creates a node_modules folder.
3. Start the local development server with: npm start.
Note
The web application will likely show a "Connection refused" error. This is expected, as the FastAPI back-end server is not yet running.

Back-End (FastAPI) Setup

Why Use a Virtual Environment?

A virtual environment is a critical tool for isolating project dependencies.
Without one, pip install adds packages to your global Python installation, which can cause version conflicts between different projects.

Creating and Using a Virtual Environment

Create the environment: From your project's root directory, run the following command. The name my_env can be changed to whatever you prefer.
```
python -m venv my_env
```
Activate the environment: Before installing packages, you must activate the environment. The command varies by operating system and shell. For PowerShell (as shown in the video):
```
.\my_env\Scripts\Activate.ps1
```
Important
A successfully activated environment is indicated by its name appearing in your terminal prompt, e.g., (my_env) C:\...>.
Deactivate the environment: When you are finished working in the environment, you can exit it by running the deactivate command.

Installing FastAPI and Uvicorn

With your virtual environment activated, you can now install the required Python packages:
```
pip install fastapi uvicorn
```
FastAPI is the core web framework for building the API.
Uvicorn is the high-performance ASGI (Asynchronous Server Gateway Interface) server that will run your FastAPI application.
You can confirm a successful installation by running pip list, which will now show fastapi, uvicorn, and their dependencies within the isolated environment.

Checking Your Python Installation

So before we start coding with FastAPI, let's do the most important step without which you can't continue, and that is the setup. Of course, inside your machine, you need to have those things. So let's go step by step.

The first thing you have to check is open your terminal. Now based on which OS you're using... and I mean, we call it terminal everywhere now. So CMD, terminal, whatever you prefer. Open that and check, do you have Python installed? So how do you check? It's very simple. You say Python --version, and if you see a version there, that means Python is there. Now I have tested with two different versions, 3.12 and 3.13, it works. If you have a previous version, I would recommend you to upgrade. Otherwise, if you have a lower version, try it out. If something is not working, just upgrade. Okay, that's one.

Optional: NodeJS for the Front End

Next, if you want to use the front end—see, whatever front end we saw in the previous video, it's not compulsory that you can run that application with that front end. It's optional. We have another way of accessing those pages. We can use Postman, like your REST client. We can also use Insomnia. You can use Swagger. And by default, FastAPI gives you docs in the format of Swagger. So you can use that. But front end looks good. You will get that satisfaction, yeah, you have done something. That's the only reason we have that front end.

But in case if you want to run the front end, you need to make sure that you have NodeJS installed. And I have tested with version 22. Make sure that you have an upper version than this. I have not updated my node from a long time. In case if you don't have these two softwares, and I'm assuming you have Python because this is the advanced part of Python, so you should, you need to have that. I will not show you Python. Let's get towards NodeJS.

And this is where you can click on download and there should be an option of this. This is the latest version. You can go with the LTS version, you can also go with the current version, and that should work. Now once you have these two, let's see what else we need.

IDE Setup: VS Code and Extensions

So you need these two, done, verified. Next, now you need an ID. So in my machine, I got VS Code, and I already have VS Code open in one of the screens. Let me just drag it here. This is how it will look like. I will just increase the font size. And this is where we'll be doing all the work. So make sure that you have Python, you got NodeJS. Again, NodeJS is optional if you don't want to use the UI. Then you need VS Code or PyCharm or whatever ID you prefer.

Next, in your VS Code, you need to have the Python extension installed. And again, I'm assuming that you have worked on Python before. It's just that if you have not worked on Python on VS Code, you need to make sure that you have this extension. So Python from Microsoft. Okay.

Downloading the Front-End Project from GitHub

Next, before we do any more configuration in VS Code, now this section or this small part is only for those people who want to run the UI. Now in that case, instead of taking a lot of trouble, what you can do is, in fact, I would recommend you to do this. So on GitHub, you have this particular folder called 'frontend' in the project. So this is our project and in this we got multiple branches. If you can see, we got product with UI, product with DB, product put, delete, and post. So, this is our first repository which we're going to start with. Again, I'm going to type everything except the front end part. But if you jump to the last branch with 'products with UI', this is what you need to download. Okay? Of course, you will get everything, but this is where this is important for us.

Now, how do you download? It's very simple. You can simply click here and click on download. Now why I'm recommending download instead of cloning is when you clone, you will get the entire project. Okay. And when you open, you will get all these files. When you download what will happen is you will get everything, a zip file. Unzip it and then delete the extra folders or the extra files here. You are only concerned about 'frontend'. Okay. Just keep it there. Again when you clone it you can also delete all the other files but it is easier to download from the file explorer, or whatever you call these days. Now what it is called? Yeah, File Explorer, so you can delete from there. So download it, unzip it, and get this folder. This folder is important if you want to run the UI. And I'm going to do the same thing. So I'm just going to download this. And I should have shown the steps, you know, simple. So open, unzip, done. This is where you got your folder. Open this, you got only one branch, which is 'fast-api-demo-products-with-ui', and out of this you need just this one folder. Apart from this, you don't need any of the things.

You can just simply copy this and let's create a folder for us. I will do that in the C drive, and let me make a new folder and I will say fast-api-demo-recording because I'm using it for recording. So I will use that because after some time, after a few weeks, I will look at this project and I will not realize why I have created this project. So let me just create that folder in the C drive and put your 'frontend' there. Simple stuff.

Installing Dependencies and Running the React App

Uh, now once you have these steps ready, what you can do is go to your VS Code and open the folder. So C drive, fast-api-demo-recording and open this folder. Not the 'frontend', open the fast-api-demo-recording folder. And yeah, you got it. Just say trust and you are in.

Now once you got this project, this is where your front end is and you can run the front end as it is. In fact, I should be showing that now as well. So let me do that. So I will just go back here. Go to your terminal and in the terminal move to 'frontend'. So make sure that you're in the 'frontend' folder. And if you have never worked on React before, this is a React project. Let me show you some certain things. So this is the main package.json. This is where you handle the dependencies. You write the script when to run, when not to run, how to stop, how to debug and all this stuff.

Now to run this, basically you can simply say npm install. Now we're not running it, we are installing the dependencies. So whatever dependencies are needed for this project, because see, if you open this package.json, one of the dependencies is React itself. So React is a library, so you have to get that. Now once you get these dependencies, you have to say npm install so that it will download all the dependencies. And how do you know if you have dependencies downloaded or not? In the front end folder, you will see one more folder called 'node_modules'. And you can only see that when you have your dependencies downloaded. So we can't see that now. Once I click on npm install, it will download the dependencies for you. And you can see it is doing it fast. And this is the folder I'm talking about. And as you can see, we got this downloaded. And those things are in this 'node_modules'.

And now it's time to run the Node or the React project. So I will say npm start. Now how do you know it is start? If you come down, there's a script called start. This is what you have to enter. And this will start the project. Okay, it says something is already running because I think my older project is still running. I will just close it now. No, I don't want to use another port. Let's do that again. And now it should start. Okay, so it is opening now.

And this is your project. Now it says 'failed to fetch' is because the back end is not working. That pop-up came and went because I've set the timer for 5 seconds. But no products and nothing will work. Okay. Even if you add products, it will not work because the back end is not connected. In fact, you can also check because this is what you're going to do later. You can go to console and you can see it will say something is blocked or the server... Okay, server is still running on the other project. My bad. Now let's try refresh. Yeah, this is what I was expecting. I was not expecting a CORS error. So it says 'error connecting' or 'connection refused'. There's nothing on the back end. Cool.

Introducing Virtual Environments

So let's make this work. But what other setup we need? So let's go back here and close this. This is the front end part. The next thing we need in this particular setup is the FastAPI itself. So what you will do is you'll open a new terminal here and let's install the FastAPI. In fact, we need two things. One, the FastAPI itself, because that's a framework we're going to use. The second thing we need here is a web server because we are building a web application. A REST API is also a web application and this web application runs on a server. You need to get that. So if you have worked on Java before, if you want to have a web server there, we got Tomcat. For Node, for React or NodeJS, we got Node itself. For PHP, we got XAMPP server. So for every particular language, we got some servers. Here we have to get the web server and which is called Uvicorn. I know, unique name. Instead of unicorn, they went for Uvicorn. Good.

So what I will do is I will get the Uvicorn. But before that, in fact, whenever you want to install some packages, we use something called pip, right? But we have a problem here. If I install, let's say if I install FastAPI here. So I will say pip install fastapi, it's that simple. Just write a command, it will install. The problem is this will install FastAPI for all my Python projects. So maybe I'm working on AI in some other project, or maybe I'm working on a console-based application in some project. The moment I say pip install fastapi, it will install FastAPI globally for all the projects. We don't want it. We want FastAPI only for this project. Now how do you isolate? So basically in different languages, they have different ways of doing it. In Python, normally what you do is if you want to have some packages specific to one project, you create something called an environment, your own environment, or maybe we can call it as a virtual environment. So here we want to create a virtual environment.

Creating and Activating a Virtual Environment

So how do we do it? It's very simple. You say python -m and then you specify what you want to create. I want to create a virtual environment. So venv, that's what it's called, virtual environment. And you have to give a name to it. You can give any name. Maybe you can say fastapi_project if you want. I will simply say my_env because I want to keep it unique. So my_env. Okay. Now the moment you do that, it will create an environment which will take some time. Okay. So you can see it is still not doing anything because things are happening behind the scene.

And this is what you got. You need to get this folder. If you don't have this folder, something is wrong with the command here. And in this you got all your environment setup ready. And by default you will get these two. But we want more. So what you will do is you will say pip... Okay. Now you have to activate it first. Now how do we activate? So to activate, based on what you're using, if you're using PowerShell or a command prompt, you need to use different scripts. So these are the scripts for PowerShell. This is a script. For command prompt, this is a script. So for PowerShell, just copy the path. I hope this will work. Just going for the absolute path. Let me try. Yeah, it worked. So instead of typing, normally you just have to type this much. But absolute path works, then why to worry? In fact, you should be copying the relative path. Yeah, this is what I was expecting. But no problem, we are able to run this script and that's important.

Now, how do you know it is successful? It has created the environment. If you see, before your path, you should be getting this, your environment name. So your environment is activated. Now how do you deactivate? It's very simple. You simply say deactivate, with the right spelling. And now you're out. So this is how you do it. So if you want to get in, activate. If you want to go out, deactivate.

Installing FastAPI and Uvicorn

Now let me show you what's the difference. So if I say pip list, it will show all the packages installed in this machine. And if you scroll down this... it's a huge list. For different projects, we got different libraries. I just keep adding them.

And now okay, if I activate again and now let's check. You should be able to see only one, right? But then I want two more. So what are the two more? So you have to say pip install, you need to get FastAPI and we need one more which is a web server which is Uvicorn. So you will say, not Unicorn, Uvicorn and done. When you say run this code... I mean run this command, not code, it will download those things for you, which will take some time. And yeah, so you can see we got all the packages here. So we have dependencies on dependencies, right? So there are some dependencies which dependencies are dependent on, so it will get that as well. In fact, if you want to check, you can do that. pip list and it will give you everything now. So you got FastAPI, you got Uvicorn, and we are happy. That's the setup you need and I'm tired doing the setup here. So these two things, FastAPI, Uvicorn you need, then you can start with the code. Now how do we do that code? Let's see in the next.