Django 2.1 - Hosting and deploying app on Heroku - 13/14

alright guys welcome back to this 13 django tutorial video and in this video we are going to be learning how to host our website on a hero couch server so that anybody in this world who types in a domain name for example arthropod comm in their url browser can access this website so we have completed our website and it looks pretty pretty good and just one more thing before I start this video is that if you're watching this video as some kind of a stand-alone video and if you haven't watched any of the previous videos it's totally fine if you just want to learn how to host your django project on any local server what you can do is you can just if you want to follow along and if even if you don't want to follow along you don't need to have this code in your repository because I'm going to cover what we are going to be doing with the code in just a second but what you can do is you can go to this link and even people who have watched all of the previous videos can go to this link and they can click on this file called check les dot txt which I have created specifically for the purpose of hosting our project on a hero so so we are going to be following this by line by line so the first thing that is there is copied the project separately so currently our project is is on pycharm and what you can do we can just stop the server right now and what I'm gonna do is I'm just going to copy this personal website from over here and if you are not using pycharm you can just go to your project folder and you can copy your project and then create a new folder somewhere else and copy that project inside that new folder so I've created inside my II drive I've created this folder it's called publish and inside that I'm just copying my project and I just want to do this because I wanted to isolate the pycharm from the actual project so that anybody who isn't using Python or maybe he just you just kind of stumbled upon this video and you just want to learn how to host a django website then you can kind of follow along pretty easily so let's just wait for this copying to be completed alright now that a folder is copied we are gonna go inside that folder and we are gonna delete the files and folders that we don't need so I'm not gonna need this gate folder I'm not gonna need this idea folder if you can't see this gate fold up then you can go to just view options and then you can click on this view and then you can click on show hidden files and folders this will show you all the hidden files that are inside your project and you can just delete the files that you don't need so I don't need this I don't need this I don't need this virtual and why meant that has been created by PI chump something's gonna delete all of these from my project folder now that we have deleted all the unimportant files and folders let's go back to our checklists and see what's next it says go to getting started on Heroku with Python so I'm just gonna copy the xtext from over here and I'm gonna go to Google actually I already have it open I'm just gonna paste this and I'm gonna go to the first website that is Hiroko dev Center and this is basically an article which tells us how to get started with Heroku on Jango or kind of how to get started with Jango on Heroku I can't believe I messed it up but anyways so let's get started and in the introduction it says you need a free Hiroko account the first thing you need to do is go to Heroku comm and maybe create a new account over here so after creating a new account it will kind of look like this just let me show it to you so if you open up Hiroko calm you will see a dashboard come on let's open it up alright so you see a dashboard which say is getting started with roku create a new app but we are not going to create a new app from this gy we are going to use something else but let's go back and see what's next over here and then make sure that the Python 3.6 installed and we are using python 3.6 on our computer so that's pretty much okay and even if it's more than python 3.6 if you are using python 3.7 that should be also alright as long as you are using a version that's more than three it should be alright the next thing is that it says make sure that pip env is installed locally so what this is is basically it's a kind of a it's kind of a package and python that helps you create virtual environments we'll get into what virtual environments is in just a second but before that let's just install this pip env so what how do you install this PNP PNV is just you can go to command prompt or whatever used you use on Mac and Linux the and you can just write pip install and pip e and B now I'm not going to install it and you can just press ENTER and school is going to install this package for you I'm not going to do it because I already have it installed inside my computer it shouldn't show you any errors and it's pretty easy anyways that's done and then it says installed post Chris and start locally which we don't need because we have a slide 3 and you mostly don't need this step so it's fine then you can click on am ready to start and it's going to take you to the next page the next page says it requires something known as good so git is basically something that you need to push your files to hero kuso or instead of push you can say you can just kind of if you don't know about github you can think of it as you are basically copying and pasting the files into the hero cout server using this tool called git so to install it you can just click on get installation and then it will take you to the great web style website and just then you can just click on downloads and you can download your version over here I have windows so I can just click on this Windows button and I can download the specific version that I want after installing it it's pretty easy you don't need anything it's not too complex you can just install it pretty easily and just to check whether you have installed it and its installed correctly or not you can open gate and then version and press enter and we'll show you the gate version that's installed on your computer alright so we have installed kit now it says you have to install something known as the hero cook command-line interface by these links that are given below so I'm going to install the 64-bit version and it's going to get installed I already have it installed so I'm not going to install it but the installation is pretty straight forward after installing it is going to ask you for your hero cool login so after installing it what you can do is you can go back to your command prompt or the shell if you are using Mac or Linux and you can just type in hero to login and if your hero ku is properly installed it will probably give you a prompt something like this let's just wait for a second and it should ask you for your login credentials now it's gone not gonna show this Arthur I want to add the rage calm I've already logged in that's why it's kind of showing it over here but what you can do is you can just type in yon so you can just type into details with which you created your Hiroko account add this command prompt so I created the account using this email so I'm going to type in this and then it's going to ask you for the password and I'm just going to type in the password and let's press enter and if the username and the password are correct it will show you as logged in as and then the email that you have now you can kind of be assured that the hero ku is installed properly on your system so let's get back and see what it says I will installed the hero ku CLI that is the command line interface and now we do need to follow this process I just you just need to follow this process till the setup and that's pretty much it so let's go back to our checks list and see where we are currently so in our checklist we have completed the seventh step that is we have logged and into our hero ku basically here o KU account then I say is to create a virtual environment with using that V with using P P and V that we just installed so what we are going to do is we are going to go to our publish folder that is the folder baby copied our project to and right now it's inside this publish folder so I'm going to go to my II drive let's go to my a drive and inside my II drive I'm going to go to the folder of publish by using a CD command and inside this over here I can just type in dir to show the directories that I have here I have a personal website and what I'm gonna do I'm gonna create a virtual environment just outside this personal website that is I'm going to create a virtual environment inside this publish folder so what is exactly a virtual environment so what your environment is basically something that isolates your program or a project so anything that you install inside your project is not going to affect the rest of the computer and the rest of the computer whatever changes you make in the rest of the computer are not going to affect this project or this folder so now this publish folder is going to be like a safety comfort zone for our project and anything that we do inside this folder of for publish is not going to affect any other folders inside our system that is what a virtual environment is in it's even the name says write virtual environment we are creating a virtual kind of safety environment inside this folder so we are going to be using a pip env and inside pit env there is this command called virtual let's type in virtual env and then dot and this is going to create a virtual environment inside our publish folder so let's wait for it to complete alright guys so our virtual environment has been created so if we go back to our publish folder you can see all these new files which say include Lib scripts TCL this is basically the these are basically the files of the virtual environment so don't worry about them too much just you know it's good to know that they exist all right so we have called we have just created our virtual environment let's see what's next on our checklist after creating a virtual environment let's run our manage dot pi file and it's not gonna run so that's okay so actually let's go inside our personal website and inside that personal website let's check out what are the files that are there so inside personal website we have this manage dot - so inside the PyCharm whenever we both really wanted to run this website what we used to do was we just used to execute this manage dot pi file and then we use to write run so go over here which you should run this over so we are gonna try and do the exact same thing over here but you will see in a minute that we will fail but before we execute this manage dot PI file I forgot to activate our virtual environment so what I'm gonna do is I'm gonna go back I directory and over here I'm gonna first activate the virtual environment how do I activate the virtual environment you just type in dot and then slash and then write scripts and then again you write activate activate and press Enter so now you can see inside these brackets you can see this folder which saves publish and this means that our virtual environment is activated now if you are using a Mac or Linux you if you type in the scripts it's not gonna work for that you actually have to type in bin and then you have to type in activate and if this doesn't work you can just go to google and type and how to activate a virtual environment inside Mac or Linux using pip env so I'm pretty sure though it was been this activate but if it doesn't work this should work well it doesn't work feel free to go to Google it's just one line you will find it but anyways now that we have activated our virtual environment I'm gonna try and execute this managed taught by a file so let me go to back to our disposal website folder and we're here let's type in man Python managed dot PI and then run server and press Enter as you can see it says couldn't import Shango because we don't have Django installed inside our virtual environment now even though we might have Django installed inside the computer but we still don't have Django installed inside our virtual environment and the definition of virtual environment is that this area or this project is isolated from the rest of the computer so what we can do is just to kind of tell you that there's there are no packages installed right now we can just type in tip and then freeze and press Enter and what's going to show you it's gonna show you nothing because what pay freeze does it shows you that that the packages that are installed inside this virtual environment so right now there are nothing there they're basically no packages installed so what I'm going to do is I'm first gonna install Django now before you even install Django let's find out the version of the Django that's inside so what we can do is we can go to our terminal and over here we can just type in as you can see we are inside our personal website folder and if you are using something else just go to your command prompt command prompt what the heck my accent is acting up but you can go to just command prompt and go to your project and then type in pep and it's not pip install just freeze and over here you will be able to see that there are a lot of libraries and stuff inside your project so over here you must not be seeing all of these things not or this Django Heroku and stuff these are just the extra things that are installed before but oh here you can the main things that are there that is Django equal to two point one and the requests that we are using so these two things needs to be installed so what we can do is we can just copy this from over here let us copy it and go back to our command prompt and write pip install and right click and this is going to install Django 2.1 so let's wait for it to be installed all right guys so Django is now successfully installed inside our virtual environment now if we type in Tabriz and press Enter it's let's wait for it to come over and it's taking a lot of time for some reason as you can see the Sango 2.1 it's automatically installed now the second thing we need is this request library now if you have a different Django project you just need to install all the libraries that are using you are using inside our project and for this project that I'm that we have created if you go inside our let's go inside our templates folder in the my side app and inside are this views dot pi file not the templates folder inside this view store pi file as you can see we are using the request library and that is why we need to install that request library as a standalone package inside our virtual environment so let's copy this from over here go to our command prompt and type in pip install and lettings install the exact version of the request library that we are using all right so we have installed the request library and now if we run the manage dot pi file it should work so let's go to python managed or pi run server press Enter and let's hope that our server is gonna run if it's not gonna run I'm gonna jump outside the window and I'm gonna die and this video is gonna end over here let's go over here and I've been our IP address and let's hope it works all right so our website has opened up and it's working properly from our virtual environment and if you're watching this video still that means I haven't jumped off the window so congratulations I am Alive so let's go back to our command prompt and we can just stop the server now and on command prompt you stop the server by pressing ctrl and then C on your keyboard and the server will stop all right so servo has stopped and now we can go back to our check list and see what's next so we have run the manage dot PI file and then we have stopped it so now we know that our manage dot PI file and a server are properly working inside our virtual and women now what we have to do is we have to go to Django here okuu so what you can do is you can go to google again and inside Google you can just type in Sango Miroku and we can click on the second link that says configuring Django apps for Roku if you're not able to find this link you can just copy and paste this that is configuring Django apps for you know cou inside this URL but I'm pretty sure it's going to work so let's open it up and I just wanted to tell you that what we are doing inside this video is for Django 2.1 but if you are using Django 2.0 or any of the future versions of Django for example Django 2.5 or something or even Django 2.9 or something it's still going to work the process for publishing your 1/2 app on Youku is pretty much the same so over here on configuring Django apps for hero qu the first step it says is it requires a proc file and inside that prop file it requires this line so we are gonna go to our project and inside a project project folder where this manage taught PI file s we are going to create a new file and we can just create a new file and make sure that the extension of dot txt and if you're not able to see the extension you can go to views you can go to options and then over here you can uncheck hide extensions for known file types after hunting it you will be able to see this dot txt extension now you can remove this dot txt extension and name this file as I think it was proc file and I just go back to the Django help that we had let's close close this tab over here and yeah and yeah it's called prop file and then we need this line inside our file so I'm just gonna copy this and I'm gonna edit it with notepad and inside it let me just close the setting start by file and I'm gonna paste this over here now it says my project dot WSGI so do you rename this my project with whatever the name of the project that you have so insider python as you can see our project name is personal website and make sure that this name is correct otherwise you are gonna get an error and it's not going to be probably installed on Heroku so our name is personal website so I'm going to go over in our proc file and I'm going to change it to personal website and then I'm gonna save it and close it up and then we can go back to our Django apps and here you can see it says installed G unicorn so we are going to install this jihyun account package and what this Gianni con is it's basically required by a hero coo to run your website on its server and it's kind of like a yeah just kind of think of it as a thing that is required by hero cultura not to run your website on it so it's nothing too complicated so we are going to just copy and just install this g unicorn inside our virtual environment so we can just write pip install ng unicorn and press enter I think I misspelled it so I'm going to type it again I'm going to write it pip install G unique on I can't believe a misspelled GG unicorn unicorn is a pretty common and sweet name but yet it installs a unicorn alright so G in one is installed and the next thing it says to install is Django hero coupe which you must have seen inside pycharm terminal so django hero qu you can see it's zero point three point one and what exactly this django hero qu is it makes though it makes a work of publishing your website on Heroku really really easy so one year before was building this website right and open-end calm and the work that went into hosting this website was a lot one year before and now what hero who does has does is that it has created this thing called Django Heroku it's kind of a package for Python and after you install it your work gets so much easier you don't need to worry about the static files you can easily upload just deploy your website to the hero coop panel so what we are going to do is we are going to pip install this Jango Heroku so we can just go over here and then right there install Django the Django spelling is wrong Sango Miroku press Enter so as you can see is it has also installed all these packages that are required by Django and along with Django Heroku which is going to make our work so much easier and now if we can scroll down it says add the import statement to the top offsetting start pie file and add this to the settings dot pi file at the bottom so we are going to go to our settings dot PI file that is inside the personal website folder go to our settings dot PI click on edit with notepad you can edit it with anything else that you want and we can just copy this import Sango Miroku and I'm gonna paste this at the top like it said and let me just paste it again because I think I messed it up a little bit okay so it's saying import Django hero who I don't know why it's not copying properly but it's fine we can just write it manually and then at the bottom it says copy and paste this that is the activation of Django hero goo so I'm going to go at the bottom of my settings short pie file and just below this static I'm gonna paste this that will activate the Django yoku so now I work with the setting start by a file is done so let's go back to our check list and see what's next so we have created a proc file that is done we have installed Django Heroku we have added stuff to our settings dot bye file we have added we have installed a unicorn and I've also missed up the spelling of G unicorn over here I don't know why hit but I'll have to improve this checklist again and then we are going to make something known as the requirements dot txt file so whenever you upload your stuff to Heroku is going to go to this requirements dot txt file and it's gonna see what kind of stuff it needs to install on its server so if we freeze now and press ENTER you see these are the things that will be needed on the hit okusawa and how does the hero could recognize or identify which kind of things are in which kind of things are needed for our django website to be installed on its server is by this fire code requirements dot text so what we're gonna do is gonna write pip freeze and then this greater than less sign and then we can just type in requirements and make sure you don't mess up the spelling of requirements dot text otherwise is not going to work and press ENTER and it's going to create a new file let's open up and it's going to create a new file inside your personal website folder called requirements dot txt which contains all the requirements that are needed by Heroku alright so this is done let's go back to our checklist and see what's next now you can just create the app and add it to Roku and finally what we are going to be doing is we are going to be creating a new app but we won't click over here we are going to be creating a new app using our command line so we just are gonna type here aku create and then I'm gonna type in the app name so my app is going to be called cadre of web and if you use a very common name for example like I don't know like web or something like that it's not going to work because somebody would have already taken it you can think of this name as Oh also as like a sub domain so you have to make sure that this name isn't taken by anyone but you can just try it out even if you want so if I write something like web and press Enter it's gonna say creating web and if you say name web is already taken that's why you have to find a name that isn't already taken I'm going to go with the area web through your web you can just put in your own name if you want and press ENTER and it's going to create this array of web app for us so now we can just press ENTER on our dashboard and you will see that a new app has been created alright so this is a new app and as we go back to our command prompt you will see that this website with hiroko app comm is existing so if we go to our a a web dot hero cool app calm you'll be able to see that we have an app and hero is welcoming us to our new app congratulations you have finally created a cool cool app so let's go back and see what's the next and now we can just use gate so at the starting you must have remembered that we asked you to or I asked you to not we I asked you to install this application got called gate and you must have checked it by a typing gate version and this means that gate is already installed on your computer anyway so what we are going to do is we are going to go back to our command prompt and now we are going to initialize the gate so we can just write gate in it and if we go back to our folder as you can see this dot gate file has appeared that means our gate is initialize now and then we can just write great status and you'll see all the files that have be have not been added to get so you must be confused if you haven't used github but what is this kit you can think of this gate as basically files that are going to be pasted on the hirako server obviously that's not that's not the correct definition but you can just think of it as like something that needs to be kit is a tool that can be used to copy and paste stuff to the here okudzhava so these are the files that are still needed to be copied to here okuu server and these are just the new files so now we know what files need to be added so we can just write get add and then double dash and also we need to add all the files so and press enter all right so all the files have been added now we need to make sure that we have we actually want to add these files to the server so we need to commit these files we will just write get commit minus M and then inside we can just write something like first commit and press enter and it's going to commit all of these files that were inside this personal website folder to get and then we need to finally push all these files to our hero cou app so we can just write get push here aku master and press enter it says here oku does not appear to be a git repository could not read from the remote deposit three and we are getting this error because that remote to Hiroki hasn't been set yet so let's do that you can do that by just typing in here oku kit and then putting in this colon and then typing in remote - a and then over here you can just type in the name of the app that you have so I'm just gonna write our three our web replace this Athreya web with whatever the name of your app is and press ENTER and after this it should probably be added so now we can just write type and get push it Roku master and this should work so let's put it in all right so the deployment is complete now if we go to our hero cou page that is a TRAI web dot hero who app.com and press enter he'll be able to see that a website is now life so congratulations guys you have finally uploaded a website on the hero coop server and it looks pretty good now one more thing that we need to do is we need to go to our admin panel and you'll see that our admin panel is not working so if we go back to our admin panel not go back just go to our admin panel and if we type in the password that we had created previously or if you have using the if you have done any kind of other project you will see that you will get this kind of an error and your database will probably won't work so what you need to do if you are getting any kind of error while opening your hero KU app is that you need to type in hiro-kun to run bash and this will give us access to the files that we have uploaded on the here okusawa so it's going to run this bash command and let's wait for it to run and over here if you type in LS now this is a Linux based system so you have to use Linux based commands and the way to see directories inside a Linux is by tapping LS and press Enter alright so it shows us all of these files and then we can just just like we did in our project in Django we have to run our migrations that's why it's coming us that that error inside our website because we haven't run out migrations so we can just type in Python and inside this Bash is gonna run a little bit slowly so you if if you type very fast is gonna type in very very slow and over here we can just type in migrate and press enter and it's going to run all the migrations for us so these are the admin migrations and these are the my site migration that is the app migrations sorry so we have to type in Python manage dot type and create super user and press enter what is happening I can't believe I'm messing up the spellings and stuff I'm a little bit tired so don't believe me press ENTER and now over here we can just type in admin and you can give the password that you want even if you want an email you can give it to it and we're just going to type in the password alright so our super user has been created now I can login into my administration panel let's click on login and as you can see we have our database with contacts and students over yeah now X let's actually see whether or contacts form is working or not so we are going to go to our contact page and we are going to type in the email step in the email the subject hello and the message we can just gonna hello an insider message we can just write this works question mark press submit and let's go to our database refresh it and you'll be able to see that a new item has been handed and if you click on it so these are the items inside our database but anyways if you want to update any kind of things so for example if we let's say this is my project folder if I go inside on my site and I go inside let's say in plaits inside this my side and I need to appraise this Thank You page so I just go to my thank-you and I just add maybe like a full-stop over here no I need to update this website inside my hero who server so what can I do is I can go to my command prompt let's exit this bash by typing in exit so now what we can do is we can just type in get status again and you'll see that there is this tank dot HTML which we just edited inside our kids status so now we can do to basically do the same things we can just type in get at all and we have messed it up at double dashes get at all then we again need to type git commit minus M and over here we can just write Thank You page edited this is just the text that you enter you can enter anything you want and then we can just do the same thing that is good push and we don't have to do that remote thing again and again because if you type in gate I think this was the command kit you can see that there are two here oku over here here oku apps that is atreya web that is why we don't have to add them to the remote so now we can just directly type in git push here oku master and press enter and this file is going to be pushed to adhere oku so so right now inside a tank tank page so where is a Thank You page let's just write thank you go to contact president submit and as you can see there is no full stop at the end over here which we added inside the files so now it's gonna just add this Thank You page to the server alright now we can refresh your Thank You page by just pressing on reload maybe let's reload and as you can see this dot has been added and this means that a Thank You page has been updated alright guys congratulations for finally hosting up your website on the hero code server and now in the next video what we are going to be learning is how to use a custom domain name with hero KU so that we can just type in something like hero group not hero who just are three about calm use a custom domain and yeah access the website from there instead of typing in the whole web app name and then he Roku app calm which is fine but it looks a little bit bad if you have a professional website so we are going to be covering that in the next video for this video peace out I know this was a pretty long video I am sorry about that but yeah I'll see in the next one

Channel: buildwithpython

Views: 60,942

Keywords: django, django 2.1, hosting, deploying, heroku, server, django tutorial, django beginners, django introduction, intro to django, python django tutorial, python django, django project, django 2.0, learn django tutorial, beginners, web, development, framework, started, scratch, python, introduction, windows, advanced

Id: MoX36izzEWY

Length: 32min 46sec (1966 seconds)

Published: Thu Sep 13 2018

Reddit Comments

[u/Bren1209]

LITERALLY Googled this topic earlier today as I'm nearly done with my site. I'll be sure to reference this video when I get there. Thank you!

[u/hans__cholo]

Heroku has great documentation available, don’t get discouraged! My site’s been running for over a year and is still humming along. The 10k row limit on the free database is killing me though.