Deploy your First App with Heroku and Dash Plotly

welcome back to charming date everybody so I'm very excited about this tutorial because I created it to save you hours and hours of reading on how to deploy your app to the web so in this tutorial we're going to do exactly that we're gonna learn how to deploy this - app to the web using Heroku if you're using flask as your web framework that this tutorial is also for you because - uses flask under the hood I've created a step-by-step guide also that you should open under the video in the links because this will help you follow along and so you can use this for any apps that you might create in the future and that you want to upload to the web we're going to use PyCharm ide in this tutorial but if you're using visual studios or them or Adam this tutorial is easily adaptable to those Python IDs as well don't forget to open the link below the video if you want to jump to a certain section of the step-by-step guide under the video layout you can just jump to whichever section you want in case you want to repeat something if you want to learn how to create this - app before deploying to the web just click on the playlist above you'll see all kinds of interactive dashboards that I created this is just one of them I think it's called the data table introduction all right so let's jump right into it and do this together okay so step number one is sign up for an account on Heroku to do that let's go into the Roku comm went in there click sign up we'll quickly put my first name and my last name Schroder and then the email address will put tutorial email only female comm a very creative email that I just created no company will roll other United States let's do English and no English Python and I am NOT a robot at least not now bus bus bus alright great this okay this is gonna ask you to go to your email account and check it let's go to the account and check and see what they sent us Oroku click on this to confirm your account that makes sense up until now create a password do an easy one that you don't forget I always forget my passwords and then get stuck forever and ever click here to proceed alright so we created the account is that working let's see perfect so now the next step after creating the account step number two create your app name this will be part of the URL ok so as you recall here the something that I created yesterday this will be your app name and then attach to it you will always have this so to create your app name let is let us choose it right now let's click on here great half name and we'll call it what should we call it for my mother let's do something for my mother I haven't done that you know I haven't done that in a long time so that will be nice create app it's called for my mother and here are all the instructions that we'll use later to upload to the web these are the final stages or the instructions all right so that was easy we did number two fairly quickly let's go to number three you need to download and install the Heroku CLI if you don't have that already because this will allow you to create and manage the Heroku apps directly from your terminal so what you should do and just go back to Heroku and you see here download and install the Heroku CL I click on this and it'll take you to the main page only allergies are killing me and then download for whatever your system is you can download for Windows it will download the whole exe file and then I'm not going to do this right now because I already downloaded it on my computer about once it's downloaded just double-click on it and just start the installation process make sure to leave all the checkboxes that are checked by default leave it there it should all work and then you're done shouldn't take more than three minutes all right let's go back all right so we got the number three which is necessary this step number three that we just did and now we're going to create a new project on pycharm again if you have visual studios or Adam or something else just create your own project there or your own folder this is the same thing as creating a folder so I'm going to close this and I'm gonna do this all over let's call this project and do this all over again from the beginning terminate close this okay one create a new project you can call it whatever you want this will call this a Roku let's call it my you know let's dedicate it to George Floyd there's gonna be in the name of the folder and then make sure that you're not clicking on existing interpreter but you're clicking on a new environment choose virtual env and then don't click on these I don't you don't need them you could if you want but you don't really need them right now includes the base interpreter just choose the regular Python by default that you have in your system I'm I'm going to use anaconda for it and I think it's Python three point seven seven or three point eight so this should be good for now we're creating this environment while this is created I went over a and B we're going to create a new Python file to start writing the code for your app now I already let's see if you have not written your app yet or have not coded it then this is where you create your new Python file and you create your own you you own your own app I'm gonna show you how to do that right now you would go here like this right click on it it would create new file and you'll create the file that you want let's say my - app dot py Python and you would start coding import pandas bla bla bla bla I'm not gonna do that here because I already created my app so what we're gonna do is we're gonna delete this cuz I already have my app and I'm just gonna cop like it says here just copy paste your code into the files of the files into your new project folder so my app is right here that I created it's not on the website yet but it has the dot pi code or file it has a CSV document that it's going to connect to that's where the information is and it has an assets folder that is where I put my CSS so I'm going to put all that into the George Floyd new app that we created and just copy paste so you can do the same thing if you created your own app already just copy paste into the new folder that you created in pycharm or visual studio so ever alright so now we have it there and step number six is inside your apps file on your app let's see inside your apps file your main file of the app go to your main Python file where you created your app here is the death data table and make sure that under that this line of code that you usually have there put this line of code server equals app dot server this is step number six this will allow you to allow Heroku to recognize and connect the servers so this was step number six step number seven open the terminal and go into or CD into your project folder if necessary so let's open the terminal right here we're going to make this a lot bigger so you can all see hopefully on YouTube you can see this very well and I'm already inside the George Floyd app that we just created inside the folder as you can see here it's already activated the virtual environment that we created based on the Python 3.7 so now I'm inside the folder and with the terminal and step 8 will be to install all the libraries and specific version that your app needs all right so my app as you can see here from the data table let's go up here is using all these libraries pandas partly Express - so we're gonna use and I'm using specific versions these are the specific versions I am using I would recommend you also pip install the specific versions because if there is an update it might break your app you just want to and also it's a good way to remember which versions you're using in which in which libraries so just pretty I think you can copy paste just pip install like this let's copy it here and then go into the terminal then just do paste install oh sorry it copied the a so let's erase T hey okay there you go I'm going to fast forward the video because I'm gonna pip install all these things pandas and plotly and - and then we'll go back to the to the video okay so I installed all of these and these versions don't forget to also install G unicorn because you need this in order for your app to run on Heroku let's install that okay if you want to see the latest version of G unicorn just go into PI pi org and you'll see the latest version if you just type it in here and you could also use this for any anything you want any library you want to see like what's the latest version of pandas you go in here and I'll tell you the the latest version 104 or maybe the latest version of - and it will give you the one 1.12 so if you see this video months from now just go into the latest version and make sure that your app works with those versions and then just pip install them into your virtual environment okay so everything was installed successfully let's go to the next step now you have to create a dot git ignore file inside your project folder this get ignore files tells get what to ignore as part of your project so in this case let's create here let's focus on this part so this is my this is my app folder George Floyd and then star inside we have the assets which contains the CSS that I'm using the virtual environment of all the things that I that I all the libraries so if you're going to live inside packages you'll see all the packages that I installed - and and flask and plot G unicorn so let's close this we don't need that and we have the CSV and we have the data table so we're also going to create now the new file so just create right-click on this do new file and we'll create dot get ignore and inside this here what you want to do is you want to copy paste this line and just create four separate lines this is all the things are you telling the Heroku app what to ignore inside your folder so let's go back here so after V env just enter ignore the enter here good we have our get ignore file now you want to create a proc file inside the same folder okay so let's create that let's copy it and let's create it right now right here right-click new file and we'll just call it prop file no space enter and inside you're going to put this just copy-paste this without the a there's always a bullet point there so we're gonna put web : G unicorn your app file without the dot P Y so erase this our app file is data table dot PI this is where my main code is located so I want to call it dad make sure you spell this correctly or it won't work a date a table do not put dot PI : server alright so say that and now we have our prop file and now you need to create in step 11 the requirements this is what Heroku is gonna use to understand what kind of libraries to download so go to back to the terminal go into the project if you need to CD to the project so we're inside the terminal here and we're inside George Floyd that's good and we're gonna type pip freeze and this requirements let's go in there pip okay and now it's going to create our requirements text we'll take a look let's close this open this back up and we'll see that now we have our requirements text which is all the libraries that Haruka needs to install in order to create this app great let's close all these up alright so we have our gate ignore we have our proc file and we have our requirements file that is all we need so now we can actually log in to Heroku through the terminal and upload our app to the to Heroku so there's our the final steps go into the terminal and type Heroku log in I'm already logged in so I probably don't need to do this but I'll do it I'll do it just in case Roku log in click any open to open the browser alright login and I think is just gonna skip that username because I'm already logged in perfect so I can close that go back alright what do we do after that then we're going to get in it now all these instructions from 12 to 17 are actually located here as well you see when you hit when you go to York let's go personal let's go back to personal for my mother as the app that I created an inside going to deploy and in deploy you will have these instructions at least before you deploy your app these instructions are going to look this way after that it changes so we did Heroku login we went into our project folder which is right here and George Floyd and now we have to do get in it so get in it because it's initiating and gate repository perfect the next stage is to type in Hiroko get remote and then app name from step two let's see if this works okay so I'm going to erase 14 here because we don't need 14 Roku get : remote a app name from step 2 so app name from step 2 remember this our app name our app name is what we created in the step 2 which is for my mother this is the app name I'm just gonna I'm just gonna copy paste from here so I copy paste correctly with the spelling alright perfect does that work that was spelled correctly and the next one is get add so we're gonna do that get add we're preparing to stage the app so I'll get language this worked don't worry about this this is about our CSV file then we'll do git commit am actually going to copy/paste from here it's a lot easier get commit okay and you can change this message inside the quotation marks I'm going to say initial launch all right and the last thing you want to do now it's stage we did this poster Roku master let's actually copy it from here it's a lot easier get push your Roku master there you go now I'm gonna I'm gonna fast for the video because this usually takes some time um my computer on my older computer it took me about 20 minutes to go through this stage so don't worry about if it takes you more time also the pip install all the libraries that we installed took me about 15 minutes on this computer so it does take some time make sure that if you're you have a very strong antivirus or firewall on your computer just turn that off so it doesn't have any problem with the uploading and deploying to the Roku and when you pip install all these libraries ok so I'll see you in a few minutes perfect done so now all you have to do is click on this link I'll go back to you Heroku webpage open app and it should work oh so we got an application here so this probably means that we misspelled something or one of our files was not correct so this is actually great because you can see how I did bug lies go back into your files and let's see what I made a mistake get ignore everything here seems to be spelled correctly that's going to proc file proc file oh here we have data table pip so it's not supposed to be that way remember from the step you're only supposed to have have your main Python code for the app the name of it right here and the name is data table dot pi without the pi that's where I have my main code as a reminder all my library is in the app server so I put Pip here by mistake and I have to erase that until save this right now what we have to do I'm gonna close this is follow the instructions on Heroku so you'll see that given that we deploy the app we're not gonna repeat these fifteen to sixteen steps we have a few things before that so what you want to do is all in the deploy page inside the Heroku webpage go into Heroku log in we did that and just clone your app first this is what you want to do when you want to fix some bugs or you just want to update your app with more things that you added to it and stuff like that so we're gonna go in there we're gonna clone it okay come on up copy okay cloning perfect so now a seed in here it's cloned for my mother so all of these files are gonna be inside the one that I cloned so right now it's inside here right but remember it it could clone and clone the proc file that was damaged I'm gonna delete this cuz I don't want that that had the wrong name in it and I'm just gonna put this I'm gonna copy it and just put it inside the folder alright so this is what we're gonna upload with all the right proc file into into our into our Heroku app again to make sure that it's the correct version so now I can go I see I have two CCD into the new clone to the new folder so I'm gonna go CD into for my mother that's my app name so now I'm inside the for my mother with all the correct documentation and the next step is to get add now it's step fifteen sixteen seventeen so it's all the same okay add dot and then we have to do I get commit make it better I want to change the language from instead of make it better I'm gonna say fixed proc file spelling mistake enter and that is it now I only have to get push local master and now it should finally work because we are using the right profile with a rap right app name inside of it there we go so now I should work let's click on this link I just go into Heroku and just go into open app and now it should all be set wonderful you see now we have the countries the pie chart is going to come the line chart we can choose in different countries and there we have it so make sure to hit the like button if you enjoy this video show your support share with others subscribe below turn on your notification for this channel because each week I'm going to upload a new video to help you create great data visualizations and dashboards using Python alone have a good day

Channel: Charming Data

Views: 25,092

Rating: 4.9830866 out of 5

Keywords: Deploy Your App to Heroku over 5 Minutes, Heroku tutorial, deploy app to heroku, what is heroku, heroku tutorial for beginners, hosting and deploying app on heroku, introduction to heroku, heroku deployment, python deploy using heroku, easily deploy update and rollback changes to application, deploying to heroku server, python, dash plotly, dash, heroku python, heroku flask deployment, Build & Deploy A Python Web App flask and heroku, traversy media, flask and heroku, heroky, flask

Id: b-M2KQ6_bM4

Length: 21min 45sec (1305 seconds)

Published: Thu Jun 04 2020