Django and React Tutorial // 4 - Deploy Django and React with Heroku

welcome to a new video in this one we're going to be taking our Django and react application live and the service we're going to be using to do this is called Heroku now this isn't a paid video for the service of Heroku this is purely just on me going out and finding what the easiest way is to actually achieve this and after getting this to work which took about maybe 30 minutes I figured this is probably the easiest way to do it or at least one of the easiest ways to do it so this video is purely going to focus on getting our Django react application that we've been working with in this tutorial series up and running and it's actually really really simple so without further ado let's get started [Music] to get started when I'm just going to do is just go into a browser and what you're going to want to do is create a Heroku account so you just search for Heroku and it's going to bring up your usual stuff just go to dashboard add Heroku comm and I'm already logged in but you'll then need to create your account and once you get to this page here it's going to well you're not going to have any apps just yet and that's what you need to do you need to create a new app so I'm going to click on that and I'm going to leave my region as United States and the app name I'm just going to call just Django react django app something like that and okay we see that that's available calls for a click create app and there we go so it brings us to this page and it's already on the deploy tab where it's talking about this installing the Heroku CLI so this is basically short for the command line interface and in my experience that's really easy and it works really really well so that's what we're going to do you're going to need to install this so depending on your machine that you're using it's going to be slightly different so on this page just scroll down a little bit and if you're using Mac you can do this with brew that's actually how I installed it otherwise you can use the Installer or working on Windows just use the Installer it's pretty straightforward so once you've gone through that and you've got it installed then if we come back in here it's just going to require you to call this Heroku login so that you can do inside a terminal you just say Heroku login and then once you do that it's going to ask you for your credentials I'm already logged in this I'm not going to actually go ahead and log in again but it's gonna ask you for your heroic who profile details and then just log in as per usual and then all you need to do is just create a git repository with gets in it so I'm actually just going to get our DJ react repository from github so if you want to just follow along with us directly then just copy this URL and I'm actually gonna go here into this terminal I've got an empty at and I'm going to initialize it so say get in it and so we just need to clone into this by saying first initialize it as a repository and then just say get clone that URL so this will clone us into that repository now if I just clear everything out we can then remove the actual get contents of this folder by just saying RM dash RF get and that should remove it remove the git repository from it and so if we just check the instructions here so let's just get this back here so he changed into that project type git init so let's just make sure that it is a git repository so we do that and then we just say Heroku get remote add this as the remote origin now if you've created your app then this part here is going to be unique to your app so it's not going to be the same mine and yours so we just say add that and then we see that that's been set so it's set the remote origin to Heroku and there you can see the URL for that git repository and then we just need to add the contents of this actual application and I'm going to open in Visual Studio code now so we can work in here okay so here we've got it open in Visual Studio code and what we need to do before adding all the contents and committing it we actually need to tell her okuu what the build packs are for the application so so build packs essentially transform the deploy code into what they call slugs which are then executed by their server instances and they call the server instances Dinos so we need to build packs the first one is going to be Python because that's what we need for Django and then the other one is node so python is the main server so we actually run this application on a Python server but we still need know - actually bundle the front end which is actually react but so we'll just need to configure our back in slightly to be able to accommodate that but to tell Heroku what those pull packs are remember we've configured this as a Heroku app we used our repository so we're going to say karoku gold packs and then we say : set and then the type of gold pack so that is basically just Heroku / and then it will be Python or nodejs so we just like Python and then that basically does what it says it does and then there you can see it says bolt pack is set and then on the next release it'll use that Heroku Python as one of the bullet packs and then the second one we need to add is the nodejs one so we say Heroku bold packs again and then we say : add because we're adding a another bull pack and this time you have to set the index so this is the first bold pack so we say index 1 Heroku slash node.js and if you add that then it's going to add node as the bull pack with an index of 1 and if you need more information on this then you can actually just Google multiple build packs and you'll see some of heroic use documentation on how to set that up so now you can see it's set both of our build packs their Heroku nodejs and python and so now we need to start configuring this repository to accommodate how it actually needs to be set out for Heroku so that means that this front-end folder we're going to need to unpack a little bit by bringing these files in to the main repository so I'm just moving everything into it like this and I'm going to delete the front-end folder now and then I'm going to bring the vs code and the source I'm gonna have to rename the requirements we need to bring as well and then the source folder I'm going to rename as JD react Django so we know this is basically the home of our back end so we just bring that back in here and we can delete our back end folder I'm gonna delete this thumbnail top PNG as well so we don't need that and then we actually need to unpack everything inside the JD react Jenga folder as well so all of these folders and files that are constituting the Django application itself we need to bring that into this repository as well so this is basically one application you can find the manage top pie file in it the database our Django apps and the front-end so now we can delete the JD react django folder so you've got dot vs code which we'll need to actually specify in the 'get ignore so we just specify that and then you've got the articles which is one of our apps the API itself the DJ react which houses our settings you've got the public folder which is what will actually be served so this is a very important folder we'll need to specify in our templates then you what the source folder which is the react application and then all the other files that are just in support of all that and so what I want to do now is I'm just gonna close that bring us down a bit and we need to go into the package.json file and inside here we need to specify another thing inside it so this is the engines key so we specify engines and this is basically just defining what version of node it needs to use and what version of NPM it needs to use so if you want to find that out then you can just say node dash V and then you'll see you get version 9.5 well at least on mine so that would be the version that I would put here because we know that it's been working this whole time using this version so this that's quite important you don't want to specify just any version so here I'm going to add node and then set the version as nine point five point zero and then we also want to do NPM dash V to get the NPM version that's six point four point once we add that as well so NPM and six point four point one and so that will basically just tell the build pack to install those exact versions and that's important because we know that these versions the application works for and so then with that we need to create another file in this folder which is the proc file now the proc file is a file specifically used in Heroku apps and essentially it's just sort of like a configuration file so it doesn't take a extension so we just say proc file and you can see how vs code is recognizing that so it's giving us the Hoku emblem now on the side and inside here we just need to specify two things so the first is this release statement and that is python managed by migrate the second thing to add in here is the web process so on the left is the process type on the right is the actual command so for web this is where we want to use a service that can actually serve the application and for Python applications we use normally well you can normally use G unicorn so to actually use the unicorn you just have to type G unicorn and then the project folder and path to the WSGI file so this would be inside the DJ react to our WSGI file so we just say DJ react dot W SGI and then just say - - log - file and then a space and then another - and then we're good to go so the release is basically just saying that every time we release the application to actually upload everything then it will call this Python manage the PI migrate and that's obviously important for the database migration we need that otherwise the server won't actually work and then the web process is got it as a special process so that's essentially the only one that allows for HTTP traffic to enter it and that's where you'll specify the command that actually runs your application so whether this was Java or Ruby or whatever you you're using then this command ensures that you actually can run a web search and so with that we can then close that off and inside our requirements txt here we want to specify a couple things that will actually be installed on the build pack so already we've got our Django requirements yeah but we also need to add G unicorn so let's add this here and I'm going to specify B version as 19 17.1 and then the last thing that we need is white noise so white noise basically helps to serve static files and then G unicorn is the HTTP server so white noise I'm going to add as well as one of the packages and specify the version is three point three point one as well and so those are our Django requirements so I can close that again Heroku will actually look for this file specifically so that's what needs to be here same with the proc file and the package JSON file and the managed up high because we specified that in the proc file so that's why these files needed to be here in in the first place and then lastly we also need to add another file for the Python version so here we just say runtime txt and that also needs to be in this folder because Heroku will look for it and we need to specify Python three point six point six at the specific time that is the most recent version so if if there is a later version then I'm I'm confident that you'd need to use the latest version but Heroku will give you an error if it doesn't if it's not working with the version being specified so for now this should be good so we just need to specify that we can close that now and then we'll just need to configure our white-noise to actually serve those static files so let's go into our settings in DJ react and we can just toggle that for now and if we go all the way to the bottom to our static files here so here you've got static URL I'm going to add the static route as well so I'll say static route and this is going to use OS dot path join the base directory which is defined at the top with a folder which we'll call static files and then we will also specify the static files storage and this is where white noise comes in so here we just specify this inside a quote and you say white noise done Django gzip manifest static let's make sure you spell as well as write static files storage so gzip is basically a compression or a way of compressing static files so if we just make sure here's a white noise Django gzip manifests static files storage so that's what needs to go inside our settings dot pi and then we'll also need to add it to our WSGI as well so in here right below this import I'm just going to add another input which is going to come from white noise dot Django and we'll say import Django white noise and then using this application which is calling the get wsgi application we're going to call another application and say that is equal to Django white noise of the application so like that so we're passing in the old application into this and re specifying it as the application to be used and then to actually serve this or allow this to be served in the Django project we need to add it to our allowed hosts so in here it's going to be the actual URL to the project which if you take your app name so that from one for mine would be two jiangha react django app dot Heroku app dot-com so that that will be the project URL and with that we are all set to go so if we just say get Ad and just make sure that we're not adding unnecessary files so okay so we just had a little bit of an error with the git repositories clashing with each other so I'm just going to reinitialize this with all these files here so you say get in it and then I'm going to come and add the Heroku remote so add that there and now we just have to say get add so we'll add everything and then you just say commit paste that day and it will commit all those files and then say push her Roku master so execute that and now we see if everything worked so it's you can see it says building resource installing the libraries where it's reading from the package.json file so you can see node npm with those versions okay so on this first trial we see we got quite a few errors so the first one is the no module of auth so we obviously didn't specify that in our requirements Texas will need to read check that now they've got this Python managed up I click static error and I'm going to just perform the recommended thing here which is to disable select static so I'm just going to set that there and so now that should be taken care of but now let's just just everything out and I'm going to say put freeze and this will go into requirements to txt and when we check everything here okay we're getting a massive file so that's because we don't actually have a virtual environment installed so what I'm going to do is create one now we'll set virtual env env and I'm going to specify in the git ignore two ignore that so let's just you just to fix that their node modules as well and so we're just going to activate that as well so source being in V been activated I'm going to say put install Jango and I'm going to actually run the application so we can see what other packages me to make sure that we include so we don't have all off so let's do that source I put the install Jango all off and if we run the serve again we get course headers so we say pip install course headers and I think that that is my slightly Django course headers or there we go so course head is installed now if we run serve again we get rest off so same kind of errors here and actually install this app install Django rest off and now if we try that again surround the server not saying no module named white noise so we'll install that but install white noise and I'm going to make it at three point three point one and then we'll need to install to uniform so to install G unicorn and maked 19.7 point one there we go now if we say run the server let's check if this works so now we just have that migrations error which is fine and we can say pub threes and go to requirements txt and we can delete that number two as well so now if we execute that we check requirement sixty then this should be everything that we need for the application so we can close all of this and actually while we're at it we'll actually specify the template directory in our setting stockpiles so if we go down to the templates here what we want to do is we want to link our build directory we'll come from our public once we call npm run build so let's actually do that we'll say NPM and actually we'll need to say NPM install before we do that basically what we want to do is link the build directory which is the built version of our create react app and link that to our directories folder so what we do is you say oh stop off the joint place directory with bold and - then we're getting this found one high severity vulnerabilities so I'm going to say NPM it ordered fix so that we make sure that that's not a problem and now we can say NPM run bold as well and what we can do is specify in the package.json file we can specify another script here which we'll call the build process as soon as the application has been installed and that's also what we would like for our Heroku app so that once we've actually pushed everything to the repository and it's been installed with node then our script will run to create the build directory which can then be served so here we just have to add post install and this will be NPM run both so post install meaning after the install command has been called sir NPM I then it will call NPM run bold now here you can see the build directory has been created you have the static files and then you've got the index dot HTML and this is where our application is being run from while the front-end so we want that index.html to be the file that is essentially referenced in every single URL part of the Django application so in our URLs if we go to here what we want to do specify another part and so we're going to need a regular expression part as well actually so to say regular expression part from Django URLs and if we come in here and say path for brother regular expression Park and the regular expression is looking for any URL that is that is navigated to and when we navigate to the URL on the front end it's still being served on the Python server so if we didn't have this regular expression part then what would happen is if we navigated to let's say the login path then it wouldn't recognize that path yes it's being recognized in the front end but it's not being recognized in the Django server so that's why we need the regular expression part to call the template view which will essentially display the index our HTML and the JavaScript will kick in to display the correct view itself so what we need to do is import from Django we used our generic and say import template view and this is just a shortcut so we just say template view that adds beautiful it's a class-based view and the parameter that goes in here is the template name and the template name is essentially the the actual template that we want to display and that is indexed our HTML and the reason why we can say that is because in our settings we joined the base directory with the bold directory so by calling template view and specifying the template name as index.html we're essentially referencing this index.html in the bold folder which will be taking taken care of thanks to the JavaScript in the static yeah this bolt jobs would fall so with that we can try and actually add this to our Heroku repository again so I'm going to say git add okay so before running it there's just two areas that I picked up which totally unbelievably long to actually figure out so if you start by renaming your proc file with a lowercase P or just mispronouncing it you can end up getting a utf-8 error which means that even if you rename the file back to the correct file names with a capital P you could find yourself in the same predicament as I was which is basically that it's telling you that your proc file does not have any web or release processes defined which basically means that the application gets an error and it's asking you to check your logs to see what the problem is but it keeps telling you that the proc file is most pronounced even though you've committed to the repository so if you're getting that error the only way that you fix it is literally by removing the repository deleting the app recreating the app and re initializing your repository so that's the only way that that I've seen to figure it out once you've got the proc file renamed the correct way then what you need to do is go into your settings file and add the static files directory which is stating the path in the build folder and the static folder inside there so basically what that means is it's going to use those static files as the static files of the application and that's very important so once you've got that we can then actually add everything to the repository so we'll say get add and then we'll say get commit we'll just make a note here and just say vinyl hopefully and then just say get push and we'll see if this all works okay so after all of that let's just take a look and see what all the commands were that showed here in the console so the first build process that we specified was for nodejs that's why it's saying no J's app detected specifying all of those environment modules with those settings there and then it's looking for the engines node and NPM which is finding which is coming from the package.json file that we specified then we see the react scripts being called and that's because of the specification that we've made in our package JSON which is that after the install has actually taken place then it runs NPM run build and then if we just check here again so it's running those scripts to create the bold directory then we see it's actually using gzip to build that and store it in the build folder which is right here then we see it's checking our Python app next so that's the second bolt that we specified so it's installing the requirements with pept and then we see the prop files declaring the types that are found to the processes and then it's just compressing launching and then actually migrating afterwards as well so we see all of that take place and now if we just open this up in a browser so let's just let's go inside here and if we just paste that URL in there and we see that it's actually loading we see that if we click on login it navigates us everything works except one thing our data isn't coming through and if we inspect we get a couple of errors that are showing here and that's partially because if we check here we get this one to seven which is our localhost so those errors are coming coming through actually because we didn't specify a build production in our Django application to call the URL as the Heroku URL so this URL instead of the localhost now that's not a huge fix so I'm not going to go into that and show how to fix that because it's just the URL but everything is working so far so this is basically just an introduction to how you can set it up with Heroku and just get everything up and running so basically just combining react in django which in my opinion is a really good combination and you can see that even with the small areas that we just had to adjust for it's actually a pretty easy setup that we had to go through and and once you've got all this working then you can just go into your Heroku app and you can add domain to that as well if you want the other thing is that if you are a student you can actually apply for get up education for the get up education program and that's something that I'm using myself as well so so basically what it entails is that you get access to a whole lot of different packages that are normally either really expensive or that just have some really premium package to it so there's a lot of things Heroku is actually one of them now one of the more recent additions that they've added so if you are a student and you can prove an email address showing that you are student then you can gain access to that education platform you can get free credits to a whole bunch of services and I believe you can get a free diner as well on Heroku which is quite nice I think that's four years so that also goes hand-in-hand with this tutorial so our student you can gain access to that and get that sorted as well so otherwise thanks for watching if you enjoyed this video don't forget to leave a comment down below let us know what you think and if there's anything else you want to see particularly in this tutorial series with Django and react leave a comment down below other than that thanks for watching don't forget to subscribe and I'll see you in the next one

Channel: JustDjango

Views: 50,157

Keywords: django, django tutorial, python django, python, Django Web Framework (Software), django project, software, Python, python programming, django tutorial for beginners, python 3, python 3.5, django python, python tutorial, tutorial, how to python django, install django with virtualenv, django 2.0 tutorial, react, react tutorial, react 16 tutorial, vscode, visual studio code, heroku, deploy django, deploy react, django and react, javascript, django rest framework

Id: r0ECufCyyyw

Length: 30min 48sec (1848 seconds)

Published: Mon Sep 24 2018