Building Full Stack Applications With Python and ReactJS

hey what's going on guys welcome to docker community all hands in this python track i'm going to teach you how to build a full stack application using react.js for the front end as well as fast api which is a python framework for the backend so we can build apis microservices and it's really awesome so the idea is that we want to have our code then we want to dockerize it build a docker image run a container for the front end the same for the backend docker file image container and then having these two containers talking to each other via http using the docker network so without further ado let's kick off all right let's begin with our back end so as i said we're going to use fast api which is a python framework high performance easy to learn and it's very fast to code and the cool thing is ready for production now this framework is so so easy to follow and to build microservices really fast so in here you can read on their official documentation you can see that they basically say that it's fast fuel banks easy short robust so on and so forth and then they also have a bunch of great documentation now don't worry about this because i'm going to i'm going to take you through the bare minimum that allows you to get up and running with fast api but if i scroll down in here you can see that they give you an example how to get started so you basically install pip you also install uv corn so this is the asynchronous service for production and then if i scroll down you can see some source code in here so what we're going to do actually is let's just take this command in here and i'm going to open up vs code and i already have a folder so i'm just going to paste that command and obviously it doesn't work because i've got pip 3 in here just like that now it's installed and let's also install evicon so i'm just going to take this command in here command c and paste it and again pip3 i don't know why i keep on forgetting pip3 but there we go so now we have everything installed let's create a folder in here so folder and i'm going to name this folder as back end and inside of this back end in here we're going to have a file called main.py so main.py now within this file this is where we're going to write some python now if i go back again to the documentation in here so you can see that there already gives us some boilerplate code that we can basically just use so i'm going to grab this and if i go back and in here what i need to do is cd into back end first and then i'm going to paste that command so uv cone main app so main is the name of the file and then app is this guy and then dash dash reload means that anytime you make a change just restart the server run this and you can see that it's up and running if i navigate to localhost a thousand so here localhost and then 8 000 have a look you can see that we have hello world so this was super super quick you see that fast api is indeed fast now let's just go back for a second and in here so have a look so we have from typing import optional so this allows us to work with typing in python and then fast api so this is the framework itself this is how we initialize it so if you've done any express js for example it's fairly similar and then you have annotations so you have your methods and then with your methods you can actually um have these annotations so app dot get so if you are using delete for example so http delete you say app.delete app.post app.put so on and so forth and then basically you have your method so def and then the name of the method and here you can see this is a path variable and to be honest this is it now what i want to do is let's just start with a database so here i'm going to have um i'm going to say db and this will be a db of and then this will be a list and we're going to have a list of person in here so here i want to say equals now let me actually create the class so i'm going to say class this will be person and this will extend base and then model there we go and this is from pidentic based model and with this in mind i can just basically now add my fields so here let's just say id and the type will be an integer so int and let's also have name and the type will be string and let's have h and i and the age will be also an integer so at this point i can have now two people oh actually i need to import a list right here from typing so here we don't need optional so let's just import list and there we go now let's have a person in here so i'm just going to say person and here i'm going to say id equals to 1 and then name equals to let's just say jamila for example and then age 22. so let's also have a second person in there and if i put comma or actually not even comma but i just have to say h equals two and then h equals two there we go cool so i also have to change this so let's just say alex and alex is 18. cool so at this point i can also change the path in here so here i could just say for example api so forward slash and then api and here instead of returning this json object in here or dictionary i'm just going to return db just like that and if i save this this actually fails because it's complaining about optional so let's just get rid of this method for now and let's just return db save or good go back to my web browser and now if i send a request this is a 404 not found because we changed the path to api so there we go now you can see that we have two people so jamila and alex so you can see how the development with fast api is so quick so we have the api in place let's build the front end that will basically consume the data from our backend so for this we're going to use react.js and react is just a library for building user interfaces using javascript and you can also use typescript so let's open up vs code and in here i'm going to open up a new shell and i'm going to basically use create react app using npx so npx create react app and then front end so this will give us a folder so if i run this so we should get a folder here called frontend and it's just going to install things for us in a second so let this finish there we go you can see that this is done so it took a while but now what i want to do is i want to cd into front end so cd into front end and before i run npm start let's also install acos so npm i and then seo so acos allows us to issue http requests so it's just rest client and now if i say npm and then start and if i go to localhost 3000 have a look this is nice so let's just go back and in here open up frontend src app.js and what i want to do is i just want to get rid of everything in here for a second so everything and let's just return hello there let's get rid of the logo and save this also app.css let's just center or actually index dot css and let's just um indent or actually align things so text align and then center save this go back have a look we have hello and then it's centered so nice and easy next what we're going to do is we want to use acos to get the data from our backend so here we're going to do is we're going to say import acos from and then acos and we also want to import from react we want to get use oops use and then state as well as use in an effect from and this will be react so this allows me to basically deal with state and this allows me to run or actually fetch the data before the component gets mounted so to do that we're going to basically say in here const and then here i'm going to say people and then set and then people or maybe users it doesn't really matter so people and then equals to and then use and then state and the initial state will be this empty array now that we have people and set people we can use use so here i can say use and then effect this takes a callback and within this callback we're going to fetch the data but the second argument is an empty array because we don't have any dependencies now here i could just say acos dot and then get and the data that i'm going to get is forward slash and an api we're going to use a proxy to bypass course now here i'm going to say dot and then then this gives me the response and with the response i can just say set and then people and res dot data so this is the data that i get back awesome now all i have to do is use this array and then basically have some html which is rendered so this is a functional component by the way now we're going to do is the following so here i'm going to say return and then people dot map and this takes a callback i'm going to say p and this is the index and we're going to return so a paragraph so p tag and this needs the key so the key will be the index and now in here i'm going to say p dot id take this space space or actually paste a couple of times name and this also will be h so this is so in here have a look so id name and then age so uh let me just save this and this will not work basically have a look we have blank page and this is because we need to open up package.json and in here let's add a proxy so proxy so this is mainly for development purposes and you shouldn't do this in production so here i'm going to say http column forward slash local host and then 8 000. so this is where our backend is running and i've just realized that this should be one level down like so and the same with this comma and there we go so if i save this and i think we need to kill the server and start again so npm start and if i check my browser i can see that it's empty so let's have a look app.js and of course here i need to return that go back and check this out so now we have one jamila 22 alex 18. so this is really cool so if i add someone in here so in my back end so let's just duplicate this and come here if i just say for example ali and i just realized that the ids are the same so 2 3 and ally is 15 save this and then go back reload you can see that it updates automatically so this is beautiful stuff and you see that the ui is kind of minimal right now and if you want you can use for example material ui and then react and this gives you a bunch of components that you can use to build your applications now because here i don't have much time i'm just going to keep the ui as simple as that because the idea really is for you to learn how to put everything together and build a full stack application so now what we have is we have the front end which is sending an http request to our back end and everything is working fine next what we want to do is we want to dockerize the front end as well as the back end so let's learn how to do that i'm going to open up vs code so let's begin with our back end so in here so within our backend let's just create a new file and name this docker and then file now for this docker file we're going to use the base image so from base image and this will be python so python colon and you can kind of pick any version really in here provided that it's actually the latest but for me i'm just going to say 3.9 so this is the one that i tested with and here i'm going to set set the working directory so this will be forward slash api and i'm going to copy so i'm going to copy so let's just copy and here i'm going to say dot forward slash requirements dot txt to forward slash and then requirements.txt let me just take this now i'm going to show you how to create this in a second but this is it now let's use pip so i'm gonna say run so run and then pip oops and then install dash dash no cache and then there we also want to upgrade and then dash r and here this is the file that we want to basically install from all right nice and simple so the last thing that we need to do is we need to copy or actually on the last thing but we need to copy so we're going to copy dot so basically everything into forward slash api and then finally we want a command which we want to execute so remember we started the server with uv cone and basically if i show it again so here if i stop this so stop this and then have a look uv cone and then main app dash below so let's just take this we're going to paste that so this will be a second argument comma and then main app we also want to have host so dash dash host and this will be localhost so 0.0.0.0 and finally if you want you can also specify the port so dash dash port and the default port is a thousand but if you want to change that you can absolutely do it so this is the command that is going to run now if i save this let's basically generate this file in here so to do that let's just say pip and then three freeze and this will be going to requirements dot txt and now you should see that we have requirements txt in here so cool so this is pretty much everything that we need for our backend with this we have to build the docker image so for that make sure that you have docker desktop up and running so in here i've got a couple of containers which um are basically running so postgres and mini cube but we're going to run our containers in a second so here also you can see that docker desktop is running and i'm on a mac so i'm using docker desktop so go ahead and make sure that you have docker desktop up and running then what we can do is so within back end we could just basically say docker build dot dash t and t for tag and here i'm going to name this back end press enter and you can see that now it's building the image so oops there was an error so upgate so uh where is the update so app grade there we go save this let's try one more time and hopefully everything should just work bingo so everything is working now let's just run this with docker so here i'm gonna click the screen let's just type docker run dash dash name back end dash dash rm and so that basically as soon as i come out of this process then the container will exit as well dash p so here we want to expose 8000 to 8000 and then the image is called backend so i think this is it so let's just give it a try and it looks like we have a syntax issue here so i think it's this comma in here so let's just save this we're going to build the image again and let's try and run again and there we go yeah so it was this comma in here so now it's running on localhost 8000 so this is within the container but we are exposing so we are exposing a thousand from the host to a thousand within the container so technically if i in here just reload this it should just work right so this now is coming from the container and not my local machine all right so we have the back end which is now containerized now let's build the docker file build an image and then run a container for our front end so back to vs code and let's just collapse back and open up front end new file and this will be a docker file and in here let's just use the base image from this will be node and then colon and then i think there's 17 column i think there's an alpine version in here yes so this is a smaller image and now what we need to do is so basically it's almost the same thing that we've done with our back end so here we need to set the working directory so work there and here i'm going to say forward slash app instead of api then i want to copy so i want to copy the package so package and then because we have dot and then dash so i'm just going to say star dot json into forward slash app then i want to run npm and then i dash dash silent so we can just ignore all the noise and i also want to install react scripts so run and then mpm i dash g for global and this will be react dash scripts and then add and then the version will be 5.0.0 and basically this right here is so if i show you within our package.json if i scroll up react scripts so we want this so that we can basically run npm start and again this is mainly for development purposes but i would never use this in production right so there's a build right here which you can take the build and then maybe deploy with um nexus reversal or nginx or or maybe s3 on a bucket but for testing let's just basically test things like this so let me just go back in here and there we go so that's it so after all it's done let's run a command and the command will be npm and then start so this looks familiar right so let me just save this now before we run this in here what we need to do is the following so here let's just open a package.json and in here so we need to change a few things so here this will be the name of the container so we've named it as backend so this is uh using docker network because localhost means the container itself our backend is running on a different container and it has a completely different local host right so this will allow us to talk to that container but we need to also create the network which i'm going to do in a second but let's just basically save this and there we go so now in order for us to build this image let's just go to node in here and i'm going to stop this for a second so this is the one running localhost and here i'm going to say um docker build dot and then dash t and here i'm going to name this as front end front end there we go and you could say latest or any version or build number for us latest is fine so have a look it's running npm i and then silent so we don't get a lot of noise in here now it's when you react scripts so just give it a second exporting layers and there we go so that's finished okie dokie now to be honest we've done it now let me show you what we have is so we have the docker image so here for our front end but we don't have the container yet because we didn't run it but we have the container which is running for our backend so now in order for these to talk to each other so localhost on this container is just for this container so if i say localhost and then a thousand which is this other container running so they won't be able to communicate to each other so instead we need to create a docker network so to do that let's go back to the terminal and in here so what i'm going to do is i'm going to say docker network and then create and here you can give any name so let me just say full and then bar there we go so now both containers can use this network to communicate to each other now what i'm going to do first is i'm going to go back to our back end i'm going to stop it so control c so that gets killed and right here so dash rem dash dash network and the network will be full and then bar run it and you can see that it's up and running now we can run our front end so docker run dash dash rm dash dash name frontend dash dash network foo and then bar and dash p so we're going to expose sim port so 3000 on the on the host 3000 on the container and then the image name so front and then end so this should be it so if i run it you can see that we have a problem and most likely i forgot something so let's just go back to here and of course so we need to copy so we need to copy source destination so we have to copy our source code right so this will be dot and then here dot and then forward slash now here we don't want to copy everything so what we're going to do is so not modules so this is useless so we don't have to copy this because we run npm installing here so let's just basically create a file dot docker ignore just like that and here i want to say node modules cool and you can also ignore the docker file all of all these other things but for me it's fine i'm just going to ignore this big folder in here let's also save the docker file let's build the image again so build front end there we go and let's try and run it so docker run name front end network full bar 3000 to 3000 front end so you see that this time it works so starting development server and boom so compile successfully now let's go to localhost 3000 and here so let me just open a new tab so localhost 3000 enter and have a look so this works so this is beautiful stuff so we are actually now from this container right here called frontend we are fetching the data to our backend so this is working beautifully and you can see the power of docker now obviously you can basically check docker desktop so in here you can see that i do have the back end which is running the front end is also running if you want to execute a shell you can do it you can also open from the browser in here i forgot to show you you can stop you can restart and you can delete everything so i'm going to leave it here and it was fun teaching you how to put all of this together now obviously in here you want to have your own database um and you could also use docker basically another container for your database and this is just a quick session and i wish i could spend time teaching you everything you need to know about building full stack applications with fast api and react and obviously we could also use docker compose so you saw that we have these commands docker run dash dash name dash dash rm and what we could actually do is have a docker compose file that we can just run and then all of these containers the network everything is just done for us in one single command instead of us having to run separate commands for each application i wish i could spend more time teaching you about how to pull all of this all together and some of the best practices but hopefully you see the power of fast api and react that's all for now i'll catch you on the next one

Channel: Docker

Views: 29,889

Keywords: docker, containers

Id: Jx39roFmTNg

Length: 30min 17sec (1817 seconds)

Published: Fri Apr 01 2022