Deploy your App with PythonAnywhere and Dash Plotly

welcome back everybody to charming data i hope you had a wonderful restful week in this tutorial i'm going to teach you how to upload this dashboard app to the web using python anywhere this is a dashboard app that's built with dash plotly and flask and we're uploading it with python anywhere to the web we're going to add a username a password we're going to add https right here so it's more secure than http and we're going to do this together a few months ago i created a tutorial for uploading your app to the web with heroku but i find that python anywhere is a bit simpler and easier to understand it also has a free account so i'm going to show you how to do this if you want to jump to any section of the video just feel free to jump to the link below the video that says video layout just as you see here and you can jump to any section that you want to see over again next what we're going to do is download this you have to well you don't have to but it's going to be a lot more helpful if you can download this document because it will help you in the future if you upload more web apps and it will help you to follow along while we're doing this together if you want to upload the exact same app just like this one that i'm building here just go into the github below the video download the assets the elections and the politics into your pycharm or visual studios and this would work together just like this app but if you want to do your own app that's completely fine if it looks something like this or one pager you can do your own app and hopefully by the end of this tutorial you will have your app on the web with a secure entry point for everybody to enjoy and you can share it with anybody you want okay so to start what we're going to do is um open this document and we're going to create a new project in pycharm this is probably very similar in visual studios or or adam or spider but i'm using pycharm so let's do this together so we'll close the current project and we'll create a new project in pycharm new project and you want to i'm going to put it inside my deploy app to web python anywhere i'm going to put it in there and then i'm going to call this files call it demo app3 choose virtual environment right here i'm going to choose this one and choose your base interpreter mine is 3.8 so that's that's fine you can use 3.8 and create okay let's do a new window and close the old window you can do python 3.9 but i don't know if it's um if it's if it's totally compatible with what python anywhere has right now oops it's easy okay so while it's doing this let's select we selected a python interpreter let's go to the next stage the next stage number two is create a new python file to start writing your code for your app so in in our case we already have the app so we don't have to create a new python file we're just going to copy paste into this folder the the python file so you have it on github i have it here assets elections and politics copy this and i'm going to paste it into our python anywhere demo f3 there we go paste okay so we finished um um step number two we have our code open the terminal and go to your project folder so let's close this so now that we have our environment inside our demo f3 that we just created our virtual environment open the terminal and make you see how virtual environment is activated because it says vmv uh well it has a parenthesis here it means it's activated so um you activate your virtual environment if you don't have it activated you can do it like this you just copy paste just put this in here and this will activate your virtual environment in case you don't have this right here all right so we have a virtual environment activated we're inside the folder that we need to be demo app 3 which is inside our folder and now we can jump to step 5 which is install the libraries we have to install the libraries that we're going to use that we need for this app to work right this app you see has it's using plotly and pandas and dash so let's go ahead and install the libraries you can either install it like this pip install numpy let's do that right now oops you can either install it like this where you have the version you you tell the computer what version it should be installing um or you can just install it like this to install pandas with no version um and it will just install the latest version heads up my uh pycharm gave me a bit of a problem when i installed um 1.19.4 together with pandas so i took it to 1.19.3 once panda is installed you install uh dash there we go and then once dash is installed you install pip install dash bootstrap components these are only four libraries that you need for this specific app to work okay because plot lead comes inside dash if it's your own app and you have your own libraries make sure to install them inside this virtual environment in the terminal okay make sure that your virtual environment is activated this has to be in parentheses to be activated all right so we have this activated now we can go into boost track components we have to install that right here there we go this should take another minute dash to install dash took about five minutes so take that into consideration once you have everything installed test the app on your local computer make sure this is this is working before you upload it to the web and and get mad at python anywhere okay so let's see if it works let's go here to [Music] to elections and let's hit the run script button here like that you can also run it like this run and run here you can choose that so now give it a minute it's going to give you a link click on this link and this should be working right now you see that our dash app works perfectly fine it changes colors it does exactly what we wanted to do all right so now that we know it works on our computer we have to pip freeze requirements text what this does it actually puts into a um a dot text folder let's close this because it's done go back to your terminal and what this does it actually puts into your um requirement text it creates a file that's called requirement text and it puts everything inside of there all the libraries that you needed that you installed so if you double click on this you'll see these are all the libraries that you installed and this is necessary in order to tell python anywhere what libraries it needs to install on its virtual environment for it to work on the web okay so you have the requirements text here you will need that later the next step is create a get ignore file all right dot get ignore you can just copy this and you're going to open it and add this line of text to so github does not load your virtual environment all right so what what are we doing here you see how we have this virtual environment and all the libraries are in there we are going to transfer all of this into github right um so then we can transfer it to python anywhere and upload the app to the web you don't want um you don't need to transfer all these libraries into github you only need to transfer this requirement text which which python anywhere will use to create all the all the install all the libraries so because you don't need this virtual environment you want to click here and you create a new file and like we said call it dot get ignore and in there you want to add this and you want to say vanv like this and what this means you see how this me this says this file name is called vnv and this is the same what you're just saying is when don't include this um file inside git and in github all right so it's not it's not being uploaded it's not being included all right so let's close this we can even close our elections and the next step is create the git to prepare for github so we're going to create a uh get we're going to go get in it get add and get commit all right let's see make sure that you are inside this the the your project um folder right demo app3 we're going to create um git init to initiate git and then we're going to initial empty get and then we're going to get add space dot period those two files i think this refers to the excel sheet and then we're going to do git commit this will be my first commit you can say whatever you want in here we're going to say first commit enter and now we've committed everything into git you see but it's not they did not commit the vmv folder which has all the libraries it's not needed here so once you do that you will create a new github repository to do that go into github right here coding with adam or going into your own github obviously like this and then just create new here on the left side you'll see repositories create new and we're going to call this repository demo three demo app three is that how we called it you don't have to call it the same name but just for consistency purposes yeah there more app three let's make it public for our purposes make it public for now and just create repository and after you create a repository scroll down and do the push an existing repository from the command line so take this right here push an existing repository for the command line so copy the first line of code get remote add origin you're copying this into the terminal right here all right copy this right here enter and then you copy the second line of code like that and then the third line will actually clone it where is this third line right here git push origin origin all right so this will ask you for username and password for github because you are trying to push this into um into github trying to upload your code to github oh username okay i have to do it here for some reason i do not know why it asks me to do it here as well password all right so that should have worked now if you go into github brainman setup i'm going to github you will see that we created a new demo 3 where is that demo demo three yeah ash demo app three and then here we have the assets the git ignore and you see the vnv file did not transfer into a github because we did get ignore um vnv all right so we have that in there and now the next step is to transfer the repository to python anywhere so we need to get this into python anywhere all right so let's do that to do that what you have to do is to create a new python anywhere account so let's do that first all right let's open python anywhere like this let's create a new account oh i was actually there sign up here create new a beginner account you can start paying per month and it'll tell you exactly what you need to what services it will give you but we're just going to do the free account which has up to 500 megabytes of disk space so we'll do to tutorial email only gmail.com this would be actually our username we'll call it um what should we call a username username username something creative let's call it bugs bunny bugs bunny all right did i spell bugs bunny right all right register i agree register already taken shoot somebody's um let's call this username whatever um let's call it charming data charming data one because i think i already took charming data perfect remember this username it's important this username we're going to use um later all right welcome to python anywhere and tour you can take a tour if you want and now we can go into the next step open a new bash console so to open a bash console you have to go to your consoles and then you have to go into bash and here we're going to clone git clone just click on that where is it get clone and we're going to clone our copy paste the clone link from github so you just go into your github that you just created right here you see the demo app3 get code and just do the https copy this and then just paste this right here into the bash git clone so now we're actually cloning this github repository that we build on our computer and then on github into python anywhere so now we cloned it but now we have to create a virtual environment right because inside that that python anywhere we only have some files but we don't have um a virtual environment with all the libraries that we need so we'll do we'll just copy paste this make mk virtual environment this is going to be the name of the virtual environment you can change that to any name you want and then we'll we'll do it with python 3.8 okay create that this takes about two minutes okay so this was done now that we've created our um a virtual environment the next step is to cd into that um repository name from step 10 so that repository name was demo app right so cd into that cd demo app3 okay so now we're inside of there and here you can do cd and now you have to pip install the requirements text all right so just do like this and pip install requirement text and what it's going to be doing now is going to take about five minutes it's going to install all the requirements that we had inside all the libraries that we had inside this folder all right one thing you can do is go here and go and click on this click and right click web open a new tab and you can see here in the web part of your um of your python anywhere account you can see different things um one second so you can go for example into files and now you see that we created our our demo app this is what we clone from github demo f3 and the virtual ms is actually what we're creating right now with all with this name of the virtual environment right and it's creating all the different libraries inside the virtual environment so you see now it's 39 percent and it's only going to go up now it's 41 while it's installing all these different libraries so while it's installing all these new libraries what you can do in the meantime is going to go here again click on this click on right click on web make sure you right click because i think if you don't it will take you away and then we'll do an add a new app we'll do this step 14 add a new app anywhere click on this and then you want to click on next and then you click on flask and then click on python 3.8 and then just next right this will create a very basic very very basic one page [Music] web app that's called my if you go to files you'll see you'll be called my site alright this is what you just created and you can actually run it to see that it works let's go back to the web um charming data one what we just created hello from flask okay so this is a very basic app that was just created with um a second ago with the new app okay so let's see if this is done still taking another minute or two while we are waiting for this app to finish go into your um gmail or your email account and you have to make sure to confirm your email address for your app to work appropriately i don't necessarily want any email preferences save perfect so now we confirmed it and this is probably a good time to take a brief break and just say that um i i hope you're enjoying this tutorial so far i hope it's benefiting you so far if it is make sure to subscribe below make sure to join my charming data patron community uh where you can learn more dash plotly tips and tricks and you'll get a lot more videos about um and different tutorials about um dash and web apps in python and especially data visualization and it's a way to support me it's a way to show your support of of these tutorials that i'm creating usually at night and on the weekends all right okay so we see that the virtual environment was fully created everything was installed now let's go to the next step we did 14. once all libraries and requirements have been installed go to the web app um go into the source code okay and the source code which is right here where is it under the web tab and then you scroll down you'll see source code and you want to change this instead of my site you want it to be [Music] the demo three right which is what we created demo app3 your app might be called differently but this is from from the github remember this is from step 10 the name of your app which you can find again right here in files you open files you'll see this is the the app that you clone from github all right so we did the source and now the next step is to go to the virtual environment um section and type my virtual environment right there virtual section go enter a path you have to enter a path if you don't do this it won't work and you could just type my virtual environment okay and click v check and this is will automatically it will tie it to where your my virtual environment exists in charming data in this and this is the name of your my virtual environment is the name of your virtual environment the next step go to the configuration file so this is one last step go into wsgi configuration file open it and here you want to change two things you want to change um the project name at the end right here project home sorry it's home charming data one is our our pythonic python anywhere account and then we don't want it to go to my site we want it to go to demo app three and this stays the same and then here instead of this with dash you can just save this from elections to here all right this will always stay the same for you i'm doing from elections import app why am i doing that because elections is as you can see in the file in the demo app file elections is the main python file where the app is run so if you click on it um the app is is this is where i run everything you see if run the app right here and you can see that the app is the the dash dot dash so that's why i'm saying from elections which is the python file import the app object and then um and then call the server method on it and call application flask needs the application um object to to work uh correctly so just save this and after you save it go you can go back to our main web and then go back to where that refresh the app with the reload button right here okay and then you can load your app once it's refreshed let's reload and see what we get perfect so we got this expected error and this is um important because i want to show you how to fix errors when you'll get errors one thing i would recommend is going back and just looking at the error log right here okay and then you'll see what was the error sometimes it says from elections import app something about the read csv document it's not recognizing it's not reading it uh for some reason and then it's repeats here um something with a with a file is is is not right so um what i would do is go into um your file here you see pd read csv this is not reading correctly i just i did some checking and i realized that for some reason it's not reading this as a csv document it's it's not maybe it's not utf-8 i don't know so what i would recommend doing instead of reading your data from an excel sheet into a data frame just read your data from pi from github so go into your github this is this is your your github repository go into politics this is your data wherever your data is going to your excel sheet or your data and just click on raw and then just copy this all right this would only work if your github is public not private public so i'm copying this and then i'm going to go actually to my uh let's go out if you see how i do it i'm going to go to files and inside files i'm going to go to my demo app go to elections and then here go into instead of politics just copy this so it's copying from from the internet and then save it then you can reload the app like this as well instead of the the main button and once it's reloaded it's saving and it's reloading the whole app now you can go back to your um to your web and then hit this again and voila we have our python web app all right so i hope you enjoyed stick around i'm going to show you some bonus tricks but if you did like this and you benefited hit the subscribe button hit the like button and most importantly consider consider consider um joining my patreon community you can see the link on the screen you'll learn more trips and tips and tricks and it's it's a good way to um to show your support for individual creators like me okay um so uh bonus tips so let's see what we can do important to know that the free accounts in python anywhere only have 512 megabytes of file storage this usually means uh one account that can be created on on python anywhere with a free file because you see if you go to files you'll see that they're 71 full out of 512 megabytes so just make sure that that um if uh if you want to create two apps you're gonna have to go into pricing and or just upgrade and pay five dollars a month which will give you one gigabyte of space instead of 500 or maybe 2 gigabyte i can't i'm not sure but you can go into pricing and see and if you want to test a new app um you can just just delete everything delete everything from here delete everything from here and just start all over again you can also delete things with one button just go on the way down and click delete from here if you delete charming data like this you will still have your python anywhere account but this app will be deleted just make sure that you also delete your virtual environment you have to delete virtual environment as well so just go into bash and copy paste this like this console bash and just copy paste that that line of code uh change your username to whatever charming data one or whatever it is and and that will delete your um your virtual environment okay um another bonus tip um if you want to add more libraries if the requirements.txt didn't have enough libraries and you want to add more just go open your bash like this consoles oh don't open two just open one i don't know why i opened both um the first one and then just going to activate your virtual environment and then after activated um make sure you work copy paste this work on my virtual environment actually i think this activates the virtual environment so if this is not activated just work on my virtual environment and now you can do pip install um whatever you want to install like plotly or anything else that maybe you don't have probably i have but anything else okay so we um did that the next thing is um if your app doesn't work remember to check your error log okay um right here where is it go back air you go to web and then you go the way down go to error log and you'll see error error error and you'll see the errors and why it might not be working okay and lastly activate https and activate web app and password so to do that i just go back to the web tab right here all the way down activate https just one button and to activate a password just activate this and then we'll put enter username now we'll get our bugs bunny hopefully and we'll check enter a password we'll call it carrot check and then now if you reload the app like this you might not need it and then click on charming data python anywhere come on yeah now you'll see that you need you need a code right so if you put something that's not correct it's not going to allow it if you put bugs bunny and carrot you can sign in all right so i hope this was helpful again click the like button hit subscribe i hope to see you in in the youtube comments if you have any questions and good luck always remember we are better together so help each other out and never give up keep practicing have a good day

Channel: Charming Data

Views: 6,707

Rating: 4.9534883 out of 5

Keywords: Deploy dash app, app to web with pythonanywhere, pythonanywhere dash, deploy flask app pythonanywhere, dash plotly, how to deploy a python dash app to pythonanywhere, upload dash app to web, deploy app to heroku, heroku tutorial for beginners, hosting and deploying app on heroku, easily deploy update and rollback changes to application, python, dash, Build & Deploy A Python Web App flask, heroky, flask, dash plotly tutorial, git, plotly, pythonanywhere, dash web app, github, clone git

Id: WOWVat5BgM4

Length: 28min 53sec (1733 seconds)

Published: Sun Dec 20 2020