How to Create a FastAPI & React Project - Python Backend + React Frontend

Key Takeaways

in this video I'll show you how to connect a fast API backend to a react front end we'll do this completely from scratch so you'll get every single step and I'll show you how to fix the common errors you're bound to run into like a Coors error that I'm sure many of you have seen before now near the end of the video I'll even share with you a more advanced template that goes through all of the authorization and authentication so if you do want an authenticated backend to have things like JWT tokens user signing in registering Etc you can get all of that functionality from this video so with that said let's get into it and let's learn how to connect the fast API backend with the react front end using Python and JavaScript now in order to do this of course we're going to need to write some code and to do that I'd recommend using something like an IDE now truthfully you can use whatever you want but for this project I'm going to be working in py charm which comes from the sponsor of this video Jeet rins now the reason for that is pycharm works well not only for building apps that use fast API or really any python app but it also works well with JavaScript and Frameworks like react now pie charm also comes with some pretty game-changing features that make developing these types of apps significantly easier of course py charm supports all major Frameworks like d Jango flast and fast API but it also comes with preconfigured run and debug configs which makes it fast and easy to start and test your apps not to mention support for Jenga and D Jango templates Advanced navigation AI coding assistance and buil-in code Snippets as you'll see in this video pie charm also supports react the front end framework we'll be using it has debuggers deployment tools and my favorite feature is the endpoints and HTTP client that lets you test your endpoints by sending requests right from the IDE without needing a third-party tool you can get 3 months of py CH professional for free by using the code Tech with Tim at the link in the description now let's dive in and let's connect fast API and react so we're going to get started here and I want to let you know that I do have a text based guide that will show you how to do this that you can check out from the link in the description it's just a part of the GitHub repository that contains all of the code for this video so if you click in that GitHub repo and you go to notes. markdown you'll see that it kind of has the guide with all of the code and what you need to put in the files obviously the video is going to be more in- depth but just in case you need that I do want to make you aware of that okay so I'm going to hop into my IDE and I want to quickly explain to you what it is that we're actually going to do here so in order to integrate fast API with react what we need to do is create a react project which will represent our front end and then we need to create a fast API project which will represent our back end the front end is then going to send requests to the back end the back end will handle any sensitive data storing things in the database authentication authorization all that kind of stuff and then return results back to the front end so what we're doing is we're isolating the project and we're having our user interface or our front end as a separate project just handled by react and then we're having having our backend or our API just handled by fast API now this is best practice and there is other ways where we can like render a react template using just fast API but what we're going to have here is two separate components and that means if we do eventually go to deploy this out we're going to have a deployed backend and then a separately deployed front end this is actually really nice because it means if the front end goes down the back end doesn't necessarily go down and we can actually create different types of user interfaces or applications for our project because the back end is isolated so if we want a mobile app we can use the same back end and we can have a different front end or a different Library handling that anyways I'm going to show you we're going to start by setting up the backend project then we're going to set up the frontend project and I'm going to focus on how these two communicate and how you make it so you don't get things like a Coes error okay so in py charm what I'm going to do is press on new project and I'm going to create a new Fast API project by selecting on the left hand side now I know this might be different for some of you if you're not using this IDE so don't worry I will go through those steps in one second now for the name I'm just going to go with react we're going to spell this correctly ideally and then fast API okay and where it says interpreter type I'm going to use a custom environment which is a virtual environment and we're going to talk about creating that in one sec but what will happen here is pie charm will actually automatically make one for me so I'm going to press on create okay it's going to bring us into the IDE here and it is going to start me with a little bit of code don't freak out you don't need to copy any of this code right now it's just kind of a template and I'll show you exactly what we need to do I'm going to walk you through step by step so don't worry anyways I want to make this full screen so I'm just going to go here going to go to view appearance and then enter full screen mode just so it's a little bit larger for you okay so don't worry about this code this main. Pine and this test main HTTP this is actually so you can test end points directly in py charm but you'll see that we have this backend folder and this is what I want to focus our attention to so in the backend folder you'll see that we have V andv now if you're working in py charm you already have this if you're not you're going to need to create this so within your main project set up a backend directory which I already have but make a new directory or new directory make back end so it looks like this and then what we're going to do is open up our terminal okay from our terminal we're going to CD into that backend directory and here we're going to create the python virtual environment to isolate the dependencies for this project so in order to make this environment we're going to type Python dmvnv and then VV now if you're on Mac or Linux you can change this to Python 3 and what this is going to do is create a new virtual environment for you in this directory now after we create the virtual environment we need to activate the virtual environment and this is a command you would need to run if you were kind of signing into a server for example or you were just coming back onto the computer after maybe you turned it off and turn turned it back on to activate the environment before you can run the python script okay so the idea behind the virtual environment is we're putting all of the dependencies in here specifically for this project and isolating it from our other python interpreters so if we want to be able to run this project we've got to activate the virtual environment so we're inside of there and then we can run the code or install the dependencies so there's two commands that you can use to activate the environment depending on what operating system you're on if you are on Windows it's going to be dot slash the name of your environment which will be VV if you followed along with me/ scripts SL activate Okay this will activate the virtual environment and you'll know that worked if you get this VV prefix appearing in your terminal because I'm in pycharm it already did it for me but I'm just showing in case you're not okay now if you're on Mac or Linux you should be able to type Source do/ the name of your virtual environment so venv /bin not scripts and then activate same thing when you run this it should activate the virtual environment for you okay so now that we've done that what we're going to do in our backend folder is we're going to make a new file now this file we're going to call requirements.txt this is standard in a python project in here we're going to put all of the dependencies that we need for our fast API application now in my case I just need fast API I need UV corn and I need pantic okay now you might have additional dependencies you might be using an authorization Library you might be using a bunch of other stuff whatever you're using put inside of this file so that you've stored it and someone else using your project later knows what dependencies they need okay then what we're going to do is install these dependencies to do that we're going to type pip install dasr and then requirements.txt now if this doesn't work you can try the PIP 3 command and what this will do is take all the stuff in your requirements file and install it in your now activated virtual environment okay again this is the best practice and this is what you need to do on for example any new machine that you're running this code on so if you later want to deploy this code and you want to run it on a server for example you need to make the new virtual environment activate it and then install the dependencies before you run your code okay perfect so we're in here we've got this installed and what we're going to do now is we're going to make a simple python file so we have this main.py file but I don't want to start from something just in case you don't have that so we're simply going to delete this and inside of our backend folder we're going to make a new file called main.py okay in this file we are going to write our simple fast API application and I'm going to show you how we can handle the very commonly experienced cores error which is usually what trips people up when it comes to actually connecting their backend to their front end so we're going to start by importing UV corn okay this is going to act as a web server to run our fast API app next we're going to say say from Fast API import fast API then we're going to say from Fast api. middleware we're going to import cores and you can see that I'm getting the auto complete here which is the cores middleware okay so make sure that's installed then I'm going to say from pantic import the base model and I'm going to say from typing import list okay so within fast API here what we're going to do is initialize a new Fast API project we're going to define a few models this is how fast API handles data validation we're going to create a post and a get endpoint so you can see how that works and we're going to allow our front end to access this back end so we'll talk about that in one second so we're going to start by defining our data models if you've ever worked in fast API before you know that one of the advantages of this is that what it can do is it can automatically validate data coming in and it can format data going out based on pantic models so I'm going to say class fruit is a base model I'm just giving you a very simple example here you can make this anything that you want and I'm going to say that this simply has the field name which is equal to string I'm then going to say class and I'm going to say fruits and this is going to be a base model and all this is going to have is fruits equal to a list of fruit okay so all I'm doing is I'm going to set up a simple project that allows us to create a bunch of new fruits and to add those to a list that's all we're doing just so you can see how this works okay now that we've done that we're going to create our fast API application so we're going to say app is equal to fast API and we're going to create a list of Origins that are allowed so we're going to say Origins is equal to and inside of a list here we're going to define the endpoint or the URL of our front-end server now this is very important and this is where you need to Define any web application or really anything at all that you want to be able to access your application so whether it's a server IP address so maybe another API using this API or whether it's your front end in our case like our react front end that's what we need to Define so right now we're going to Define Local Host Port 3000 which is where we're going to run our react server in development but later in production if we changed some to some endpoint like you know tech with.net for example we would need to put this here we need to Define kind of the base URL or the base origin of anything that we want to be able to call one of the endpoints on our server so now that we've done this we need to enable and configure the Kors middleware now cores stands for cross origin resource sharing and this is something that typically prohibits kind of unauthorized websites or endpoints or servers from accessing your API the idea is we only want trusted sources so our front end for example to be able to interact with our backend so we need to give it access to that by defining the origin now what Kors will do is it will block out any other requests that are coming from something that we're not aware of so if someone's trying to hack your API for example and send unauthorized requests it's going to block that it's just not going to accept those requests from another server or from some other front end or whatever so what we're going to do here is we're going to say app okay do add middleware now inside of the middleware I'm actually just going to use the autocomplete because this is giving me everything that I need we're going to add the Coors middleware don't worry about the kind of yellow squiggly line This is fine that comes from this import right here we're going to allow Origins and we're going to specify these Origins right here we're going to allow credentials which means we can send things like JWT tokens and we're going to allow all methods and all headers now if you want to block for example a delete method or a put method or whatever you can just specify the methods that you want and not include those and if you wanted a specific header to not be allowed in any requests you could block those here as well okay so that is it for adding our Coors middleware and now that we've done this we'll be able to send a request from this URL to the back end which we couldn't do previously okay now what we're going to do is just set up a very simple inmemory database this is a database that will not persist when the application shuts down and I'm going to do this with a python dictionary I'm just going to say memory DB is equal to fruits and this is going to store a list inside of the dictionary and we're just going to add fruits into the list the reason for this is just so we can set up a mock application so from our front end I can show you how we can call these different end points and actually interact with the back end okay now we're going to say at app.get and we're going to Define the root endpoint which is going to be slash fruits okay here we're going to specify the response model is going to be fruits and this is a get endpoint that's simply going to return all of the fruits that we're storing in our database so our app is very simple we can create fruits store them in the database and then we can get a list of all of the fruits we've created okay so we need to define a function now so we're going to say get fruits and we are going to return and we're going to use this pantic mod here to take this fruits from our database and return it in a format that's consistent with fast API and with the api's uh endpoint story that we're writing I know that's not super clear so I'll explain it in one second but we're going to return fruits and we're going to say fruits is equal to the memory DB at the key fruits okay so what's happening is when we go to the/ fruits endpoint we are going to Define that the response model that we want to return from this endpoint is fruits now fast API will be able to look at this and automatically know how we should convert this python object into Json or JavaScript object notation that we can return from this API so that our front end can ingest it and read it that's why we're defining the response model then we say okay the name of our function is get fruits we can call this anything that we want when we go to this endpoint this function will be called and we're going to return an instance of this fruits class this will simply take our memory DB with our fruits just kind of wrap it into this python an object and then return it as nice Json so our user or our front end can use it okay now it actually already knows what I want to do next which is kind of scary what's happening with AI here but we're going to write it out oursel the next thing we're going to do is have a post end point we're going to post to the fruits endpoint again this time we're not going to return anything so we don't need to have the response model and we can say Define addore fruit we can take in a fruit so we can say fruit is equal to fruit and then we can say our memory undor database at fruits and then we can append the fruit and actually I lied sorry we are going to return a fruit so we'll just return fruit and we will say that the response model this time is fruit rather than fruits okay so what's going on here we're saying okay we're going to have a post request here which is typically what you use when you want to create new data we're going to take in a fruit from the user so we use this pantic model up here that we defined fast API will automatically validate that we are passing a valid fruit which in this case just simply has a name but we could add anything else that we want to it if it's correct we're going to add this into the database by pending it to the fruits list and then we'll return that fruit just so the user knows which one they added okay that's really our entire API so what we can do now is we can run the API and we can test it out and make sure it's working and to do that we're going to write the following line we're going to say if uncore name is equal toore Main and again scary how well it knows exactly what I want to do here I'm going to say uicorn do run app I'm going to specify my host which is going to be equal to 0.0.0.0 which just means run on all active IP addresses and I'm going to specify the port of 8,000 which is default for fast API so this line is important because this will actually run the application for us and now what we can do is we can just run this so we can use kind of all of the pie charm tools to run this app and all the configurations and stuff or we can just run it from the terminal which is what I'm going to do to make sure all of you are able to follow along okay so I'm going to open up my terminal here and now that we've written all of this code I'm going to type python main.py in my activated virtual environment and we're going to start running our API on Port 8000 okay amazing so now the API is running and if we want to test this we can send curl request we can use postmen and we can test this without having the front end if we want to do that and a simple way to do this is just to go in our web browser to Local Host okay Port 8000 and type slf fruits when we do this we should see that we get fruits colon and then we get this list and the reason why this is working is because we are sending this request from the same server in which this API is running so there's no issues and we're not running some other server or on some other port or something like that anyways you can see that I get fruits which is an empty list and now if I want to send a post request that would actually require that I write a custom curl command which is some way that you can send requests from the terminal but since we're working in py charm we can test this using their HTTP tab now for testing the post endpoint here in py charm I have a few different options that make this really easy so I can click on this button right here and go to show all endpoints of application if I do that it shows me the different endpoints here I kind of Click through it that's useful but what I actually want to do is I want to generate kind of a test for this endpoint and run it directly in pie charm so if I click here instead I can generate a request in HTTP client so I'm going to do that okay you can see that it kind of generates this endpoint for me but notice that it doesn't have the body so if I want to have the body which I need to send that contains for example the name of the fruit we can get rid of this and we can go to plus and we can make a post request with parameters body or with a text body up to you so I'm going to go with text body because that's what we need and I just need to change this to be Port 8000 I need to change this to be fruits because that's the end point we want to hit it already has the header that we need here and then directly inside of this I can just specify the fruit that I want to create so I can say something like name is a pair if I want to make a pair okay now because my API is running I can just press on run and you'll see that it sends the HTTP request we get the response it actually saves it in a file in case we want to look at that and I can close this I can go back to my terminal and notice that we got okay when we sent this request now if we want to send another request we can do that so we can just say okay let's make a new get request and where do I want this to be it's put it at the top okay so I'm going to go 8,000 slash fruits and then I want to run this one so I'm just going to click on run and you can see that now we get our fruit with which has the name story of pair okay so I know that this doesn't work for you if you're not running in pie charm but I'm just kind of quickly showing you these features cuz I think they're pretty cool and they do allow us to test the API before we write the front so at this point in time we have the API it's working we've tested the end points and now what we're going to do is write the front end that can communicate with this API so we can leave it running if we want there's no reason to shut it down and what we're going to do is make a new directory now so I'm going to make a new terminal instance here I'll just leave this running and make sure this is inside the root of your project so not the backend folder but react fast API and we'll create a new V react project so to do that we're going to write the following command and we're going to type npm create V at latest and then this is going to be called front end because that's the name of my directory and I'm going to go D- template and then react now make sure you have node.js installed for this command to work okay so I'm going to go ahead and press enter here I'm just going to select that I want react and I'm just going to go with JavaScript I don't need anything else okay so now it has created this directory for me so I'm going to CD into that directory so CD front end I'm going to type npm install to install all of the packages and I'm going to install an additional package called axios which is going to make Center request to our API significantly easier okay so now I'm going to type npm install axios to make sure that I have this this allows us to send requests significantly easier and we're going to start setting up our project so all of the code that I'm about to show you here is available from the link in the description this is not meant to be a react tutorial so I'm not going to write it all from scratch but I will go through the important compon component so you really understand how this works so what we need to do is we need to go inside of SRC here inside of SRC we want to make the directory kind of look as the following we want to have a new directory called components where we're going to put some important components for example adding the fruit viewing the different fruits that we have we have our app.jsx we have our main. jsx and we're going to make a new file called api.js which is where we're going to put the axios definition for calling our API so I want to start with that because that's probably the most important thing so I'm just going to copy this in here so I'm going to say import axios from axios I'm going to say axios Doc create okay I'm going to call this an API and I'm going to Define my base URL as the URL of my uh backend okay so in this case the fast API backend is running on Local Host Port 8000 if it was running on a remote server you would change it to whatever that server IP address is now what we're going to do is rather than using normal axios to to send requests we're going to use this API variable and rather than having to write out the base URL every single time we can just write the endpoint that we want to call so later on if we want to change this endpoint for example we don't need to change it in 100 places we can just change it here and then the entire app will go to use a different backend this is best practice and what I'm kind of setting up here okay so now that we have api.js what we're going to do is add our two components so inside of components I'm going to say new and I'm going to make a new file called add fruit dot or add fruit form sorry. jsx okay now I'm just going to copy in the code here and all of this again is available from the GitHub so I come here I show you I'm just copying it right from the GitHub where I have it in the readme file so fruits add fruit form Etc okay so you can see we have the add fruit form in the ad fruit form what we're doing is we have a simple form it has the name of the fruit and we have a button that we can press to submit and when we do that what we're doing is calling this function that we pass as one of the props to this component and this is where we're going to actually handle the network request to send to our API to create the new fruit we're going to look at that in one second okay now we're going to make another new component and this is just going to be fruits. jsx okay so I've pasted this in here and I'm just going to run you through the important parts of this code now notice that I've imported API from api.js which is where we defined our axios configuration and I've imported the add fruit form from the component we just made now inside of here we have two functions that said Network requests one add fruit and one fetch fruits now fetch fruits is what's getting the fruits by sending a get request and notice that all we had to do to do this was say API doget and then we've got the slash fruits endpoint now this is going to use this axios configuration that we defined it's going to use this as the base URL and simply send a request to/ fruits since we've Now set up the core's origin it means we're not going to get an error here and we can grab all of the fruits from our API and display them on our front end this is how you send in the get request then we have a post request so here what I've done is I've created an add fruit function which I pass to my ADD fruit form so it gets called when we add a new fruit and notice that all we're doing here is we're posting to slash fruits okay and we're just specifying the name of the fruit that we want to add now I know that this is basic but I'm just trying to show you two examples right getting and posting okay now that we've done this what we're going to do is go to app.jsx and we're just going to copy in that component which looks like this all we're doing is we just have a little bit of a header here and then we're just rendering this fruit list that's it okay so very very simple uh kind of front end here with react so now kind of the Moment of Truth we've got our front end we WR wrote Our api.js we can send the request now to our back end and what we're going to do is just run the front end so to run the front end we're just going to type npm run Dev here now when we do this it's going to spin up a server on Port 5173 so just as a sanity check we can go to our back end we can look in main.py and we can make sure that we're allowing the origin of oh look we were allowing 3,000 but it should be 5173 so whatever Port your front end is running on you want to change it to that however let's see what happens if we leave it on 3000 and try to send this request okay so if I go here I've opened up my front end I'm on Port 5173 I can go to inspect and console and notice that I'm getting this issue it says access to HTML request you know local hostport 8000f fruits is blocked from this origin we cannot access it because of core's policy so that's what I'm talking about this is the issue that most people run into so the way that we fix that is we change this to be the correct URL so 5173 we save and we make sure that our server reloads here so we can just close it down and rerun it okay and now if we go here and we save let's go into to the console again so inspect let's make this bigger console notice we're no longer getting that Coors error and to really make sure this works we can add the fruit for example pear and you see it gets added here we can go with what do we want Apple and you see that it gets added here no problem and you can see that the post and the get to these end points are happening successfully there you go that's how you connect a front end and a backend using fast API and react okay now I'm not done yet I'm going to give you guys more value as I always always do and I'm going to share with you a template that explains how to do this a lot more complex when you're dealing with authorization and authentication now I'm just going to do this on GitHub because I don't want to spend a massive amount of time here but you'll notice that if you look at the code on GitHub we have this simple folder which contains all the stuff that I just showed you how to make previously and we have this off folder now in the off folder we have the same stuff we have a front end and we have a backend but I've set up a sample project that uses user off authentication so it allows you to for example have a persistent database to Hash users passwords to sign in to sign out um to store data in the database persistently now I'm not going to run the project but I will quickly kind of show you some of the main files and you can have a look at it in case you want to see a more advanced example so for example in our backend we have this authentication folder in here I set up all of the stuff that we need I know it looks like a lot of code for handling user authentication in fast API with something known as JWT tokens if that means nothing to you don't worry okay next we have our let's go into database. piy this is all the stuff for initializing the database and giving you a reference to it so you can use it later on we have models.py this is how we specify all of the models in this case we have a user model that we're storing in our database we have a schemas dopy this is defining all of the kind of pantic models that we need for our fast API data validation we of course have requirements.txt which has some additional requirements and then we have our roots or our routers now we have an authentication router which handles registering and grabbing the user token which is uh doing that for authentication so for signing in essentially and then we have user doy which allows you to get information about yourself but only if you are authenticated so I don't want to go through all of it but if you read through the back end you'll kind of see how this works it's a really solid template for handling user registration and authentication and protecting roots in this case we protect the root by making sure that we have a current active user before we allow someone to activate this or to run this um what do you call it endpoint okay so that's it for the back end and then on the front end is pretty much the exact same thing you'll see that if I go to Source I have this api.js file this is a bit more complex but I've put in the different endpoints like what we need to do to log in a user to register a user to fetch the user profile and then we use that within the front end that I set up which you can run if you want um to kind of You Know sample the application in terms of signing in logging in registering Etc okay so that is it guys I know that was a lot I talked a lot I showed you a lot of stuff but I wanted to be as detailed as I can when it comes to connecting fast API to react I know that there's a lot of complexity here there's a lot of stuff that can go wrong obviously your application is going to be different than what I wrote here but I hope this was a decent guide to get you started and at least fix that main course issue that you've probably seen before and give you a bit of info about kind of how to set up the project completely from scratch if you appreciate this make sure to leave a like subscribe to the channel and I will see you in the next one [Music]