Deploy a Django web app to Vercel [FREE]

hi everyone and welcome to my next video tutorial where I'm going to be teaching you guys how to go ahead and deploy your Django web applications to something called versal alright so this is something that I've been reading about and it looks like something interesting so I saw why not go ahead and make a tutorial on it all right so let's get started now before we do this I just want to run us through a few things before we actually get to the point here so what I've done is I've basically just created a simple application so what I usually do is in a lot of my video tutorials I just have a basic application that I make use of just to make it easier for you guys so I just have a single page here that's all I have I have nothing else connect to it connected to it so I just have a single page here so a template basically and I can just show you here so just a simple index.html page with the normal URL and the view very simple stuff here all right so that's what I have at the moment so I'm just starting from scratch here for you guys okay so let's get started now so what we need to do first of all is if you don't have a GitHub account I would suggest going ahead and creating one so you can head over to github.com and go ahead and create your GitHub account um what I will do to make it easier for you guys I will attach the links so the GitHub link and of course reversal as well so I will be sure to add that in the description below so go ahead and head over to GitHub all right so once you're in GitHub and you've logged in so as you can see here I am currently logged in you can go ahead and just say new because we need to create a new Repository so I'm going to say new and the repository name here I'm going to give it the same name as where my project is in it's in a directory called Dev okay so just to give you some clarity here this is just my folder here so essentially what's going to happen is I'm going to open my div folder okay in my project Elevate here and I'm going to move everything here okay into this repository that I'm about to create and as you can see here the directory so Elevate is within Dev okay so just to give you guys a bit more of an understanding of what I'm doing here okay so we can just go ahead and call this Dev so that will be our repository I'm just going to leave it as public and add a readme file that's fine so be sure you add at least a readme file here very important okay we don't want it to cause any issues or whatnot and you can go ahead and create your Repository okay so just make sure you create a repository you can be anything you can call it anything that you want it really doesn't matter so just go ahead and create your repository okay so make sure you've done that now the next thing we need to do is head over to traversal.com here so of course like I said I will attach a link in the description below so what you can do now is you can go ahead and sign up from any an account sorry and don't worry it is free so you don't need to worry about that so we can go up and sign up for an account okay and a really cool thing of what you can do is you can actually go ahead and continue with the GitHub now this is important so make sure that you're at least signed in okay to GitHub before you do this so this is why I said go ahead and create a repository first before you move on so go ahead and say continue with GitHub okay so let's just wait for that to open up okay and now it's going to ask you for verification so what you can do is you can go ahead and enter in your phone number here so go ahead and choose your uh choose your country wherever you are and you can just go ahead and enter in your phone number so it's going to ask you for a verification now don't worry this is not going to be something that will be a huge problem so just go ahead and do that so I'm going to do it now of course off uh off camera so go ahead and verify this and once you've entered in your phone number here with your location you can go ahead and continue so I'm just going to just pause the video so go ahead and do that and press continue and I'll show you what happens after you've done this all right so what's usually going to happen is you'll put in your phone number and say continue and then it's going to ask you for that code into in that code and then I'll show you the next set of steps all right so go ahead and do adjust that all right so welcome back so upon completing everything that you needed to complete you'll notice that you'll be redirected to this page here that says let's build something new and you might see a red message appear on the bottom right corner that says something about GitHub uh could not install or something or import something like that and you should see uh this of course spinner loading here around git namespace now don't worry about this we will go into further detail as to what to do here so all we need to do here is just keep this as is for the moment and then we will move on to the next set of steps so don't worry about this for now okay we will get to it okay so just make sure you're up to this stage and we're going to leave Versa for just the moment okay so as long as you're here that's perfect now we need to set a few things up so head over to your application so you can go to your application and what I'm going to do is head over to my project so my project in this case is called Elevate so very important make sure you know the name of your Django project of course so here is Elevate now if you don't know what the name of your project is okay it will be the name of the folder where your settings.pi file is housed in so that will make it a bit easier for you to differentiate your project name so here I have settings.pi okay so now that I'm in settings.pi what I want to do here is by a loud host I don't want to allow all hosts I specifically want to allow hosts that have the extension of dot versal dot app okay so what you can do here is you can say dot versal dot app okay so this will be under the allowed host so this is the the domain extension you could say that will be one to allow so make sure you've add in the following all right now the next thing that we need to do is we actually need to go ahead and configure a versal.json file okay so this is basically our configuration file to bridge the connection and build our Django application and load it onto Versa itself so this is like the communication Bridge you could say between versal and Django for our application now to make it easier for you guys what I've done is I've gone ahead and already created it created it and set it up for you guys here okay so this is of course going to be a DOT adjacent file okay so what I'm going to do first of all is head over to my project so my projects elevate and of course I have my requirements.txt file here so if you haven't got a requirements.txt file I'd recommend going ahead and generating one right here so what you can do to do that before we move on is head over to your project so make sure in your project here and you can just say pip freeze greater than require oh greater than requirements requirements dot txt okay so you can type in this following command here so pip freeze greater than symbol requirements.txt and this is going to generate this requirements.txt file that you that you can see right here um it will generate this so make sure you go ahead and set and run that command there okay so once you have your requirements.txt file okay in your main project directory here where you have your manage.pi your DB sqlite database and your requirements.txt file what you want to do is you want to create a Json file okay so that's very important so what we're going to do now is we're going to create a versal.json file okay so this is what we need to do so what you can do is you can go ahead and right click on your project here say new file and you can of course say vessel dot Json okay so this is important so make sure you have this versal.json file created here in your projects directory along with manage.pi requirements.txt it's important that you get the directory correct because if you're not in the right directory um you will get an error now the next thing that we can do is add in this code here okay I will explain it so don't worry now regarding this code here what I'm going to do is I'm going to go ahead and paste it in the comment section so I will pin the comment so you can literally go ahead and copy this from the comment of this video now I will go through this with you so the important thing first of all is the source so SRC so this is your source code so remember the name of your project so my name the name of my Django project is Elevate so here you can change this to the name of your project so just to show you again so elevate and that's because my Project's called Elevate and Here Again by the destination route it's elevate okay so that is the project name everything else is going to be exactly the same as is the only thing you will change is the project Source here under build and the route to destination which is Elevate so the route here okay this is where versatile is going to look for our Django application we're pointing it to the wsgi here and of course in the source it will be at the base directory we are going to be making use of the virtual python platform and of course here we've stipulated here as well again that we want to build our application based on our Django Elevate project at wsgi then of course with the configuration setting here okay we're just setting the max Lambda size and we're setting the run time to python 3.9 now unfortunately um we haven't got 3.10 yet for versal so we're just going to have to make do with 3.9 but you shouldn't have much of a problem here because as you can see in my requirements.txt file my version of Django is 4.1.5 so you're not going to have any problem with that so I wouldn't worry too much about this fact okay so make sure you've got that all in place so make sure in your major projects directory along with your management Pi file you have your requirements.txt file um and make sure you have your versal dot a Json file also in your main directory here as well okay so make sure you have that and like I said I will put this code in the comments section as well so make sure that you have that in place okay now there's one more thing that we need to do and what that is is we need to head over to our wsgi.pi file within our project here so it will be in the same directory as your settings.pi file so head over to wsgi now what we need to do here is we need to set app equal to application so I uncommented it commented it out but just for clarity here I'm going to type it again so I'm going to say app equals application okay now you're probably wondering what is the reason for this so this is because we want to go ahead and Bridge the connection and connect it to our virtual app so do bear in mind in our settings.pi we did set the the loud house to dotversal dot app so we need to set the app here of course to application okay so that we can ensure that we are connected connecting to our Django app on versal because remember Versa is called dot app so this is why we need to explicitly State the app part right here okay so make sure you have this in place very important okay so these are the main key area so to sum it up for you guys the important things that you need to do is under a loud hosts you need to say dot versal dot app first thing you need to make sure you have next thing you need to do is make sure in your main projects base directory you have a requirements.txt file or generated if you want some clarity just make sure you have the following as uh on my screen and also make sure you you've created a versal.json file right here in your directory as well and the only things you need to configure here is of course the source under builds and the route destination or desk which is going to be the name of your project that's the only things that you need to change here there's nothing else that you need to do so make sure that you've gone ahead and made these changes right so let's get started with the deployment process all right so before we can make use of vessel here and import our git repository we need to actually go to our repository itself and we need to go ahead and push our code here so what we can do is we can head over to our projects folder here so mine is called Dev and Elevate is my actual Django project itself okay so I'm going into Elevate and I'm going to copy everything over into my GitHub repository so let's head over to GitHub here and I'm just going to do it the following way so I'm going to go ahead and copy everything here so let me actually copy that so make sure you have everything copied and you can just drag it to your repository here okay so go ahead and do that okay everything is being uploaded so let's just wait for that to be uploaded so I have about 50 files so not too much so let's just wait for this to upload and we can then move on to the next set of steps so once all of our files have been uploaded we're going to of course commit them and then we can go ahead and import that exact repository in Versa and we can literally just watch it build and run so it has a very similar way of running like a railway but yeah let's go ahead and check this out so everything's been uploaded so we can just commit the changes so here I'm just going to say code commit It's actually an AWS service actually so code commit and I'm just going to commit the changes and commit it now there's many ways in which you can commit your code to GitHub I'm just showing you a very simple way as to how to upload them so of course it's really up to you as to how you want to go ahead and do that so let's just wait for it to process so I have a very small application as you can see so it will be very fast to actually go ahead and upload okay so everything is set and ready to go here now the next thing that we want to do is head over to versal and here it says import get repository you just want to scroll down here and here in that bar where you see the spinner you'll see a drop down symbol here and you can just say add GitHub account so you're going to add your GitHub account and you're basically going to install versal and give it permissions to access your GitHub account so that's all that you're going to be doing here so what you can do effectively is you can go ahead and either choose all repositories or select a repository so my repository uh from here of course was Dev okay so that's my Repository so I'm just going to go back and I'm going to say only select repositories and here comes the drop down where we can select a repository so I'm going to select a repository and I'm going to choose Dev here so Cloud does Jane go forward slash Dev great and you can just read the requirements and just go ahead and install it okay there we go so it's now connected to cloud with Django all right and our project has been set up accordingly now what we can do next is we can go ahead and just say import okay so as you can see we're almost done here so we can now go ahead and configure our project you can give the project a name here so I'm just going to call this um a Django deployment one okay and we can leave everything as follows it doesn't matter so we've configured everything accordingly in our versal.json file so once you put in a project name you can simply hit deploy and that's all you need to do uh okay the name so Django I'm just gonna say Django uh Django one uh should be fine um name is working okay okay I'm just gonna say Django let's go there okay apologies for that so here we go so it's now going to be building our project so let's just wait for this to build okay so our application was deployed and if we click on this space here we can see it sends us to our application and we can see we have deployed our application successfully on a vessel all right so that's it guys that's how you can go ahead and deploy a Django application or web app to versal okay so you can see it's very simple very easy um I I can see it's very similar to railway which is a plus so that's something that you can of course bear in mind so something very interesting to note so there we have it all deployed and set and ready to go all right so that's it guys and as always thank you for support and until next time see you

Channel: Cloud With Django

Views: 50,063

Keywords: Cloud With Django, cwd, CWD, CloudWithDjango, Deploy a Django web app to Vercel, Deploy a Django app to Vercel, Django, Django web development, Django developer, Learn Django, Learn the basics of Django, Django development, Deploy a Django app, Deployment, Back end development, Python Django, Free deployment, Python, Python programming, Python for beginners, deploy with python, deploy with django, free deployment, Django deploy, deploy django, django live server, django website

Id: ZjVzHcXCeMU

Length: 18min 20sec (1100 seconds)

Published: Thu Jan 05 2023