Production Django, WebSockets, Django Channels 2, Daphne, Nginx, Gunicorn, HTTPS

recently i built a real-time chat website using websockets and django channels to do like the you know websocket real time chat stuff now this video is technically the the last video in a full-length course that i built on how teaching you how to build this real-time chat website there's like i don't know 23 hours worth of content so it's quite like a long extensive detailed course i show you everything from you know installing django installing python all the way to the very end which is now which is where i'm going to show you how to deploy it to production now this video is going to be very long and probably quite difficult for people who have no experience with you know back end server side configuration stuff like that but it's it's going to be long and detailed for a reason setting up a real-time chat website with django back-end django channels is is pretty straightforward in development like when you're working on it locally on your computer but when you go to push to production there's quite a bit of difficult tricky things that you need to configure and there's not a lot of information out there on the internet showing you how to configure these things and especially if you're coming from a background that is not web development you are going to have no idea how to do these things and you're gonna have if you were to do it on your own you'd have a hard time finding the information so i made like a really really detailed document also i'm gonna go through that document in this video so you're gonna be able to you know definitely do it even if you have zero experience so before we get started let's quickly look at the document that i'm gonna be going through in this video it's very very detailed essentially i built like myself a document to follow for this video and it's going to double as a document that you can follow when you're going to like push your website to production so let's just quickly go look at the document and i'll like break down the how i'm going to be doing this so there'll be a link down below that will take you to this github page where i published this document it's just like a github repository with a single file and that's going to be the readme although there's also actually images but the images are just used for the readme so like there's the images and then the readme that's it so if you go to the readme this is a very long document as you can tell from the right hand side over here and the first section here is just like a legend telling you what is covered in the document so let's go to the first section here just what's covered in the document so it says everything involved in publishing a django website equipped with websockets using django channels i use digitalocean as the hosting provider they have amazing products documentation customer support i highly recommend digitalocean i just very very do very very much do recommend digitalocean they've been nothing but just a great service in every way that i've ever encountered them and you can also get a hundred dollars free using this referral link so if you just click this link you're gonna get a hundred dollars free so everything that you do today in this video when you publish your website is going to be completely free so let's talk about the specifications the like system design what's going to be installed on our server first of all it's going to be ubuntu 20.04 postgres database we're gonna use django channels uh digitalocean spaces to store the static files so this is actually hosted through aws but you can set it up through digitalocean very convenient we're gonna be running the django project as a wsgi application using g unicorn and system d on the server configure engine x to proxy pass to g unicorn so this is like a like a a security step configuring the firewall again a security step the redis installation and configuration we're going to be using redis as a like a messaging queue system for django channels to manage the messages from the websockets we're gonna use asgi for hosting django channels so that's similar to wsgi it's like it's the asynchronous version of wsgi i'll talk more about that in the video when we actually set it up but basically what you need here you need one application to run the django application so that's the wsgi and you need a separate kind of tool to run the websockets to host all the websocket traffic and everything and that's going to be through this asgi application then we will deploy django channels with daphne and systemd so that's how we're going to run the asgi application similar to with the wsgi application this uses g unicorn and systemd we're going to be using daphne and systemd to run the asgi application this stuff is actually the this will be the most complicated stuff right here this is if anything is the thing that would be difficult to find information on the internet about that's this section right here so starting the daphne service writing a bash script that tells daphne to start and then configuring system d to execute that bash script when the server boots to tell it hey you know start daphne and then daphne starts the asgi application and then finally we'll we'll purchase a domain so you can actually like see your website at a domain and then we'll encrypt it with https or use let's encrypt to set up https on the server so that is going to be everything it's kind of like a all-encompassing video to host your website you know even if you weren't using django channels and websockets this kind of first stuff here is you know just as valuable setting up any server that doesn't use websockets so hopefully this document will help you hopefully the video will help you let's uh let's get started by the way if you're just watching this video and you didn't watch my course on how to build this real-time chat website you can head on over to codingwithmitch.com and there's a there's a course there that you can take a look at so if you go to codingthebitch.com and you go to courses up here it's this course right here the realtime chat messenger as i said there's like 80 episodes or something like there are 80 lectures or something like that it's quite long but it's because i show you how to build everything yeah it's 22 hours long i show you how to like you know set up the authentication how to register accounts how to add friends remove friends everything to do with like you know a friend system how to do private real-time chats how to oh yeah here's all the stuff here so all this you take a read here if it looks like something you're interested in uh you know a friend system a public chat room where anybody can go in and chat one-on-one conversations so like private chats and then also real-time notifications so like that'd be like friend requests private chat messages and then finally the last part which is the part we're doing right now which is pushing this to production all right that's enough talking let's get started on this so again i highly recommend digitalocean go down below there's a link in the description of this video to get a hundred dollars for free for digitalocean it's worth it definitely by far the best service provider for any sort of your server server side needs that i've come across in my development career so check out digitalocean and i'm going to be using digitalocean in this video so you kind of need to you kind of need to use it anyway so after you register an account on digitalocean uh you'll probably come to a view i think if the view will actually look like this let me just go to digitalocean.com and i'll kind of try to go through this just as if you were going through it for the first time yeah so if you don't have any projects let me close this if you don't have any projects you're gonna have to go to new project right here now create a project name i'm gonna i already did but you can name it whatever i named mine open chat demo you don't have to have a description you can select a purpose i selected class project educational purpose but if this is a real website for you just select website or blog and then click create project after that's done you're going to have a project over here on the right this is what it should look like other than this domain right now you should not see anything in this kind of domain section i only do because i've already added this domain and we're going to come back and talk about this later so don't worry again i'm going to explain every single thing that we do so if we refer to the document this is actually the first step so create a digital ocean droplet with an ssh login and then here's kind of the steps and i have images for you so you're going to want to create a new droplets set the configuration do the get an ssh key this is very important to have an ssh key to make your server more secure make it way harder to log into and then you log into your server and doopedy dooped so that's what it says in the document you can follow the document or just watch me do it on video so let's do it on video so you want to go up to create up here and go to droplets we're going to create a brand new digital ocean droplet which is like creating a new system to you know host something i'm selecting ubuntu 20.04 choosing a plan just a basic plan we don't need anything fancy to do this i'm going to choose the five dollar a month option so very very cheap we have a you know you know just as a fun fact i believe my website codingwithmitch.com i think i only use the 15 a month option maybe even the 10 a month option and i get between you know one to two thousand uh users a day and my server has absolutely no problems at all i probably could double or triple that and even and still use this 10 or 15 dollar system so these systems are great they're cheap you don't need you don't need much to run a website at least a basic website anyway so five dollars a month not gonna use block storage we're going to select data center so wherever most of your traffic you think is going to come from selected data center close to there i'm just going to leave it at new york we don't need vpc network we don't need additional options now we come down to the authentication section now this is actually very important so you don't want to use a password login because then people could just try to ssh into your server infinitely and just keep trying passwords and if they use an algorithm or a machine to try and crack that password they're probably gonna get it like unless you use you know some crazy strong password but that's still not a good idea a better idea is to use ssh because then you have to have a key on your local computer to even try to get in so this is this is the must much much more secure way to do it so you're not going to have an option here that says choose an ssh key you're just going to have an option that says new so click on new ssh key here and you can follow these instructions but i guess i'll go through it with you so what i want you to do is open up a command prompt so i'm just going to open up you know windows command prompt and i'll increase the font here so you guys can see a little better so open up a command prompt and you're going to have to have git installed on your computer like github get the command line interface for github if you have that installed your windows computer will be able to do this command here ssh dash keygen and then it'll ask you some options some it'll ask you some some questions and you got to fill this information so enter a file in which to save the key so by default it's going to get saved there that's fine i'm just going to click enter and say sure now you want to enter a password so this is very important you need to remember this password this is the password that you're going to use to log in and it it gets tied to your ssh key so now it you know gives some information it says you know i generated that key for you so now we can go and get that key so let's go into where was it c i think it was in users and mitch and then dot ssh right here and then so there's that that ssh key that i generated right there id rsa now the naming of this is not tied to the key itself so like you could rename this i could do like open chat demo or you know whatever whatever you wanted to name it i'm going to name it open chat demo just because i don't know just because that's what i'm doing i'm doing a demo and i don't actually like to keep it in this directory what i like to do is i'm going to cut this i'm going to go into another directory and i have an ssh directory here in my d in my d directory i'll create another folder here so just ctrl n and i'll do open you know i don't know open chat demo i guess and then i'm going to go in here i'm going to paste those keys into this folder now it's also a good idea to save a copy actually it is it is almost mandatory that you save a copy so what i'm going to do is control c on there and then i'm going to go into like an external drive like my z directory here which is an external drive they have on my computer again i have an ssh directory here i'll do the same thing actually i think i copied the folder so i don't need to do that i'll just delete that new folder and paste that in so then i have a copy of that ssh key because if you if you lose this ssh key you will not be able to get back on your server it will be literally impossible you'd have to rebuild your droplet and start from scratch you would lose it completely you won't be able to get on your server so definitely make sure to save a copy so that that's the key that you're going to use to log in now if you follow the instructions here it says you'll be prompted to do this stuff you enter a password you add the public key and then you so you want to copy that public key into here so copy your public ssh key and paste it in the space below so let's go to the public key the public key is this one it's a dot pub file if you go to edit with notepad and open this up let me bring my notepad over here it's just a big long string of characters just press ctrl a to copy it and then paste it in here and then you want to enter the name and you can enter any name here it's just a name for the to like differentiate the key so you can say like open i'm going to say open chat demo because that's what this key is for so add ssh key now that's going to add that ssh key to my digitalocean profile you can see that it's saved here now so now that's the one that the server is going to get booted up with and that's the one that it's going to expect when you try to log in so there's the ssh key um i think we i don't think we need anything else you can choose a name to name your system i'm just going to leave it like that add some tags that's just for organization it doesn't really matter i'm going to leave that empty also and then select a project so open chat demo enable backups that is always recommended it automatically creates backups of your droplet in case something goes wrong you know you can log in and say reset my droplet to like two days ago or whatever in case you do something dumb or something happens and you lose your server or something goes wrong in your server so now create the droplet digitalocean is going to build that for you and we'll be ready to move on to the next step so the next step is logging into your droplet with ssh and ftp so what i like to use to log into my servers is this software called moba x term i'm going to click this link and it'll take me to their to their website so if you click here it's free you can just go get moba x term now the reason i like to use mobaxterm is because it has an ssh and ftp in the same window and i'll show you what i mean so if i open up moba x term here it is right here if i was to log into a server it will show the ftp over here on the left and the console over here on the right so it's really convenient because usually these two pieces of software are done separately but i just i like this because it does it together so i i suggest using moba x term you know it's free and it's awesome so i like i use it so um now we want to log into our server so you can log into your server by going on to session here and go ssh and now we need our ip address so we go to digitalocean for that copy that ip address paste it in here we want to specify a username of root go to advanced ssh settings click use private key remember we need that private key to log in i'm going to click that little search button there and we want to look for that private key so open chat demo and the private key is this one right here so the dot pub file it'll be you know the name and then dot pub that's the public key we want the private key which is this one right here so clicking on that and then click ok and now it's going to try to connect so it says password for the open ssh private key this is that password that you entered when you built that private key on windows and now it's checking it comparing it to your password seeing if it all lines up if everything's good you should see what i'm seeing right now you can see i'm logged into the server as this as the user root you know i'll actually increase the font here for you guys so you can see a little better so hopefully that is a little bigger for you guys i couldn't figure out how to increase the ftp over here but at least the console the terminal font is a little bigger so this is uh this is the software i like to use the console is in the middle and then you have the ftp over here so you can drag files in you can browse the directories in the server it's just like a very convenient way to do your server management stuff so the next step here is install the server dependencies so these are the things that you need to execute to have your server with all the things it needs to run the application so i didn't write any notes here i just kind of wrote all the raw like commands that we need to do this also includes like setting up the postgres database you can see here i am installing the postgres uh installing postgres we're gonna create a new user for our django project in the postgres database basically you know installing everything that we need so what i recommend you doing is exactly what i'm going to do in this video i'm going to go through each one of these dependencies and literally just copy paste them into the server terminal so the first thing we're doing here is we're changing the password i don't know what the default root password is maybe it was that password i'm not really sure either way i'm just going to change it so i'm just typing a new password here that way i know what the root password is we need that because we're going to be jumping back and forth between users between the root user and the user that we create for the project now run sudo apt update so just copying that putting that in here it's going to update your server with a bunch of different dependencies when that's done then we want to install postgres so that's this one right here so when it's done it looks like it's done by the way i'm right clicking to paste in here if you press ctrl if this is your first time using like a terminal pressing ctrl v does not paste you're going to need to right click to paste so i just right clicked click enter yes to install that and it's going to install a bunch of stuff as soon as that's done we're going to log into the postgres database so this might take a second i'm just going to fast forward the video while i wait all right looks like it's done now what we want to do is we want to log into the postgres database so sudo u postgres psql this is me logging into the postgres database as the user postgres so now that i'm logged in i can you know do things to the database so the next command that we're going to do is create the database django db this is the database that we'll be using for the project so i get the notification created the database good now i want to create the you create the user django with the password password this is now this needs to this is very important that you copy exactly what i'm doing here because this user django is going to be the same one that i create on the server that has access to our application so i'm creating a database user named django and i'm creating a server username django i haven't created the server user django yet but we're going to do that after this so right now this is just strictly with postgres so create that user next we want to set some set some parameters so some properties to this user so create role django set client encoding to utf-8 we want to alter role django set default transaction isolation to read read read committed we want to alter the world django set time zone to utc you can set time zone to whatever you want doesn't matter these ones are kind of optional actually it doesn't really matter this one is very important uh grant al so so these three are kind of optional not that important this one grant all privileges on database django db to django that's very important because i'm saying allow this new user that i've created named django to have access to this new database that i created django db then backslash q to log out of postgres so i'm no longer in postgres i've done everything that i needed to i created the database created the user gave the user permission to use that database now the next command here is sudo pip3 install upgrade pip so this is to download and install pip which is a python like package installer yeah python package installer i guess that would be a way to explain it now we're going to use pip to install virtual environment onto the server we're going to be using virtual environment on the server just like we use it in development you know you have to activate the virtual environment install the dependencies that kind of thing it helps keeps keep all the dependencies isolated it's the same thing as with the development environment you keep the dependencies isolated from the rest of the server otherwise the dependencies get installed server wide so sudo apt install git so that's how to install git because we're going to be using git to pull a repository from git to actually install the code onto the server so make sure to do that this one looks like it's going to take a while too so i'll fast forward the video to when this is done the next dependency is this one this is actually a dependency that i had to to find because of a cv2 issue so the python package opencv 2 we used to do some image kind of manipulation in the in the website i was having issues with it it was causing a random error and i found that this dependency fixed that error so just kind of a heads up this is a dependency that you need or cv2 is probably going to give you some issues now we're ready to create this user django in the server so just calling add user django that creates a user django i got to give him a password and then retype the password full name doesn't matter room does number work home other nothing matters just click yes create the user this is the user that's going to host the application they're going to own the application now we want to log in with that user so sue django so just type sue django now notice over here it says that i'm logged in with the user django now do cd home django so cd home django copying that that's gonna go into so you can actually navigate with ftp also like if you go to home and go to django notice so this directory was just generated when i added that user django this directory would not have existed otherwise the user django only has access to this directory they can't access any other files on the server so the only ones are going to be in this folder and this is where we're going to create the django project so cd into home and then django into the the only directory that this django user has access to now we want to we want to um make a directory for the project so make directory coding with mitch chat copying that pasting it in and you can change this like if you're going gonna create some other project you would obviously change it to whatever project name you need but keep in mind that all of the configuration files in this video that i configure for you know daphne's unicorn nginx systemd all of these things are going to be based off of the file paths that i build in this video based on my code so you're going to have to be very careful if you change any of these names because you'll have to change them in the configuration files also just keep that in mind if you want to not have problems do exactly what i do if you want to maybe have problems don't do what i do consider yourself warned now we want to navigate into the directory so cd coding with chat now in here i want to create the virtual environment so virtual virtual env i'm going to call it v-e-n-v that'll create that virtual environment so now if i was to go and refresh this notice we have that coding with which chat directory that we created and there's also a virtual environment that's now created and if we go in here we have all those kind of dependencies that are required to you know make a virtual environment work so just like we did we've done locally with the python projects you create the virtual environment and that's where we're going to run our project in so now we want to activate the virtual environment so source v e and v bin activate this is a so on windows what you would do i think is uh what it's scripts it would be scripts and then backslash activate to activate the virtual environment on linux or mac it's source and then you reference that activate file so it's a little different but does the same kind of thing notice same thing is on windows we have that v e and v over here in brackets now meaning that that virtual environment is now active now i'm going to make the source directory so make directory source i'll just paste that in and that's going to be the directory that we install our python project into so i'm going to go cd source and now now if i refresh this up here you can see there's that source directory now inside of this directory is where we're going to use git to pull the project source code files to and that's the next step in the document so it says publish your project to github oh yeah so so the way i built this is i assume that you have your own repository your own project somewhere you're not going to use mine so the the first step is if you don't have this on git you need to get it on git so that's what we're going to do now and then we're going to pull that code from git and you and you'll get it on your server so first step here is log into git and create a new repository so i'll take you through this even though i'm assuming probably most of you know how to do this already so here i'm here i am on git i'm going to increase the font size you get guys can actually see what's going on here so go up here go to new repository now you'd want to like if you're if you're following my video i suggest you calling this coding with mitch uh coding with mitch chat just to keep it like the same naming convention as me but if you don't want to you know you can name this whatever you want it doesn't matter uh it's just that you're gonna have to keep that name you're gonna have to be wary of the naming conventions when we do the configuration files later so just kind of keep that in mind so create the repository go create repository i'll just build it anyway even though i don't need to when that's done now you want to follow these instructions so we need to initialize this project for git so i'll go through this with you too so if we go to let's go to a django project my django project is right here chat server playground what you would do is you would go into the project go into the source directory right click here and you you got to have git installed on your windows computer by the way and then that will give you access to this git bash you can also open up a command prompt it doesn't matter like if you wanted to open up a command prompt here instead by the way if you didn't know what i just did there i just clicked in here and you do cmd and that will and then you click enter and that's going to open a command prompt to that window now what you would want to do in here is you want you would want to write git init i've already got a git repository initialized in there so that's not going to do anything for me but for you it's going to set git up in that repository so that you can use it so you can use the command prompt like i said or you can use the git bash i prefer the git bash so if you have get installed like i said you just right click in the in here go to git bash here it just gives you some like extra coloring i don't know i just think it looks better so once you have that what you'll have you'll want to follow these instructions here so you'll be you'll have you'll have to do gets init which you already did then you want to do git add all so just just type exactly what i'm typing even though it's not going to do anything for me then do dit git commit m first commit make sure that's in brackets now this is doing nothing for me but it's going to commit all of your code for you and then you want to do git remote well actually you can just copy it so just do git remote add you don't have to do this step this just changes the name master to main that's all it does now you want to copy this git remote add origin whatever your whatever that url for you is paste that in click enter i'm not going to click enter because i think that might screw up my repository so i'm not going to and then do git push u origin master master or main whatever you whatever you if you changed it to main then do main but if you left it as master then do master and that will push your code to get after you do that it should take a few seconds but you'll be able to refresh this page and you should see your code on github once you once you have that done then we can move to the next step so the code that we publish to the server is going to be slightly different than the code that you have in development because of different configurations like we're going to use digitalocean spaces and aws to host your static files you know some of the settings in there are going to be different it's just going to be slightly different for production as opposed to development so what i like to do like right now what you'll have is you'll be on you don't don't type what i'm typing right now but you'll you'll be on your master branch so right now i'm on my master branch i just switched to it so what you're going to want to do is you're going to want to build a new branch for production so to do that you can do git checkout dash b and then call it production or prod or whatever you want i called mine prod as you can see up here so type that click enter that's going to create a new branch for you then you want to do git push origin prod so make sure that after you create that branch do git push origin prod and what that's going to do is it's going to create a brand new branch that is exactly the same as your master branch you know what i'll just do it here just so you can kind of see so checkouts i'll call it production instead of prod or whoops i can do dash b b production that'll create a new branch and switch me to that branch you notice right here it says production and then just do put git push origin production and then that will push that new branch to your repository so now you have two branches that are exactly the same one is called production one is called master so we're gonna stop with the get stuff right now and we're gonna move on to the next step in the document which is hosting the static files with digitalocean spaces so like in development we kind of just had here i'll actually show you i'll bring it up on screen so in development we had like the static directory the static cdn media cdn and also a media directory in production we don't have these the only one we're going to have is static static cdn isn't going to exist media cdn isn't going to exist because those directories are going to be on aws or digitalocean so now we want to set up digitalocean to be able to do that so that's that's the next step now that we're going to work on so like i said we're going to be using digitalocean spaces to do this and digitalocean spaces uses aws but it you can you can do it all from digitalocean which makes it more convenient so if you go to uh the manage section over here and go to spaces you want to create a new space so you can see that i have a whole bunch here you know i have one for open chat open api the coding with mitch one is actually i built coding with mitch like three years ago and they did spaces didn't exist then so coding or coding with mitch is actually just using raw aws but but yeah we're going to use spaces so what you want to do is just go up here to create go to spaces and we can create a new digital ocean space so select a data center that's close to where you live i'm going to choose new york you can enable a cdn just you don't need to use a custom domain just enable it doesn't matter now do allow file listing restrict file listing so only users with api keys will be able to or only applications with api keys will be able to access your static files which is what you want they're hidden unless they have like the the proper credentials to access them now choose a unique name i called mine open open chat demo i've already created this that's why it's telling me that the name already exists but i suggest following me exactly so call yours open chat demo also actually you know what it might not work because i took that name so you're going to have to call yourself something else but just be wary that when we do the configuration stuff it's going to matter so wherever i do open chat demo make sure that you do whatever your unique name is now select a project i'm going to do the open chat demo and then click create space now of course i've already done this so i'm just going to go over to my myspace or have i created it i think no i deleted it actually oh yeah i deleted it so i could redo it for you guys okay so i'm gonna do open chat uh spaces okay i'll do open chat demo spaces that's right i deleted it oh that exists too um open chat xyz spaces there that's fine open chat xyz demo let's do that there we go so i'm gonna create that space just make sure everything's okay yep create that and uh we'll move on to the next step so it said that everything was created but it's telling me that i got an error i don't think there actually was an error i'm just going to go and click on spaces over here and boom there we go there's my new open chat xyz demo spaces now that our space has been created it's right here we want to go over to manage keys because we're going to create an api key to access these static files so just click on manage keys over here that's going to take you to a page where you have an option to use token slash keys oauth applications or access choose tokens slash keys and then scroll down and you see the section space spaces access keys you want to click on generate a new key you can see here i have a bunch of keys already i'm just going to reuse the one that i have here now i'll just create a new one so i'm gonna go to generate a new key i'll call this open chat xyz demo to match the name of the space that i created and then click check mark so that will generate a new key for me now it's going to generate a secret key and a public key you need to you need to record these make sure you don't leave this page until you get this so click copy on the private key it doesn't matter what you do like you can open up a notepad file and then you know paste in the private key also open up a notepad file and paste in the public key and just leave that open because we're going to be using those shortly when we do the digital ocean spaces configuration now the last step to kind of setting up spaces before we go and do the python and the django stuff go into your space so go into spaces over here and go to open chats the space that you created whatever it's called and inside of here we want to create a new folder so go to create folder and call this open chat static this naming again is is important we're going to be needing this in the configuration so if you call it something different just make sure that you are aware that you called it something different because it's going to be different in the configuration files so now in the document it says the next step is update the production branch so what we're going to do now is go to our source code and update that production branch so that it has all the necessary changes to reflect what our application is going to look like in production so i'm going to open up sublime text here and remember that on git i have my master or my production branch selected right here and remember you've created that branch you know you get checkout b production you push that now we're on that branch and we're going to make some changes to it so following along with the document the first file that we need to change is settings.py and you can just copy this stuff so copy this stuff it says at the top of the file this is what we need to add so go into chat server playground go into settings.py and at the very top we want to change this uh right here so right where the secret key is we want to paste over it and paste in this stuff and i'll actually move these imports to the top just to kind of clean this up so now you're probably wondering what is this config thing so what we're doing is we're actually separating out some of the important properties that are going to be variables within this file into this kind of configuration file so i'm saying debug now equals we want to get that debug parameter from this configuration file and the code for it is debug and i'm going to show you how to set this up so don't worry now allowed hosts you want to put your ip for digitalocean so go to uh go to the digitalocean console go to your project and copy that ip address so for me that's 134.209.116.22 so copy that go back to here and paste that in for your ip later when we set up a domain you're going to have to add your domain there also now the root url configuration this will be the project name dot urls so right now this already exists in the file if you search for it it says chat server playground.urls make sure to delete that since we're going to be defining it up here the wsgi application same thing delete that the asg i application delete that because those are all going to be parameters that are going to be set up here and then also delete this other allowed host so those are the first kind of uh changes to the settings.py file so now go back to the document and it says here at the bottom of the file paste in this stuff so i'm highlighting all this and going back to sublime text now scroll down to the very bottom of the file and paste over top of everything from the data upload max memory size all the way down i think oh no maybe just below that so below that variable and then paste in paste in that so what this is this is the aws configuration the digital ocean storages configuration for digital ocean spaces so we have these parameters are required we need the aws access key the secret key the storage bucket name endpoint url s3 parameters aws location static files and then all the static files setup stuff static file storage default file storage and then the email back-end stuff too so this you'll have to change also oh yeah so also if you want uh like when someone resets a password you need to have an email that sends the users an email so what you should do is go to gmail create create a brand new email and you're gonna use that for sending out emails to people so like literally right now pause the video go to google create a new gmail account a brand new one and that's the email that we're going to configure to send password reset emails and then base url here again you want to put the ip address so go to the top and copy that ip address again go down to the bottom and paste that in and again we're going to be setting up https later just right now we're going to be using http so ctrl s on that and if we go to the document the next file that we need to update is manage.py so this one the only thing that we need to change here is actually the project name so i'll copy this entire thing and go to manage.py but i'll point out that uh there's not actually that much we need to change the only thing we're changing here is right here it says chat server playground and i'm i'm replacing that with a variable so if i just paste this all in the only thing that i changed is that this was replaced with a variable also we have this other import because again that's gonna be part of this configuration file we're putting the project name here so control s on that now go back to the document and scroll down so now we want to create that configuration file and that configuration file is named settings.ini so let's go into sublime text and inside of the root directory so the source here right click go to new file ctrl s to save and call this settings.ini so this is a configuration file that's going to hold all those constants that i was referencing in the other files so let's control c on that to copy it now come in here and paste it in so debug is set to false secret key we need to put the secret key in here so if you go to settings.py and scroll to the very top we can grab the secret key which it looks like i copied over um okay my bad good thing we have a git repository with the backup so go to your git repository the one that you just created at the beginning of this video and you're gonna want to uh copy copy the uh the secret key so go down to for me that's going to be the production branch and i can go to chat server playground go to settings and grab that secret key that i accidentally saved over so once you have that go to settings.ini and paste that in here make sure there's no like strings this is not a string it's well it's just a raw value so make sure this is not surrounded in quotations now you want your aws kind of configuration stuff so first is the access key so you save that in your notepad file the access key is the short one right here so copying that pasting it in now we want the private key so copying that and pasting that in the storage bucket name so this one you can go to digitalocean to check what that is so let's go to digitalocean go to spaces the bucket name is this right here so open chat xyz demo that is the bucket name so copying that pasting that in putting it here the endpoint url you can get if you go to settings and scroll down and it's right here so this is the endpoint right here so just press copy and just go in here and then paste that in i think it's okay to use the leave the https like if you paste it in it doesn't have https but i think it's fine if you leave with https in front so try that and i'm pretty sure that'll be fine but we'll come back if it doesn't work now the aws location is the folder that you created so going back to digitalocean spaces this is going to be this folder right here open chat static it looks like that's the same open chat static so that's good and now this this these email settings are the email that you just created so remember when i told you to go to google create a new email you're going to want to put that email address in here and then also the password to log into that email because what what's going to happen is our project is going to send out emails from that email so it needs to be able to log into it and then send emails to people when they reset passwords and then of course the project name is coding with mitch chat but that'll be you know whatever your project name is uh but again if you don't want to have any issues just use what i'm using because then you're guaranteed to have this work so ctrl s on that and now let's go back to the document and see what is next so this step is update the directory names so in in our original code in the master branch when we built this project we were using chat server playground so notice right here this is chat server playground we want to rename this to coding with image chat coding with mitch chat we want the same as what the project name is right here that's why we're renaming this again if you don't do this you're going to have problems the directories need to be exactly right for the configuration files to work okay next on our document is update header.html so the websockets will be communicating the websockets use a different application as i said at the beginning of the video the the django project is run on as a wsgi and the sockets are run through asgi and they're run through port 8001 so we need to make sure that all of our websocket connections use port 8001 in production so if we go to header.html snippets so header.html scroll down to where we configure the websocket need to make sure that this is commented in and this is commented out so we're using port 8001 and for all the other files like if you go into you know chat or not chat notifications if you go into like the public chat or the private chat those ones are already configured like if you open up this and you scroll down to where our websocket is set up we have some if else logic here that is telling it to use the correct port if it's not in debug mode so we weren't able to use that logic in header.html because there isn't like a template that we're getting values from so we have to just make sure that this is using port 8001. so ctrl s on that now let's go to the next part so we we need to add jquery to this project you know this is actually funny when i was building the course i couldn't figure out why jquery wouldn't work sometimes and i'd have to go to the master branch and then go back to the development branch that i was working on to get it to work now i know why it's because when i first built the master branch i had i got a version of bootstrap that had jquery and then by the time i went to go build the course i had a version of bootstrap that did not have jquery and i couldn't figure out why i assumed they were the same but they actually weren't so anyway we need to get jquery you can go to this cdnjs.com and notice here i said don't get it from getbootstrap.com they have a slim version which is not what we want and that's the version that i was using during development which is why it wasn't working and i had to switch back and forth anyway you probably didn't even know that because i would have cut it out of the video but this is what we need so copy this go just go down here and copy all this this jquery stuff now go into base.html so openbase.html scroll down to here where i am getting oh it looks like i actually already added it so yeah go here you probably you won't have this in here right now but you'll want to paste in those two things jquerymin.js and then jquery.js ctrl s on that and now i can actually use jquery and jquery will work on the production server now we need to move some images around so going to the document we want to add defaultprofileimage.png to the static directory so inside the media cdn is a file named default profile image move that into static so opening up our directory instead of media cdn coding with mitch there's that default profile image i'm just going to press ctrl c on that and go to now go to static coding with mitch paste that in there so now that's part of that and we can actually delete a bunch of these folders now so we don't need media cdn i can delete that we don't need static cdn we can delete that we just need the uh the static directory also delete media if you have midi media in here delete that we can also delete all the migrations so if you go into each one of these if these have an initial migration delete that so in each each one of these uh python in each one of these apps delete the zero zero zero one initial migration i'm not sure if this is actually required i just kind of did it because i thought i'm gonna be applying all the migrations on my server so let me just you know start with a clean slate so just quickly like go through all these there should be only like you know a couple migrations anyway so just go in through all of these delete this migration i think i got one left in personal go migrations that doesn't even have any okay so that should be good the next step is requirements.txt so this is very important you you want to have the same dependencies the same requirements that i have because we need them to run everything on the application so i say make sure to copy my requirements.txt file so you have all the necessary dependencies i by the way this one is going to be different than the one you would have had it in the development course when you were building the course i've added some extra dependencies because these are ones that we needed in production like this g unicorn psy cope g2 binary that's needed for postgres django storages which is needed for digital ocean spaces and aws boto3 same thing digitalocean spaces and python decompile which is needed for the settings.ini file all of these i've added to this requirements file right here so if you click this link and you get this requirements file it's all it's all in here so you're going to want to just copy all of these go to sublime text go to requirements.txt and just paste it in and control s to make sure that you have all those requirements so very very important you know you could have also just installed the requirements file that we had during development and then done like pip install this pip install this pip install that but i've added them to the requirements.txt so you won't need to so now we come to an issue that i ran into so this is a weird problem i was actually talking to justin justin mitchell from coding coding with entrepreneurs and we were trying to figure out what was going on this is like some weird static files issue so you can read this but i'll i'll explain it to you here on video so if you go to like our public chat for example and go to public chat room and scroll down to like the element where we set this default profile image so right here profile image source remember we set that that dummy image and then we load the actual image using our preload image function well this is so this is really weird if we use a static django template kind of shortcut here to load a static file it doesn't work properly if you use it in javascript what ends up happening is oh um i don't have an example let's go to the document so say the uh the url for this image was this it'd be like some domain and then if it's using digitalocean spaces it's going to have a signature so it'll be like at signature well if you use javascript to load the static url in production what actually happens is it changes this and symbol into its html code so it would change it to and amp and then this semicolon if that happens it makes the signature invalid and it doesn't work so none of the images would load which is kind of really funny it's just like a weird thing so what you actually need to do is you need to come into uh this is actually the only part i think the only place that we need to do it you want to call dot replace on here and you want to replace the and symbol or the and amp and then semicolon replace that with and that's that's all you need to do it's just like a weird thing javascript changes the string and just into its html into it changes the ad symbol or the and symbol into its html code so we just need to change it back and then everything is fine oh actually that's not right this needs to be we need to use uh reg x to find all of them so what this would do is it would just replace the first one but we want to replace all of them so i'm going to delete that and do slash and amp semicolon do slash and then g that's the reg x that says uh find all of these so and amp semicolon and replace all of them with this that will that that'll replace all of them instead of just the first one so that will fix our signature when we use this static django shortcut for the images for any static file actually and now one last thing that i forgot to do when we were developing the course is go to account.html and scroll down to where the profile image is so in this view what we want to do is we want to show the default image or show that yeah that dummy image so i want to change this to static and then do you know coding with mitch slash dummy image dummyimage.png just like we've done with all the other images like in the realtime chat we want to show that default image and then call preload image i just forgot to change that so just do that and then search for preload image and uncomment this right here that way the profile image is going to get asynchronously loaded while it shows that default one so that that should be it for the code changes for production now open up your your git bash console again do git add all git commit uh dash m and just do you know i don't know uh production updates or something production updates doesn't really matter these are just comments it's going to say a whole bunch of stuff now git push origin production that's going to push everything to your remote git repository and we are ready to move on to the next step the next step is getting the code on to the server so we need to open up moba x term log in with the or switch the user django activate the virtual environment go into the cd uh the directory source all these things we should have already done so going into the project you can see here i have the virtual environment activated i am using the user django and i'm in the directory source if you're not if you haven't gone to the source just go cd home django slash coding with mitch chat and then source now we need to initialize a git repository so to get init that'll initialize that and now we want to pull from our git repository so depending on what your gate repository is you're going to want to do git pull the the url that you can get from git and then do the the branch so in this document i have git pull the repository and then prod so assuming that the branch is named prod but you saw at the beginning of this video that i called it production so whatever whatever your branch name is going to be so i'm going to copy most of this paste this in do space and then do production so i'm saying pull from this repository and pull the production branch so again you're going to have to change this url to whatever your your repository url is if you don't know how to get that you just go to git you go to the repository you click on code and then you copy this link right here that's the url that you want so once you do that click enter and now it's going to pull that branch and it says that i'm going to be on the production branch now so if i refresh this now we have all of our code for the production branch right here now that we have all the code we want to install the requirements so we want to run pip install requirements.txt so pasting that in it's going to go through that requirements file and install everything that we have added in there now this might take a few minutes or a few seconds anyway probably not more than a minute uh so i'm going to fast forward the video and come back to when this is complete all right looks like it's done so now we can actually do python manage.py collect static so i'm going to copy this paste it in python manage.py collect static uh looks like there is an issue improperly configured the secret key setting must not be empty so that means if we go to coding image chat and we go to settings and i open up this file uh yeah oh i thought we added that secret key maybe i forgot to commit the changes let me uh let me look at the code because remember i i accidentally pasted over that did i not commit it oh i added it to the settings.ini file but i never added it to settings.py right so i want to do secret key so secrets underscore key and then set that equal to config and then the name here is the secret key so that should be let me just make sure that that is spelled correctly secret key that should be should be good oh it's telling me now that because remember when we changed the name i changed it to coding with mitch chat so we need to actually copy this whole directory so remember when i changed this to coding with mitch chat before it was coding with mitch playground so this settings.py file that i have open here is different so i'm pressing ctrl a and then ctrl c to copy this whole thing and now i'm just going to close it so no we can just close it and then i'm going to open up the correct one so if i just go into go into coding with image chat open up settings ctrl a and then paste it in now press ctrl s now we should be good and we have our secret key defined at the top so we've made some code changes so this is actually a good learning experience because now we can go to the uh to the git console again or the get um command line and do git add all since we've made some changes git commit m whoops i meant to do git commit m add secret key as a comment now git push origin production so that's going to push that new code to the git repository now we can go on the server and we can pull those changes so then what i'm going to do is i'm just going to do this this same command get pull so git pull the link and then do the branch again production and that should overwrite everything and so you can see the changes here it says codingwithmitch settings.py that has been changed and if i open up settings.py now so if i refresh this and open up settings.py we should have our secret key in there and boom there's our secret key okay so that's that's that was actually a good example of like what do you do if you make some changes like locally on your computer and you want to push them out to your production server that's what you do you come you do the changes locally you would do your testing and development if it happens to be like something that can be tested in development you push it to your git repository just like i did here and then you you update the code on your server just like i did so now let's try python manage.py collect static again yes i want to overwrite the static files and so what it's going to do now is if we go into like our static files go into here what it's doing is it's going through all of these directories and it's going to push all of these files out to digitalocean spaces so it's taking a second here because there's you know a bunch of files in here there's lots of bootstrap files lots of collections files cropper.js but as soon as this is done what we can do is we can go to our digitalocean console and you'll be able to see all those files hosted on aws or digitalocean spaces so there it says it's done 397 static files have been copied so let's go to digitalocean and let's go into our open chat static directory and now boom there we go we have our admin files bootstrap the coding with mitch folder with those five images those like default profile image the dummy image couple logos uh so yeah all of our all of our static files are now out here also later like when users register those static files like for their profile picture will also get stored here so essentially what this means is are our static files setup is complete and it's actually working because you can see our images and all of our static files are actually hosted on aws or digitalocean spaces so if you go to the document it says at this point you can check digitalocean which we just did and our static files are there so that's great so now the next step is we want to check to see if we can run our project so this is kind of like uh just a little check to see like if you've configured everything correctly up into this point so let's do uh sue root um let me actually explain a little better so what we're doing is like just like in development when we do python manage.py run server we're essentially going to do the same thing right now but on our server out on digitalocean this isn't what we want to have like at the end of the day we want to have like a service to run the application for us but right now what we're going to do is just run it manually just to test and like see if it's working so we want to log in with the the root user so do sue root and you're going to have to type your root user password that you added at the very beginning of this whole kind of process now we want to allow traffic through port 8000 so sudo ufw allow 8 000. now we want to go back to our django user so sue django now we want to activate the virtual environment so you're if you're in the source directory you're going to need to go back so do cd dot dot if you do ls you can list the directories that are inside the folder that you're currently in so you can see i have source and virtual environment so i can i can now do whoops now i can do source virtual environment bin activate so i'm copying that i'm going to paste that in there source virtual environment and activate so now my virtual environment is now activated again now i want to cd into source so cd source and i want to do python manage.py make migrations now this is actually going to apply all of our like or it's going to build up the migrations that we're going to apply to our database and it looks like we have an issue another thing that i forgot to change so right here it says codingwithmitchchatdev so if we go to sublime text and we go to settings.py and you scroll down to our configuration for the database the database name is not correct this is the database name for the database that we were using in development so we want to change this to django underscore db remember at the beginning of the video or at the beginning of the video when we started working with the server stuff we built that postgres database that and that database was called django underscore db so we need to make sure that we we add that there also i don't think the port is needed here so you can delete the port and this is now the correct database setup you know if i was smart what i would have done is taken this and moved it into the settings.ini file which you know what why don't i do that right now anyway so let's let's take these parameters database name and database user and go into go into our settings.ini file do database name equals django db do database user equals django and what else can we do here we can do the password database password equals password for that user django set that equal to password um what else do we need i guess that is pretty much that's kind of like the most important things so let's do now we can just do equals config and this will be database underscore name and the same thing for django so database underscore user and then this will be database underscore password so now we're getting those from our settings.ini file which is obviously the better way to do things so ctrl s on that control s on that actually you know what you can even condense this even more you could just like add this parameter here you could take this config add this parameter here and this config and add this parameter here and we can just delete those ctrl s to save that now we want to do the same thing when i made that mistake the first time now we want to go and do git add all git commit m you know updates database config sure i don't know and git push origin production that's going to push all of our changes out to production now we want to go back to moba x term and do the same thing so git pull and then the repository link so let me just scroll up here and i'm going to copy that same thing git pull the repository and then production by the way if you're copying things inside of this console you don't need to press ctrl c all you need to do is highlight it so i'm just highlighting that i'm taking my hand off the mouse and then now it's copied so now i just go down to the bottom i'm going to right click so make sure i delete this right click that's going to pull any of the changes it's telling me okay i change settings.py i change settings.ini great now we can try and apply those migrations again so python manage.py make migrations there we go our migrations are working all of our stuff has been generated now python manage.py and migrate and that will apply everything to our database now if you go to the document you want to copy this command python manage.py run server and you want to run it at this ip and then port 8000. so paste that in and now that's going to run the server just like we would be doing in our virtual environment so now we can actually visit the server so if you go to digitalocean and go to your project and go to the server copy this ip address and just paste it up here and see if you can visit your server oh and make sure to add port 8000 so your ip and then port 8000. so your application should be running so notice here that you can actually see it so this is like the first kind of test now this isn't set up like the setup isn't complete but this is the first kind of litmus test to see if so far have you done everything correct now the reason you you can't just leave it like this is because we don't want to have to you know run the server and have this consume the console every time we want to run it because for me to crash the server all i have to do is do control c now if i refresh this hey look our server is no longer running what we want on our server is we want something we want a service to run that for us we want it to tell uh tell it to run the django application so that we don't have to do this we we can just have it running kind of in the background by like an external service and that's what we're going to use uh system d and g unicorn to do so the next step here is if we look at the document is we want to use system d and a socket and g unicorn to run the application for us what this will do is that way when the server starts or restarts it's automatically going to run our application and our server will or our django app is going to you know come up right away so one way to kind of show you how this is going to work is run this command to unicorn bind that ip address with the port and then codingwithmitch.wsgi so if we come in here and we paste that in let's see what happens so it actually looks like i forgot to change a file so right now it's saying no module named chat server playground so if you go into coding with mitch chat and you go into wsgi right here it says chat server playground this again see the directory stuff is very very important so i forgot to change this so let's go to our again we're gonna have to make a correction uh see there's just so much opportunity to make a mistake in this stuff so what you wanna do here is do uh from uh which what was the import let me go into settings.py and double check from decouple import config so inside of wsgi from decouple import config and we want to add config here so i want to do f for string interpolation and then do config and do uh the keyword is project underscore name i believe let me check in settings dot i n i uh where is it project name yeah right there so making sure that keyword is set and then delete the chat playground also make sure this is double quotes and this is single quotes these that that's very important so ctrl s on that and maybe before i go let me just i guess that should be the last thing i just wanted to maybe make sure if i made any more mistakes but it should be good um it's actually strange that the server oh it's because so the server ran with before when we ran the server because it wasn't being run through g unicorn which uses the wsgi so that makes sense okay so now let's commit those changes like we've done before when we fixed our mistakes so git add all commit i'll just say update to get this done git push origin production now go to our server and we want to pull those changes so coming in here again we're going to do the get pull the repository and then production so pulling that again boom we've got some changes now we're going to try that again so g unicorn bind and bind it to that wsgi so right now that looks good we have no errors and if we go to that same url so if i refresh this boom again we have our application running so what this shows you is it shows you the g unicorn can run the application right now it's it's not you know necessarily any better than doing python manage.py uh run server because you know it's still consuming our command prompt it's not gonna restart if the server restarts so it's not necessarily better but what we what we're gonna do now is we're gonna configure a systemd file to automatically run this when the server restarts and starts so that we don't have to so it kind of gets just run in the background so that's kind of how this is going to work so let's scroll down and we need to create some new some new files so the first step here is configure system d to execute g unicorn through a g unicorn dot socket file so first things first we need to sue over to our root user so sue root and then type the root password and basically the way you got to think of this is anytime you're editing anything inside of the django directory you want to be using the user django because you want them to own that user to own the files anytime you're doing anything that is not in that directory you want to be using the root user because those are kind of like global things that need to happen now the next step here is navigate to this directory now you can either it doesn't matter like you could do cd and navigate to the directory or you could just go over to the ftp over here which is probably easier just go in here and navigate to that directory and you want to open up a file that's named or you want to create a file so click this little create file button and call this gunicorn dot socket now open up the file open up that g unicorn socket file so it's going to open up this kind of window here you can close this wsgi also and you want to copy this code into that file so if you copy this paste it in click save and do auto save don't ask me again now the next step here is create a g unicorn service to run the wsgi application so you want to create another file named gunicorn.service so let's go up here and create another new file click the same button unicorn service okay now copy in this code so copy this exactly and this is a a very important like all of the file paths in here these need to match exactly which whoops open up to unicorn service paste those in and just look at these so this directory structure needs to match exactly so if you've changed the project or changed any directory names you need to make sure that you update these accordingly like i have home django coding with mitch chat and then source if yours is different than that you need to make sure you update that now i'm telling it what to execute so i'm saying use g-unicorn and execute this command bind unix unicorn socket and run the coding with mitch chat wsgi application so this is i'm telling it to do what we just did right here i'm saying do this do this thing that i just told you to do but i want you to do it automatically that's essentially what what this file is all about so save that go back let's see what the next step is it says sudo system ctl start unicorn socket so paste that in boom then do sudo ctl enable g unicorn socket to enable that it says created sim link and it now so what it just did is it created a link from the service to that socket file that i just created and uh that should be good so now it's configured to start your django application when the server starts or restarts the next step here is actually some helpful commands so like if you if you've done something wrong or you you know are trying to debug these are just some like helpful commands that i found helpful through my experiences with uh with g unicorn and things like that so first this says this must be executed if you change the geocode service file so if you're playing around with it and you're and like like if your file doesn't work and you're trying different file paths and stuff like that uh you need to make sure that you run this command if you ever change anything to make those changes take effect if you ever need to restart g unicorn this is the command you can run you can also just do a service i'll show you you can also just do service g unicorn restart that will also restart g unicorn also keep in mind if you change any of your django code like if i go to you know my directory or i pull the git repository if i change anything i need to run this command for those changes to take place so running that more often than not is generally a good idea and then you can also check the status of g unicorn so we're going to do this right now so pseudo pseudosystem ctl status to unicorn paste that in this tells you if g unicorn is like working or not so if you see like you know if you see green here and no red and no errors you know that it's working so that's good and then the last command that i think you should know is sudo shutdown dash r now so that's going to restart your server that's that is kind of like a a last resort like if you're not sure what's going on maybe code doesn't look like it's taking effect just restart the server sometimes that's just what you got to do so next we're going to configure engine x to proxy pass g unicorn so if you read this it says we'll be using nginx as an http proxy it helps to protect our website from attackers and you can read more about it if you click right here so essentially this step is all about getting nginx to work with g unicorn and allow it to like allow traffic through g unicorn so we want to navigate to this directory etc nginx sites available so coming up to the top here i'm just gonna you could have again you could have done cd and navigated to it that way but i think using ftp in this scenario is perfectly fine now the next step here is create a file named codingwithmitch chat so control c on there now go up here create a file create that new file now open up this file and we need to edit it so copy this code that you have right here and paste it into this configuration and you need to change this to your ip address so i'm going to go to digital ocean and copy the ip address go back to that file and just paste in the ip address now your later when we actually hook up the domain the domain name you'll also need to append the domain name to here but don't worry we're going to come back and i'll show you how to do that later so pressing ctrl s on that to save it go back to our document and let's see what's next now we need to update the nginx configuration file so the configuration file is etc nginx nginx.com so we're almost there i'm just going to go up one directory so edc engine x and the nginx comp file is that one right there so open this up and all we need to do is if you look at the configuration here is we need to tell it that i want to be able to allow uploading of files because in our project if you followed along with the course you know that when somebody changes their profile picture a temporary image is saved on the server so that it can be cropped so we need to be able to we want to allow large files to be updated to our server because uh because of that cropping process they need to be able to be uploaded so i'm telling it that the maximum amount of memory that a file can be uploaded is 10 megabytes so let's whoops open that configuration file up again go down to wherever it says http like right here and just go to like the bottom and paste this in that says client max body size 10 megabytes or 10m so paste that in make sure that tab i don't think it matters if the tab is correct but it just kind of looks better so ctrl s to save that and let's see what the next step is next is configuring the firewall so copy this command and now paste that into your terminal i think that command like just now all of the stuff that we just set up like the engine x and g unicorn configuration that like that ties it all together with that command now to sudo engine x dash t what that does is it checks your nginx configuration so it says the the configuration file is okay the test is successful so we know that everything's good with our nginx configuration now we need to update our firewall settings or sorry we need to restart nginx first so sudo systemctl restart nginx restart that now sudo ufw delete allow a thousand so that's that's not that's going to change our firewall rules to not allow traffic through port 8000 anymore and now do sudo ufw allow nginx full so traffic needs to go through nginx and g-unic and then g-unicorn is hooked up to work with nginx so that's how it's kind of protecting our site now pseudo pseudo c system ctl restart g unicorn you could also do system or service to unicorn restart their equivalent it doesn't matter and now we need to set debug equals false but that's already set to false so we're good there uh service to unicorn is the same that just says that now restart the server so let's do sudo shutdown dash r now so pasting that in that's going to close the terminal for me so i can no longer access this now restarting the server generally takes i don't know i'd say like 30 seconds around there so once that's done are going to visit the ip address making sure to get rid of that port 8000 and we expect the website to be working now so there we go it's been about 30 seconds and as you can see i'm visiting the ip address and our website is live so it is working our django app is being served by g unicorn and everything is working as it should be now keep in mind we don't have like the websocket stuff set up so if you went to like the top of this page remember i talked about how uh we have like kind of this first kind of section here for setting up the basic django application so this stuff is now complete now we're ready to move on to like the arguably more difficult stuff which is configuring uh daphne to serve the asgi application for our websockets to work i mean i wouldn't actually say that it's more difficult it's just that this information was much harder to find on the internet there's not a lot out there so let's scroll back down to uh whoops where we were at so debugging and the next step here is actually just some like tips for you from me so here are some commands that that you can use to look at the server logs these commands are absolutely crucial to know if your server randomly isn't working one day this is how you start to debug it i can't tell you how many times my server just randomly stopped working because of some weird thing that happened or you know who knows these things just happen and you need to know how to debug them because if you have no knowledge and your server doesn't work and you go into your console and you're like hmm okay now what do i do where the hell do i even start these are the commands that are going to help you so take a look at these if you ever run into issues journal ctl is generally the best so like that journal ctl is like is like a consolidated log where all of your server logs are going to go so if you just write journal ctl that takes you to the server logs and if you press shift g that takes you to the bottom so that's like the most recent server logs you probably can't see them all that well but you can see like these are all the logs for the server so that's that's generally the place that you want to start when you're trying to figure out what's wrong for my next trick we are going to be downloading and installing redis onto the server and as this paragraph says it says redis is used as a kind of messaging queue for django channels you can read more about it here in the django channels documentation it's technically an optional parameter if you look at the documentation i'm not really sure how it's an optional parameter because i'm not exactly sure exactly how redis works so i mean you can look up more if you want to but just know that it's used for some kind of like a like a payload management system i believe you know it's like uh yeah i mean i don't know that much about it so i'm not going to try and explain it so check out the docs if you want to know more we are going to be using it so go to the go to the document copy this first line here sudo apt install redis server so click it here and lucky for us it's much easier to get redis working on a linux machine than it is on a windows machine if you watched the course where we built the realtime chat website you know that we had to use this kind of third-party library or third-party tool to get right as to work on windows but with linux it's super easy so now navigate to etc redis which is a folder that would have been just generated now that we've installed redis and open up this reddit.com file so it's a redis configuration file and what we want to do is we want to look for we want to look for this text here supervised no so i'm going to press ctrl f in the document and i'll pull up the find window here just you can see i'm going to find next and i'm looking for this line right here so we want to we want to we want to change this we don't want it to say no so i'm going to comment this out and i'm going to write supervised and system d so it's supervised by system d now press control s to save that click auto save yes and that's all we want to change in our redis configuration so i can close that now the next kind of step here is sudo system ctl restart redis dot service so pseudosystem ctl redis restart service now pseudo system ctl status redis so this is checking now the status of redis to see if it's working if you see kind of all green here you don't see any errors then we know that redis is working correctly then just press ctrl c to kind of get out of that sort of status window or status output and we'll move on to the next step so ctrl c to exit which we just did now we want to sudo apt install net tools i honestly i don't remember what this does i remember reading about it and i remember i did know what it does but i can't remember exactly what it does it's something to do with the redis configuration so now we want to confirm redis is running at localhost and port 6379 by default so we can oh right so net net stat is a way to analyze redis i believe that's what it was it's a tool that you can analyze things on your server so i just i just pasted in that command sudo netstat dash lnp grep redis so it's looking for i think like services that have the keyword redis so there you can see that our redis is running at localhost and port 6379 which is what we want because that's the configuration that we're going to set for our django project so now we can i don't think you need to restart redis again but i have in the document here that i'm going to restart redis so sudo systemctl restart redis just restart that service again even though i don't think that was necessary and now we can move to the next part which is asgi for hosting django channels as a separate application so from the django channels documentation you can read or it reads asgi asynchronous server gateway interface is the specification which channels is built upon designed to untie channels apps from a specific application server and provide a common way to write application and middleware code so this kind of says it's just like a little description about like what asgi is in a nutshell or why we use asgi for django channels basically asgi you can think of it as the natural successor or the successor to wsgi which is currently how our django application is running it's running through it as a wsgi application so this is the asynchronous version and it's kind of like you can think of it as the new the new version because django is moving towards asynchronous everything is going to be asynchronous and asgi is the one of the components of that so also kind of an important thing in here it says that uh the django channels are built upon and designed to untie channels apps from a specific application server so you you kind of we're running django channels as almost it's a separate application within our server so like we have our django project and then we have the django channels project so it's kind of like two separate things but we're tying them together so that we can use websockets in our project so we need to create a file named asgi dot py in this directory here so we can just navigate to that i'll just uh copy that oh actually one important thing that i missed is you need to make sure you're authenticated with the user django remember earlier i said anytime basically we're inside of this django folder anytime we're creating files updating files doing anything we need to make sure we're with the logged in with the user django the user django needs to own every single file within that directory not the root user otherwise the django project will have troubles opening some files because it won't have permission because if the root user creates it and the django user tries to use it it's not going to work so we need to do sujango to log in with the user django and then i want to make sure i create that file so actually creating it with ftp you can't do don't do that because this is logged in with the root and if you log in with the root and you create a file here the root is going to own it so what you want to do is you want to do you want a cd into this this directory so do cd and then into that directory that'll take me to that directory and now we want to use this command cad greater than asgi dot pi so what that will do is that creates a file named asgi.pi in the current directory that i'm in and it opens it up so that i can edit it so it says here in in as a like a note django must be the owner of this file so we're going to copy this now copy this uh asgi file stuff here and now go back to our console and right click to paste that in and this this prompt is going to come up here saying are you sure you want to paste everything in here it's got multiple lines you're going to say okay and now you can see that that is pasted into the window so currently i still have the file like open the way that i want to save it is i press control d or maybe it's i press enter and then ctrl d and then that now you can see that i'm no longer in that file so now if i was to refresh this you'll see that that file is now in here asgi dot pi also if i did ls which is the linux command to look at all the directories that of or the contents of the directory that you're currently in you can see that asgi dot pi is is one of those also if you want to look at like the permissions and like who owns the directories that you're currently in you can do ls dash l and hopefully you can see that ls-l and you can see who owns it who has permission to use it and then like what that file is so very important here that it says django owns this file the root user cannot own this file now the next step is deploying django channels with daphne and systemd so just like when we deployed our django application the wsgi so if you go in here you know we have our wsgi.pi file which gunicorn is calling to launch so just like we use g unicorn and systemd to run that on our server we're going to be using um daphne and systemd to deploy django channels we need to use daphne because it's just the easiest way to deploy an asgi application that uses django channels it was built by the people who maintain the django channel's code so it's built to to do that specific thing so if you read this this little paragraph that i have here it says g unicorn is what we use to run the wsgi application which is our django app to run the asgi application we need something else an additional tool daphne was built for django channels and is the simplest we can start daphne using system d service just like we did with g unicorn so that it will start when the system boots and uh yeah it'll work kind of the same similar to how we did it with g unicorn so here are some references that i found helpful if you want to know more about like daphne and how that works so you can take a look at those if you want now we want to log in with the root user so i'm going to do su root and type my password because we're no longer working in the kind of django folder now we want to install daphne so apt install daphne that installs daphne onto the server yes i want to do that now i want to navigate to etc system d into system because again we're going to create like a daphne service file just like we did with g unicorn so very i want to definitely draw comparisons to what we did with g unicorn and starting the wsgi application because it's the same kind of process just instead of g unicorn we're using daphne so now we want to create a file here and this is going to be called daphne.service so just like similar again we created that g unicorn service the only kind of the biggest difference here is the g unicorn socket we're not going to be creating a socket for daphne to run through mainly because i couldn't figure out how to get it to work so i have another way which we're going to which we're going to use to run the daphne service so now open up daphne.service and go to the document here and copy this and then paste it inside of daphne service so essentially if you look at this again very similar to what we did with g unicorn it's references the working directory and then it says okay find python uh use python to execute daphne and then tell daphne to run our asgi application on port 8001. port 8001 is very important because all of the websockets that's how they're going to be communicating is through port 8001 so making sure that that is correct is very important so control or control s or just save that and now we can go to the next step so we need to system ctl daemon reload just like with g unicorn we had to do the same thing so typing that in now systemctl start daphne service to make sure that the service is started and now we want to do kind of a check so we're going to do systemctl status daphne service typing that in and you should see all green here just like when we did that the status check for g unicorn basically if you don't see any errors here you know that you did it right so press ctrl c to get out of that and now let's go to the next step so starting the daphne service when the server boots so with g unicorn and the wsgi application we created a g-unicorn socket file remember i just kind of told you about that g-unicorn socket and that tells g-unicorn when the server boots to start at least this is my understanding of it anyway i'm not like a expert back-end guy so i'm not 100 sure if i'm saying this correctly but i know that this g unicorn socket is what is telling this unicorn service to run when the server boots so the thing the punch line here is i couldn't figure out how to do that with the daphne service so what i did is i i ended up you can see here in this paragraph i couldn't figure out how to get it to work so instead i wrote a bash script that will run when the server boots which then tells the daphne surface to start so it's going to do the exact same thing i just couldn't figure out how to do with the socket so it works either way it doesn't matter so navigate to the root directory so slash root so let's go into uh slash root up here and we want to create a new file named boot.sh so boot.sh now open up boot.sh and inside of here we're going to paste the following so just grab that copy it and paste it into boot.sh this just says sudo systemctl start the daphne service so like i said just writing a very simple bash script that is telling daphne service to start so now now we need now that we have this script we need to uh we need a way to tell this script to run when the server boots so i can actually close both of these we don't need those open anymore now let's go to the document it says save and close now we might have to enable it to run as a script i'm not sure if this step is actually needed but it's better to use it anyway again i didn't test if it didn't work if i didn't use this so just use it anyway so chmod you plus x root boot.sh just type that in that gives the that file permission to run i'm not sure if that's necessary like i said but better to be safe than sorry just just do it anyway now i have a little comment here that says if you want to read more about shell scripting i found this article helpful so you can go check that out if you want if you want to know more about like this you know this little script that i wrote little scripts you can run on your server to kind of automate things so check that out if you are interested next step is tell system d to run the bash script when the server starts so just like we did with the g unicorn service file the geodecorn socket system d is what is telling it to run when the server boots so we need to do the same thing but with that bash script so copy that path and let's navigate to that path and we want to open up or sorry we want to create a new file named on underscore boot dot service and now we want to open up on boot.service and we want to copy the following into it so just copy that notice it's just saying execute onstart and it references that boot.sh bash script that we just created so pasting that in gonna save that and we want to we can close this just save and close so now run system ctl daemon reload because any time you edit any system d files you need to run that just like we did with g unicorn just like we did with the daphne service now i want to start on boot so sudo systemctl start on boot that's going to start it now we want to enable it on boot so sudo system ctl enable on boot or sorry we want to uh we want to enable it so that when it when the server runs it will start now i want to allow daphne servers through the firewall so ufw allow port 8001 and now we want to restart the server just to like apply all the things and then we expect that when the server restarts so here i'm going to restart the server when the server restarts we're going to check the status of on boot.service and we should see that that is running as soon as the server starts and we didn't have to do anything so i'll come back in about a minute when the server is restarted all right looks like i'm in i have restarted the server now let's run sudo or ctl status on boot service if i paste that in here we expect to see all green all success basically if you see no red here you know that the service started successfully so that's great because now we can also check to see if daphne worked so you could do uh system ctl system ctl status daphne dot service let's check if our daphne service is running boom excellent exactly what we want the daphne service is running and even if just just for you know giggles we can do sudo system uh sudo or system ctl status uh you know g unicorn dot service let's see if that one is running oh it looks like that one's not running well i don't think that one has to stay actively running anyway so i'm gonna i'm gonna i'm not 100 sure that might be a problem but let's let's pretend as though it's not a problem and just move forward and i'll know where to check if later we've run into an issue but i think i think that just has to start it doesn't have to continually run like the daphne service which needs to continually run but i'm not sure but we'll come back and we'll we'll figure that out later so um next kind of is just a little heading here this is where the logs so if you ever have any issues with your if you do have any errors there with like those two status checks that we just did if you want to know where the logs are for on boot service or the daphne service this is how you can find them you can just use journal ctl and filter for that service or filter for the daphne service that will help you debug your issues so now we come to the domain setup part so if you want to use a custom domain which i'm sure everybody does nobody wants their website to be running at an ip address this is the step where we're going to do that and also as a heads up if you want to use https with your server which we're going to cover down here if you using https which again everybody whoops everybody should use it's a way to make your server more secure there's it basically encrypts the payloads all the payloads that gets sent to your server so or sent to and from your server so very important to use https if you don't use https many people just won't go to your website because it's not secure so if you if you want to use https you have to have a custom domain and there's also some some tricky stuff with um daphne with if you use https that you have to like reference the certificate in the service file when you start your django channels project so there's some tricky stuff so i recommend continuing to follow this this video uh because trying to do it yourself you're definitely going to probably run into problems so let's get started so if you want a custom domain which everybody does this section takes you through how to do that just the heading there the first step is purchasing a domain so i like to use namecheap.com as it says here it's you know any other any place you can buy the domain wherever you want it doesn't really matter i just like to use namecheap.com i technically have an affiliate link i don't know where it is they don't really pay me very much anyway so who cares so anyway once you go to namecheap you can just sign in let me just sign in and i'll show you how to purchase a domain so you would want to go up to oh i have to enter my authentication code okay so once you're logged in here you can see kind of all your domains that you own you can see that i already own the one openchatdemo.xyz which is the one that i'm going to be using in this video but if you want to search for a domain you could just search up here so like if i was looking for you know open chat blah blah blah.xyz uh and and also like the the weirder your domain is the cheaper it's gonna be generally like oh that one's actually pretty expensive weird usually you can find ones um dot for xyz for really cheap oh there we go yeah see this one's only a dollar 31 a year which is awesome so like i would recommend buying a cheap one unless you this is gonna be like a serious website for you but i would say just buy a random cheap domain for like a dollar or two bucks and that's going to be better or it's going to be you know this is just a demo so why would you buy an expensive domain so anyway when you want to buy it just go to add to cart and then go through the process of checking out so if i go to checkout you know if you want to use honey you can use honey you can set it to auto renew i didn't because i'm only going to be using this for a demo so i turn that off and then just go down to confirm order right there so i'm not going to buy it because i've already bought the one that i'm going to be showing you in this video so yeah buy your domain and uh then we can move on to the next step so oh how do i get to my account dashboard so here's here's the domain that i bought as i said open chat demo xyz so i'm going to be using that for the rest of this video now keep in mind that you need to do a comp you need to um to set this up now you need to point the dns to digitalocean name servers so once you buy it and you have it kind of in your console here you're going to want to click the manage button there should be a manage button here for me so if you click manage and you scroll down to right here name servers you want to select custom dns and do ns1.digitalocean.com ns2.digitalocean.com ns3.digitalocean.com and then there'll be a like a green check mark that you click up here to save that once you do that it could take i think it took me about an hour to have it kind of ready to go so you we can move on to the next step while that is doing its thing but keep in mind that this could take like like some time so um just do this and then we'll go to the next step which is going to digital ocean so you can follow the document we want to point the dns to digitalocean which says right here and now the next step is add the domain to digitalocean so we would go to digitalocean and you can tell here that i already have a new domain that i've already added but if you want to add a new domain i think you can just go up to create up here and there's a domains slash dns section so you would enter your domain like if it was open chats demo blah blah whatever you would or dot xyz then you click add domain i've already done that so i added that one with openchatdemo.xyz so i'm going to click on that and then you should see uh something like this but you'll need to point the dns so here you can see i have these three ns records and they're pointing to ns1 digitalocean.com and that's two digitalocean.com and it's three digitalocean.com you just want to make sure that those are the same as the dns records that you that you set up in digi in namecheap make sure that these match and that should be fine i think all of this stuff will be automatically generated when you add a domain so you shouldn't have to do anything so once you have this domain added then you can go into your project and it should be in the project that you set up here so now like i said this could take some time like it took me it took about an hour for mine to start working but once it starts working then you'll you'll be able to go to like open chatsdemo.xyz and you'll see your your actual server up in production so um mine isn't working yet because we haven't changed oh no never mind we still have to do the configuration stuff so like here um you'll need to update yeah the next step is update the nginx configuration so nevermind forget what i just said you won't be able to like just visit it as soon after an hour you'll have to wait an hour but we still have to do some configuration stuff so follow the document mitch follow the document so the next step here is update the nginx configuration because we have that kind of domain so we want to go to etc nginx sites available so let's open console go to etc nginx sites available go to this coding with mitch file and we need to add the domain up at the top here so like for me it's going to be open chat demo.xyz and then you just do a space so in between these is just a single space so single space and then i want to do www.openchat.demo.xyz so we have the ip address for the server space then the the domain openchatdemo.xyz then space and then www.openchatdemo.xyz so of course you would replace these with the domain that you purchased also the ip address for your droplet then you can press ctrl s to save that and let's go to the next step so sudo systemctl reload engine x so let me paste that in now we want to confirm that the nginx configuration is still good and we can do that by doing sudo engine x-t so if we do that it says nginx is okay test is successful great now to edit the next file so we want to go to our django project so navigate there and we need to update the allowed host file or the allowed host in settings.py so let's navigate there just paste that in and go to settings.py and change the allowed hosts so right now we just have the ip address but i want to add openchatdemo.xyz and i also want www.openchatdemo.xyz xyz so now those are those are these are needed because of if you watched the course when we built uh the the realtime chat website with with django channels remember when we set up our routing.py if you go into routing.py we have this allowed host or origin validator so this will only allow traffic to domains or ip addresses that are that are inside of allowed hosts so that's why it's very important to add your domain here otherwise the web sockets will not work so control s on that to save it and we can move on to the next part uh it says first of all service to unicorn restart because remember every time we make a change to any of the django files so like we just change settings.py make sure to run service g-unicorn restart and that kind of just restarts your django application so now at this point this is the point where you where you have to wait so it says you can take some time or it can take some time to see your website available at your custom domain i don't really know exactly how long it would take i personally waited about an hour and it started to work for me so then how do you know that it's working well you can if you visit your website and you see this welcome to engine x or you see your project live that means that it's working so let me go up here and if i go to open chat demo.xyz let's see what happens so right away i see nothing nothing nothing is there so i know that not enough time has passed yet but you know what it actually should work for me because i've already pointed my name servers another day and i've had my domain in there oh i see the problem it's because it's set up for when i did my original testing so this ip address is not correct so if you if it should work for you i think if you wait enough time like the stuff that you've done is correct i did something wrong so if you look at my droplet the ip address here is different than i have in my domain so i need to make sure that that matches so i need to edit this record change that ip address and edit this record and change this ip address i don't think you'll have to do that like you would have put in the correct information while you built the domain so you're probably good but that that should be why i don't see the nginx thing here so now i now i will have to wait some time i believe because i've i've changed this configuration so i will um i will pause the video well first i'm going to shut down the server one more time just because sudo shut down are now um and i'm going to pause the video and wait until i can i'm ready to move on to the next step and you'll you'll have to do the same thing so i would just take a break right now go eat lunch or half an hour or whatever and then come back and see what's what all right boys and girls uh hopefully you just took a nice little break and you're ready to move on to the next part in order for you to move on to the next part which is setting up the https you must have your domain working so notice right now if i refresh this if i visit uh if i visit www.openchat demo.xyz this works for me i can see my website is live if you don't see your website live at least you must see engine x is working if you see nginx it means that your your your your domain is working but you have something wrong in your configuration so if you see this nginx thing it means that yes your your domain domain is pointing to your server it's it's pointing to the correct ip address but there's something wrong with your probably your g unicorn configuration or something like that but uh in order to advance you must have this working so just keep that in mind uh you know something weird also i want to point out is if i go to openchatdemo.xyz without the www it doesn't work i don't know why i'm going to assume this is some uh something to do oh yeah see there so it's automatically appending https that's why it's not working so if i got rid of https then it works so anyway so it is working anyway so let's go to the document and let's see what is next for setting up this https so again the first thing is don't do this step unless your domain's working and i just showed you how to know that it's working and the first step here is we want to install cert bot we're going to be using let's encrypt to automatically generate certificates for us so let's uh let's open up the console window here and i'll copy this command sudo apt install cert bot python 3 cert bot nginx so pasting that in yes i want to install that stuff great now i want to do you know what i'm actually gonna wait for this to finish i'm gonna clear the log because it's gonna give you guys a better view i realized i've been editing this video kind of as i go and i realize when it's down at the bottom it doesn't really give you a very good view you know what i'll actually i'll make it nice and high up here that'll give you guys a better view so now sudo system ctl reload engine x so sudo system ctl reload nginx because we just changed something with the nginx configuration now the next command here is make sure that nginx configuration is still good so sudo engine x-t just making sure everything is good everything's all happy still sudo ufw allow nginx full that should already be enabled we did that earlier so you don't got to do that sudo ufw delete allow nginx http so this is going to block standard http traffic through nginx because we're going to be using only https so sudo ufw delete allow nginx http now we want to obtain an ssl certificate you'll need to replace it with your domain here and then dash d and then your domain with a www so i will copy just this part paste it in and then i want to do open chat dash demo dot xyz then space dash d www.open chat.demo.xyz and that should be it so click enter that's going to generate your certificate you have to fill out some information so i have to enter an email for this so mitch at tabian.ca hit agree hit yes and that's going to do all of that kind of certificate generation stuff so waiting for verification cleaning up the challenges and looks like it's good so now this question here it says please choose whether or not to redirect http traffic to https therefore removing http access yes so what that means is if someone tries to web visit your website through http it's going to automatically redirect them so we want to we want to choose option number two here redirect all requests redirected to secure http so hit two now that's going to do some stuff and uh looks like it's all done it's telling me my email address is invalid i'm guessing that's because i have certificates for other things with that email so i don't know i'm just gonna move on i don't think that really matters it says that everything is working congratulations your certificate is good all right so that's good now i want to move on to the next step so we want to verify that the cert bot is automatically going to renew our certificate every i think it's like three months or something like that so just sudo systemctl status certbot.timer and let's see what it does does it tell you how long if you look at this um trigger saturday november 14th so oh it does every day also only allow 11 hours okay cool okay so it looks like it does it uh every day or cert bot runs twice daily okay so renews it twice daily i don't know why i thought it was every three months that's weird uh next is to update the cores in digitalocean your course settings so um i'm not even i'm not even sure how to actually explain this step but we need to go to digitalocean and we need to go to our digitalocean spaces for this project so for me that's open chat demo go to spaces and go to settings up here and go down to course configuration so these rules are processed in order blah blah blah blah again i'm not exactly sure what this is for but i know it's necessary https now do open chatdemo.xyz do it for get requests the header that we want to add here is if we look at the document i have a nice picture so access control allow header so access dash control allow header and set the max age to 600 seconds again not exactly sure what that does specifically but i know that i had issues and i was getting an error on my server and i added that and that fixed it so just do it and everything will be good so now let's go to the next step we want to update settings.py because now we of course have a custom domain so let's go to home django coding with mitch chat and then into source go to the project go to settings.py um and also if you oh looks like i actually already edit it so i have uh open chat demo.expo xyz open chat demo.xyz so make sure those you have those in there also like the better way to do this would be to go to your local environment and change it here and then push those to production oh yeah see so i actually need to do that so settings.py i'm actually going to copy this so make sure you do this in your development environment save it go to the git repos go to the git console commit the changes push to production pull it you know how to do it we've done it several times now so do that now let's go to the next step here which is update the engine x configuration so remember i've said several times that the the django socket stuff is run as a separate application run as an asgi application so we need to tell engine x to allow that traffic for that application and it's going to be moving through port 8001 so kind of the same as how we configured nginx to allow traffic uh i guess through g unicorn to our wsgi application we need to do the same thing for our socket stuff so navigate to this folder etc nginx sites available so let me open this up go up here paste that in go to coding with mitch chat open up that file and we can change this also notice here now that we've done the some of the ssl or the https kind of stuff the cert bot generated all of this inside of our nginx configuration notice that this stuff was not here before before all we had was this so the the let's encrypt certbot added all this to our nginx configuration so it kind of automatically did a bunch of stuff so what we want to add to this is this little code snippet location ws and all of these settings and the most important one here is proxy pass the local host to port 8001 so just copy this and paste it you can paste it right here just below this other location so what basically what this is it's it's allowing our websockets to go through engine x it's allowing that traffic otherwise nginx is not going to allow the websocket stuff to work so scrolling on down now we need to update our daphne service file so go to etc systemd system make sure to save that to the coding with mitch nginx configuration now go to etc systemd system open up daphne.service and we need to make some changes so if you go to the right this is much much longer than it used to be so i'll paste this in and then we'll take a look at it so i'm just copying this doing select all and pasting it in the only thing that changed is this exact start so it's still saying use python i use python to run daphne but this daphne command is now totally different and it's different because of the https configuration now at the beginning of this video i believe i said something about how https makes this a lot more difficult this is basically the thing that makes it more difficult this this line of code was so hard to find anywhere on the internet i could not find any documents that told you how to can to run daphne with a server that was running https it took me a very long time so this this is this line right here this one line i bet you took me like eight hours just to figure out or something something stupid like that so i want you to appreciate this line that you have right here and the simplicity of being able to follow my document in my video but basically the change here is that it's telling it's telling daphne where to find the the certificate to use https and how to go through port 8000 and blah blah blah all that stuff so save that now let's go back to the document and we are almost done the last kind of things we need to do is just create a super user and use the server so let's do that so i'll close this document and i'm going to do su django and do i want a cd into home slash django whoops cd into home django and then coding with mitch chat and i want to activate the virtual environment so source virtual environment bin whoops virtual environment bin and then activate and then cd into source and do python manage.py create super user because we need an admin on our server currently we don't have one so the email will be mitch tabian.ca for me whoops accidentally did a space i accidentally did a space at the end of that email that's why it didn't work mitch at tavian.ca username will be mitch my password will be something super secret another super secret password there we go my super user is created so we can now go to our server and hopefully everything is working so i'm going to refresh we now expect to see https yes there we go https is working also if i go www that should work the same also if i was to just do like open chat.xyz redirects to https so that's looking all good and i'll increase this so you guys can actually get a better better view there okay so let's log in let's try to log in with my user that i just created that's super user so logging in and boom there we go it appears to be working although i'm not convinced that the websockets are working yet so let me go to inspect and go to console and no our websockets are not quite working yet so there's something something not quite right yet i don't know i'm just going to restart the server just for good measure because we've done some some changes pseudo pseudo shutdown r now just for good measure you know who knows sometimes sometimes oh i need to sue as root so sue roots change over to the root user and then restart the server just because generally when you change things if you see it not working right away restarting the server is generally a good thing to try so we'll try that i think actually what it was is i changed the i bet you what it was as i changed the settings.py file and i didn't restart g unicorn but anyway let's see let's see if this is working all right so it looks good you can see the websockets now are no longer giving an error the issue here is that there's an invalid room and if you remember back from when we first built the application and development we need a public chat room so if you go to public chat rooms currently there is no public chat room and this one needs to be called general so call this one general create this chat room and now the home page will know uh we'll have a chat room to be able to connect to so now now this should work and if you can tell it's probably working because here it says that i have one user viewing the chat and if i go to the console you can see that there is no errors everything is working as it should be so let's send a message hey this is the first message let's send that boom there we go and it looks like everything is working at this point the last kind of thing i want to check just to double check and make sure is i want to make sure that i can crop a profile image because i know in development we needed to we needed to be able to we needed a temporary folder to do that so i'll just choose one of these images and that's a problem right there because that should have executed a crop but let's let's let's assume maybe that was just something weird that happened oh yeah so there we go i refreshed it and looks like maybe cropper.js just wasn't loaded yet or something because it was being loaded for the first time anyway that looks good let's crop this image it now should be saving a temporary image on the on the server cropping it and boom there we go it looks like it's working so at this point i think i can assume that everything is working as it should be and um yeah thanks for watching hopefully you enjoyed it i know this was crazy long yeah thanks for watching i know i know this was very long but uh there really is just there was a lot of things there's a lot of things involved in getting this to work and i wanted to make sure that i included it all in one video because some of you might not have watched my course the real-time chat course some of you might just be people who are trying to get their websocket stuff to work and now you have you have a document you have a video you have a bunch of examples of me screwing up on video and then how i fixed them on video so uh yeah hopefully you found some value in this if you found value in this if you enjoyed this two hour it's probably that's probably about an hour and a half i'm guessing if you if you enjoyed this and it helped you please go to codingwithmitch.com testimonials leave a testimonial there and tell me how this helped you if you're a member on my website uh you know tell me how my videos have helped you specifically like what is the specific job that it helped you get what is the specific uh problem that it helped you solve maybe you had a problem at work like what is the specific thing that i helped you if you're not a member on my website you're just some random from youtube just tell me that you think i'm a cool guy and you and i helped you out with whatever the thing is you're working on be as specific as possible i like to see specifics also if you're not a member on my website consider becoming a member if you go to codingwithmitch.com enroll this is where my membership is outlined and i have a couple of memberships there's three options right now this one's going to be going away probably pretty soon i i announced last year that i'm going to be increasing my pricing so the this founding member subscription is going to go away so if you want to kind of lock in the pricing and be guaranteed to pay that the same price that you're paying right now this is the subscription that you want it'll it'll create create a a record in my database saying that you're a founding member so no matter what you'll only ever pay 240 a year or 30 a month it works up to 30 a month because next year i'm probably gonna increase the monthly rate to forty dollars a month and this is canadian by the way which is about twenty two dollars u.s and uh yearly you'll go up to i don't know whatever 30 times 12 is what is that 360 360 a year so if you want a cheaper membership this is the one to get for later on uh one of the best things about my membership is access to well not only to unlimited access to all these courses every course i make you get unlimited access to you could also download the videos so if like you go to any of these videos any of the ones that are not free if you go to any of the paid ones i'm not logged in but you can download the videos and watch them offline also you get access to a discord channel which i i'm in there every single day you know there's i don't know if you go to the homepage there's generally there's generally 50 people usually online and they're usually really helpful people like i said i'm in there every day answering questions and just chatting so it's a nice little community i really i really enjoy it i get lonely working here in my apartment all the time so i find that the discord channel kind of wards off that loneliness so that's also a nice benefit but that's it that's it i hope you enjoyed it hopefully this was helpful like if this is on youtube which i believe it is subscribe comment give me some kind of engagement go down below and just say hi give me some kind of a comment or something like that thanks for watching and i'll see you in the next one you

Channel: CodingWithMitch

Views: 12,390

Keywords: django channels 2, django channels, django channels production, django daphne, django channels daphne, django real-time chat, django realtime chat, django realtime chat website, django production, django websockets, django websockets production, django daphne tutorial, django daphne production, django daphne nginx, django gunicorn nginx, django production server setup, django production deployment

Id: 14zdpWW6eqw

Length: 118min 16sec (7096 seconds)

Published: Fri Nov 13 2020