Dockerizing Python Flask API and using it with React

hello everyone it's me ana fan welcome back to the channel in this video i'm going to show you how you can dockerize a flask api and then use it with react so over here i have a really really simple api as you can see we have languages now we have python java typescript uh javascript and some cool looking languages and we have a route a home route which just sends some json called status online and then we have a get languages endpoint which returns us all of the languages here now if you go to this endpoint if i refresh you're gonna see this and now if i go to languages you're going to see these programming languages and over here i have a really really basic react app like i didn't do anything i just used create react app and it's the default app i haven't even touched this yet so yeah let's see how we can dockerize this api now the first thing that i want to do is i won't be touching the front end i want to integrate post with sql with this so let's start off by just making a simple dopper file and then deploying this on docker so we stopped this and now let's get started with this so i want to have a requirements.txt file and in the requirements.txt file i'm going to have flask and also i'm going to have unicorn now i'm going to tell you why i'm using unicorn so you see since we're making this like for production use we don't want to use flask's development server as you can see over here when you start flask it says this is a development server do not use it in a production deployment that's why we're going to be using unicorn now uh we're going to be using unicorn as it's like a really really good server for frameworks like django and flask so let's get started with it the first i want a docker file now in the docker file i will be using the python 3.8 image now there's a reason why i'm not using the alpine image and if you have ever used docker before you might know why people use the old kind image alpine images in most cases they are really small in size and lightweight they basically have the minimal stuff you need or any language or software that you're using the image for but the issue with python is in docker is that all pine images for python are really big and they're sort of slow so that's why i would rather recommend you use the uh slim version or just the normal version so since i don't have the slim version cached on my computer i'm just going to be using the normal version so let's do from python colon three point eight now i don't want to go with three point ten three point eight is is my stable version it's it's my cup of tea so we have the uh we have the image selected and now let's make a working directory slash app this is going to be our working directory and now what i want to do is i want to run i want to actually copy the requirements.txt so we are copying the requirements.txt file from here and pasting it to the uh container app folder and now let's run pip3 install dashr requirements.txt after that we're going to copy all of the code all the app.pi files and stuff from the host machine to the container and i also want to expose the port 5000 because that's where i'm going to run the flask server and now we can have our entry point so since we're going to be using unicorn you're going to put the cmd unicorn and the command it's going to bind to 0.0.0.0 colon 5000 so it's going to bind to the containers port 5000 and it will use the app class or sorry the app variable or object from the app.pi file so i hope you understand how this works and if you don't understand how unicorn works or if you've never used it before trust me it's really awesome i'm going to leave a link in the description to you guys to unicorn's documentation so have this right here and let's try to build this image so let's actually do docker build dash t and call it flask app or let's just call it a flask tutorial and let's build this image right so this image has been built and now let's run this image so let's do docker run dash p and i want to map this to port 80 of my computer i want to map the port 5000 of this container to port 80. so that means if i uh visit localhost port 80 on my computer i can access the port 5000. and then let's do flask tutorial was that the name of our container yes that was the name of our container and now you see if now it shows that unicorn has started so if you go to google chrome or your browser and right now it's on port 5000 but if i go just on localhost you see it shows status online and if i check my mobilizer it shows that server is unicorn right now this is sort of cached so yeah don't pay any heat to this don't pay any hate to this if i go to network and refresh you see that the server header is unicorn that means our unicorn server is not working if we go to slash languages you should be able to see this you see it shows the python java type script for some reason it took really long to load i don't know why but yeah the api is working right now with docker and what i want to do now is to connect this with postgresql alright so get to get started with post with sql i need to actually uh set up a docker compose if you don't know how to use dropper compose i'm going to leave a link to a tutorial that tutorial's not from my channel but you guys will find that helpful so in our docker compose we're going to specify a version because it's always good to specify version i'm going to use version 3 and now let's specify all of our services so first our service would be app that's our flask app let's just call it backend or just let's just call it flask app okay and the build would be dot because i'm using this docker file in the current directory restarts always so restart will basically just restart the application or container whenever it crashes or stops and uh right now let's just do ports and this will be mapped to at5000 so as i've said before it's port 5000 on the container and port 80 in our host machine and the container name would be flask app how about that okay so we have this and now let's use postgresql so i'll create another service called post rest and the image i want to use postgres11 uh i'm going to use postgres11 alpine that is a really really good image and now we also want this to be restarting always and i want to set a volume for this so volumes would be a dot postgres so or you can just have it dot posters data so basically what a volume does is like when you're actually storing some data in your container you might you know like stop or restart the container so any data inside the container might get deleted and that's why we have volumes so it will create a folder here and anything inside that folder would be available in the uh docker container at a specific directory so i want all of postgres's data to be available in our volume so all of postwar sequels data stored in this directory would be available in this directory and now let's put a container name so container name is going to be flask postgres now uh puzzus requires environment variables as far as i know so it needs post risk db that's going to be the name of our postwars database let's call it flask and if i remember correctly it requires a postgres is that pass it's probably password and the posers password i want to set this to an environment variable postgres pass and let's create a dot and file so docker compose basically takes your dot end file and then it stores like whatever values you have there in the environment variable so i can just use it like this and i can have a postgres pass called pogchamp let's have this here and for the postgresdb we can also make another one postpress db let's call it flask app and let's also set it like this great now for the so now we we want to access the database from flask so to do that we also need the same environment variables and i also need to link this flask app to our post list so if you don't link it you won't be actually able to access this post race database container from your flask app container now for that we use links so links and then it's going to be postgres that way i can actually like just type the name of this name of the service and then i can discover this container and then use it yeah you have this and i also want to do depends on post press and that way it's it's it's going to be better like if post rest has any issues this won't work so yeah we're going to have them like this and yeah so yeah postgres setup now let's work on uh now let's actually work on some of the uh like back end it's our flask app and first i want to actually have flask sql alchemy now if you don't know what fast equal alchemy is it's an orm for fl uh sql especially for flask sequel alchemy okay yeah and now let me import from flask c4 alchemy import sequel alchemy okay great and i want to actually import os because you see we have these environment variables here like in the container i want to use the os module to actually access these so yeah let's make an app.config and first we need a secret key because you need this for like sessions and stuff let's say pogchamp secret okay and then we also need a sql alchemy database uri i think sql alchemy database ui and this would be a string oh it's going to be an f string because we're going to put some stuff here and this is the post press database uri format so this is going to be the user users always postgres and i wanted the password should to be what is our environ postgres pass and the at it's going to be the name of the host the host name where it's hosted at since we're using docker compose and this is linked to it i don't need to find out the ip of this container i just use the name of this container and just put that in here and then let's do five four three two slash and this is going to be our db so we can do os dot environ postgres db uh did i mess something up oh yeah it should be like this all right now we have this here i also want to actually like sql alchemy it's not necessary but sql algae sometimes gives me issues with this it's the uh sql alchemy track modifications i think draft modifications modifications false now this shows a warning if i set that to true so yeah and now let's make a database interface so let's do s db it's going to be sql alchemy it takes the app in here and now we can make a model so for the model let's just do something like a really simple class language it's going to take db.model and then we can have an id which is going to be dv.column db.integer this is going to be just a primary key primary key equals to true great and let's have a name that's going to be db.column db.string okay great so we have this and i want to do dv dot create all every time the server starts i want to do creator great so now we have this and let's try to actually build the containers and see what happens here yeah so we can just do docker compose up dash build dash d so that it's detached let's just see how long it takes to run right great so let's take a look at the logs last app as you can see it gives you an error here it says key error for post rest pass oh i see the issue here it should be password let's do docker compose down so the issue was you see like i actually put this here instead of this that was the issue all right great now we can see the logs for flask app and as you can see it also gives us another error and that is i forgot to actually install the postgres drivers okay those are required okay so i made a few mistakes and uh yeah this is the correct database uri it should be postgresql colon double slash postgres colon os environ like you get the point also the link will for the code will be in the description so you can actually use this on your own because i actually made tons of silly mistakes for example i forgot to put ql i put a dollar sign here and then i also forgot to you know put the correct key in here yeah so let's actually set this to down and restart this and let's see the logs now it says that this is working now one thing with uh post rests and docker sorry one thing uh the problem with post rest fast and darker is that the first time you start flask and dot like post wrestle the first time uh flask would not be able to connect to postgres because postgres has not been initialized so it's doing all the startup stuff and flask has already started and it's trying to connect to the database but it won't be able to since the database hasn't started yet yeah but after uh the first time it will work so yeah that is not a problem here and yeah so we have this and we have this table for language so let's actually you know query some languages if we go to the browser and if you go to languages right now it should not return anything right so for some reason it was taking a while for it to load but yeah um so as you can see i returned nothing here but this time let's actually return some languages so over here let's actually query the language the languages equals to language.query.org and we can just return some json data so jsonify and we can have some data and then we can do something like this here we can have an array either we can loop over let's do a list comprehension here so you can do for language or let's do lang in languages you can have this and we have name and it's going to be lang dot name so if you don't know how this works let me actually show you back dot slash sorry python dash m black or right okay so what this is showing here is it's just like looping over every language in the language list it's it gets this language object and it's accessing the name and setting it in an object here we have this and yeah now we can actually stop this and restart this again so let's restart this now if you go here it shows data and there's nothing in it because we have not added any data yet now for the sake of this tutorial i want to actually use flask admin which is like an admin interface for flask and by default flask admin has no authentication and i won't be adding any authentication in this video but flask admin has made it really really easy for you to be able to add your own authentication methods and yeah i also have a blog tutorial series using flask and that tutorial series uh shows you how you can add custom authentication to the flask admin dashboard right now let's just use a really really simple flask admin view so the first thing i need to do is actually get flask admin so i have it installed already on my computer but not on my docker container yeah let's actually do from flask admin import admin and we also need from flask admin dot contrib dot sql so it got some default sql alchemy stuff model view so we gotta import model view from here and then we also need um a we want a custom theme for this so let's do app.config flask oh this is gonna be flask admins watch and this would be the cerulean theme i forgot how to spell that is this the correct one i think so yeah we have this here okay and let's actually make a thing here so let's make an admin view so admin equals to admin this is going to take our app name will be programming languages app and then the template mode would be bootstrap 3. i'm not sure if this supports bootstrap 4 yet because i have always been using bootstrap 3 for flask admin uh so yeah and then we're going to add a view so admin dot add view this would be a model view and this would take the language and the db dot session it's going to take the database session from here okay so now we can just uh take down our docker container and then we can restart it again all right so this is running we can take a look at the logs here yeah it's working perfectly but giving error here trying to connect and yeah sometimes it faces it has this issue here you can take a look at the flask postpress thing and it says database is skipping initialization one thing we can add here is time dot sleep so we can do import import time and then we can just try time to sleep five that's how i used to manage everything so we can take this one down and then we can start this again great now let's take a look at the glass gap and yeah you see it's it's now working perfectly so basically what this does is push rest takes some time to actually um start up the app and we wait for five seconds and yeah now it doesn't have an issue so right after refresh you see data's you have no data now if you go to admin you're going to see a cool looking admin interface yeah and as you can see over here let me actually reduce the size a bit yeah this looks okay okay so you see this over here um we can go to language so this is basically what flask admin does for us it um this basically makes our life really really easier now for some reason like i tried this just yesterday it wasn't taking so long but today it's actually taking really long okay so now right now we don't actually have anything here but we can just create something like we can create a programming language uh let's just call it python we can save and add another and call it uh java because that's my second favorite programming language and then we can have typescript and yeah i guess yeah that's probably enough we have three languages and i've actually go to the home page that's right now the homepage if you go to the languages page you see we have three languages over here python java and typescript so this is basically how you make the backend and now i want to actually use this on the front end so yeah let's see what happens right so uh this is my front-end code i'm just going to quit all of my backend code and we can go to our front end we can delete all of the useless stuff example we don't need we might need the uh the css file that's gonna move the logo.svg yeah let's just remove the logo.svg and then report web vital setup tests we don't need these and now we have the front end here so one thing i can do right now is remove these stuff here and i can also remove the svg here only for this and then i can just type a flask docker react with flask api on docker and i can just do yarn start or npm start depending on the package manager you're using and let me have to refresh this it says report web vitals can't be found okay no problem i can remove this here and this and i'll find module okay great so it now shows react with flask api on docker great we can go to the app.css and it's display flex line item center i don't think we need one item center and extraction column i don't need any of the flexbox stuff it's really really not required for me although i can have this display flex here yeah this flex is important justify content center yeah that was the thing i really didn't need we have this over here and now i want to actually make an api request for this i have our app.gis component and i want to import use state so we can do import use state use effect from react now these are just simple react hooks so we can have this and now we can also have you know just a url on li so we can have a ul i just want to see how it looks uli we have python and we can refresh this and app is not required here oh sorry so it's showing this over here but i don't want that i want this to be over here yeah okay great so right now this is way over here okay so after struggling a lot with the css i think this looks great so yeah we can now have this and i want to create a state variable now so const and it's going to be languages set languages and this will be use state okay and this will not have anything yet let's just have it an empty array or maybe undefined or just no yeah it takes me a while to actually choose my variables okay so now we can actually have this part here where if you have languages then return this else we return nothing okay so yeah this is where all the fun stuff works right now we don't have any languages and if we do have a language it's called python yep so we have this over here and now let's have a use effect so we can have use effect and we can have this here let's set it like this and we have fetch batch so we can do http localhost and then do slash languages you can have a dot then we can have response and then we can just return response.json and then we can have dots then we can have data we can just have uh json and then we can just so we can just do set languages json so it's going to be json.data because uh yeah it's going to be json.data because on our flask side we actually return this data over here if we this would react right now we don't have anything here if languages do work we just i'm just going to set this to undefined right now if you actually go over here you're gonna see this issue here this is a course ish issue so yeah this is a problem here and basically just giving you like all storage requests are not working the course issue here and that's an issue on flask site so we can actually fix this really quickly now we need to go to the requirements.txt and we need to add another library called flask course and in our app.pi file we're going to import that so from flask course import course cross origin now i don't have this installed on my computer i'll use this on my dollar container but yeah that's that's not gonna be a problem and we can do uh course and it's going to be course and it's gonna take our app and now we also need to have another config and this config will be course our course headers and this will actually check the content type so content type so this is the header that will be used here and yeah and for our uh this end point we're going to use at cross origin so we can actually specify what specific endpoints we want to be like we want to have course enabled for we can go to our power shell here and we can stop all of the containers and we can build them again this time course should work [Music] right and now we can check the flask app logs it's working right now and as you can see for some reason this is showing up but it does say that like we're not having any issues here so that means it is working so we can just do a console.log languages okay yeah so it does receive all of those languages which is great okay so yeah we have that and now we can run a map here so we can do languages dot map and then we can take the lang and we can just return an lie with the blank dot name okay and yeah we have this it does say that each child in the list should have a unique key problem but right now i really don't want to you know have a key here or at least i can have an index but this doesn't give the problem here right so i forgot how to fix that but that's completely fine we also have languages here okay oh god okay yeah i forgot that this is actually an issue here that's completely fine yeah so we have these languages here so if we go to our uh admin page we go to the language page and if we add something else maybe we can add something like rust yeah into rust save and add another okay we'll get a list okay we have two rusts here not good okay great so yeah now we can actually refresh this and it does actually take a while for uh this to load for some reason over on my computer yeah okay as you can see now it also shows rust over here which is awesome if you actually delete one of these from here it's going to disappear from here let's actually delete python from here maybe let's just do typescript or java or rust let's do the java because yes okay yeah great if you refresh you see we have python types with rust but no java so that's basically how to do it with uh flask docker and react that's it guys i'll show you how you can make a react application just this really simple react application with a flask api that's running on docker and if you enjoyed this video or if you found this helpful please subscribe to my channel and like this video it really helps me out a lot for the amount of work i put into this video and yeah anyways have a good day everyone bye

Channel: DevGuyAhnaf

Views: 282

Keywords: python, flask, docker, react, docker compose, postgres, flask sqlalchemy, flask cors, react cors, docker api, docker rest api, flask rest api, flask react, flask admin, devguyahnaf, ahnaf zamil, coder's system, k.m ahnaf zamil, docker react flask, flask backend docker, flask postgres, docker postgres, tutorial, coding, javascript, jsx, web development

Id: grtjkDh5DmQ

Length: 33min 1sec (1981 seconds)

Published: Mon Jun 21 2021