How To Deploy A Flask Rest API BackEnd And React FrontEnd To Heroku | Flask React Heroku | 2021 HD

[Music] hello guys and welcome back to the show in today's video we are going to learn how to deploy a flask and react application to heroku the first thing that we are going to do is to create a virtual environment as you know a virtual environment is like creating a world and inside of the world we put all the dependencies that we want inside of that world you can even use docker if you want but i just want to make this very simple so we are going to use a virtual environment so what i'm going to do is to say that virtual env that's p python 3 v e mv like so so now that i have the virtual environment installed what i'm going to do is to activate my virtual environment so i'll say source venv bin slash activate okay so i have the virtual environment activated now the next thing that i'll do is to install flask so i'll do pip install then i'll say flask like so now that i have flask installed the next thing i'm going to do is to create an app.p white file so i'll say touch app dot py then i'll open this in visual studio code okay this is going to be a simple flask application so i'll say from flask import flask like so then i'll create an app which would be an instance of the flask app then i'll pass it the underscore underscore name underscore then i will come over here and i'll say that if underscore underscore name underscore is equal to the underscore underscore main underscore i will say the up dot run like so then our critter function then i'll call this function index and what this function would do is to return a json or return an object which will have a key called tutorial and the value will be flask react and heroku like so okay then i am going to create a file called.emv so i'll go to the terminal i'll do touch that's emv okay and inside of this file what i'm going to do is to put my flask app to up the py then i'll set the flask emv to development so i'll say flask emv and i'll set this to development and we will change this later on to production when we are ready to deploy this to heroku okay so now what i'm going to do is to try and run this application and let's see if it runs so i'll go to the terminal i'll clear this now do you python up the py and you see it is not working it is still set to production so i need to install a package called.emv which will allow flask to pick the emv file that i just created so what i'll do is to terminate this get this package called python.emv so i'll copy this then go back to the terminal and i'll do pip install.emv okay and now if i do python up to py as you can see i am in the development mode so if i go on to this url in the browser it says not found and that's because i have not specified the route okay so i'll come over here then i'll say that adds up the root if someone goes to slash api and i'll also set the methods to get like so okay so now if i should go to slash api like so i have tutorial flask react heroku so we have the backhand ready the next thing that we are going to do is to create the react front end connect the rear front end to the flux back end and then do the hero configuration and deploy this to heroku to create the front end what i will do is to go to the create react app website i'll copy this go to the terminal in here i'll say nps create react app my app like so now that this has completed what i'll do is to go into my app directory go into source and inside of the js what i'll do is to clear everything in there okay because i did not need it so i will close this and then wipe out everything that i have in here okay so i'll clear this and leave just the div for now the next thing i'll do is that inside of source i'll create a directory called component and this component directory will also have another directory called deploy and inside of this deploy directory i'll create a new file called deploy the js i'll import react from react then i'll create a constant called deploy which will be a function that for now will return hello i just want to start the react application to make sure that it works before i start calling the api in the back end so i'll say return dave and for now i just want hello and then i'll say export this okay i'll go to the app.js file then i'll import this deploy component so i'll say the import deploy i'll import this from components deploy and then deploy like so the next thing that i'll do is to say that deploy like so and then start the application to make sure that it works before i connect the front end to the back end okay so i'll go to the terminal cd into my app and inside of my app i'll say npm start as you can see i have hello which means that the react application is working the next thing i'm going to do is to connect the front end to the back end i'll do that by going back to vs code then inside of vs code in the app.js file what i'll do is to import use state and use effect so i'll say import hue state and then use effect i import that from react then inside of my function what i'll do is that i'll create a constant called state and then set state and this will be assigned to you state with an empty object like so and then i will say use effect which will take a function and what this would do is that i'll save fetch and i want to fetch from slash api dot then response if the response is successful so if the response the status is 200 what i'd like to do is to return the response json so return response the json like so then the data i just want to console.log the data for now so i'll say console the log then i'll pass it the data for now okay just to make sure that i'm actually getting the data that i want before i actually set the state so i'll say that then if there is an error what i would like to do is to console the log the error message okay before this can work i need to set a proxy in the react application so that i do not get a course error okay so i'll go into the packet.json and inside the packet of json what i'll do is to say proxy and this proxy will be a url that i can get from the flux application so i'll go to the terminal i'll activate my virtual environment so i will say source vmv bin activate like so then i'll say python app.py i need this url okay so i'll copy this url go back to the packet.json file then paste this over here now if i start the react application it should log the data okay so i'll go to the terminal i'll do npm start if i inspect if i go to console as you can see i have the object here saying tutorial flask react heroku so i now know that the front end has been connected successfully to the back end now instead of just logging the data i will actually set this state to the data okay so i'll go back to visual studio code instead of saying console.log data what i'll say is set state then i'll pass the data like so then i'll pass a prop to the deploy component so i'll say prop and this will be state okay then i can go to the deploy component extract prop from the props objects and then instead of saying hello what i'll do is now say prop dots i'll go to the app.py file and it's called tutorial okay so it has to be prop dot tutorial like so so now if i go back to the browser as you can see i've got flask react and heroical so we know that now the front end has been connected to the back end the next step is to deploy this application to a roku let's see how we can do this before we actually deploy this to heroku if you check your terminal you will realize that the flux front end was making a lot of requests to the back end that's the reason why you're seeing a lot of get requests this is because inside of the use effect we are making a lot of quotes so just add an empty array as a second parameter to use effects so now if i start the application python app dot py and i start the react application you would see that you no longer have a loopy request to the slash api endpoint now that this has been resolved let's look at how we can deploy our application to heroku to do this i will terminate the flash server and inside of the root of the flux application what i'm going to do is to install two more dependencies these dependencies are flash calls and green cone so i'll do pip install flash course like so make sure that your virtual environment is activated so that you do not pollute your local dependencies i'll wait for this to install i'll do pip list to verify that this has been installed as you can see i've got flash calls and i've got unicorn the next thing i'm going to do is to pip freeze my dependencies okay so i'll do pip freeze and i'll do requirements dot tst like so okay so now if i do ls and i do cuts requirement to tst i have all the dependencies that i need for my application i'll now go into the app.py file so inside of the app.py file what i'm now going to do is to import course and cross-origin from flash course so i'll say from flask course import course then i also import cross origin like so the next thing i will do is to provide the static directory or the static folder path to the flask instance okay so i will say static folder and this static folder will be my app because my app is the name of my front end okay so it will be this name my app okay because that is the directory if i go to the terminal and i do ls i have my app over here so it will be this my app okay so i will save my app and then the next thing that i need to provide this is the build of the react application so i'll say build like so i will now go to the react application and then run npm run build okay so our cd into my app then inside of this place i'll say npm run build like so and this should create automatically a build for the application that i can now deploy now if i go to the application as you can see i have something called build over here okay so i'm saying that the flux instance will take in underscore underscore name underscore the static directory will be my app slash build so the path to the build directory which will be created and then i'll specify the static url path because i do not need it in this scenario okay if you used the create regards command to create your application you realize that your build is inside of your git ignore file what you need to do is to comment this one out else heroku will not be able to pick it up okay so make sure that you uncomment this one so that you have it available for heroku to pick it up so it is now available the next thing i'm going to do is to add the at cross origin decorator to the index method okay so i'll say at cross origin like so this is to make sure that i do not get a cross site 4g request error when i make a request from the front end okay and then what i would do is to say the course will be this and i'll put in what the app like so okay you can even remove this because we will not use it anywhere else that needs to be done is that i'll create another method called save so i'll say define a method called save and what this method will do is that this method will return send from directory app dot static folder okay so it will return up the static folder so it will return this build okay this front end okay so it returned this app.static folder which is the build inside of the react application and inside of that build over here i want to return this index.html file so this file okay so i'll come over here then i will say index dot html like so and i'll route this to app the root if i go to slash and then i will also specify the cross origin decorator like so the last thing i'll do is to go into my.emv file and then change this from development to production so that i do not have debug mode in prod okay this is a simple application so even if you left it as a development it wouldn't matter but if you're building a complex application make sure that you change this to production okay so i've changed this to production the last thing i'm going to do is to create a proc file for the backend so i'll go to the terminal and inside the roots of the flux application what i'm going to do is to create something called proc file so i'll say touch process file like so instead of this proc file what i'm going to do is to specify how unicorn should start the server okay so instead of this profile i will specify the web gridicon which is the package that we installed app because app is the name of my file okay so it's called up dot py so i will say up and then i'll also specify up and this up is the name of the instance of the flux application okay because i said app what is the instance of the flash up if you had this as hello like so it would have been app and hello i hope this makes sense okay so i will change this to up as it is and that is basically it now i have everything set up so what i'm going to do is to deploy this to heroku and then make some changes to the front end as well okay so inside of the root of the application where i've got app.py file what i'm going to do is to log into heroku now you can only deploy to heroku if you have created an account on heroku okay i have already created an account on heroku if you don't know how to create an account on a roku what you need to do is to go on heroku and then you can sign up okay and create an account on there i've already created an account so i will not be creating an account anymore okay just click on sign up and then follow you know put in your name and password to create an account i have already done that so i will not be doing that anymore once you've created an account the next thing that you're going to do is to type in heroku login so i'll say heroku login then press enter it will take you to this interface and then you can click on login put in your email and then your password once you've logged in you would see that it would say logged in okay so i've logged into my heroku account the next thing that i'll do is to go back to the terminal inside of the root of the application where i have app.py what i'm going to do is to say heroku create like so so i've created a repository with this name on heroku so if i go on to heroku as you can see i have this name over here okay now what i need to do is that inside of this terminal i will say git init like so now if i do give status i have these files that i can now commit onto heroku and push onto heroku okay but before i do that what i need to do is that inside of my app directory i also have a dot git file okay so if i do la as you can see i've got a dot git file i do not want that i want to only have one git file okay so i'll remove this by saying rm dash rf dot git like so okay so this has been removed as well so now inside of the roots of the application if i do key status i can do get add dots okay i can say that get commit flask react heroku like so then i'll say git push heroku master as you can see i'm having this error and this is because i should have done git init before creating the repository on heroku so what i'm going to do is to go to heroku click on this so go to settings and i'll say delete up then i'll copy this then i'll paste this here okay then i'll go back to the terminal and also delete the dot git file okay so i'll say rm rf dot get okay so if i do la i do not have dot git anymore so now what i'm going to do is say get in it then i will say heroku crate now if i type in git remote v i should see this okay so now if i do git push heroku master this should go through so this failed it failed because this has to be requirements dot tst so i would say mv requirement dot tst to requirements dot cst like so get add then git comment then i'll say git push heroku master now this should work now that this has completed what i'll do is to copy this url my app packet.json and change this proxy to this okay and now i'll go back into the my app directory ls then i'll say npm run build because i've made a change to it so i need to now build it and create a new build that i can now deploy so i'll say npm run build now that this has completed i'll go back to the flux application so instead of deploy i'll say git status get add dots did commit i'll give it a name called finish this has to be dash m now say git push roku master like so so now if i go to this url then i go to this api as you can see i have tutorial flask react heroku and then if i go here i have flask react heroku this is how you deploy a flask and react application onto a roku thank you guys for watching and i'll see you in the next tutorial [Music] [Laughter] [Music] [Applause] you

Channel: THE SHOW

Views: 3,399

Keywords: How to deploy flask react to heroku, how to deploy flask app on heroku, flask react heroku, react flask app heroku, ReactJS + Python Flask on Heroku, How To Build & Deploy a React + Flask App, How to Deploy a React + Python Flask Project on Heroku, How to Deploy a React + Flask Project, flask react heroku for beginners, flask react, theshow, flask rest api react fronted heroku, how to deploy to heroku, computer science, cloud platform, Deploy a React + Flask Project to Production

Id: h96KP3JMX7Q

Length: 26min 50sec (1610 seconds)

Published: Wed Jun 16 2021