Under 8 minutes to deploy a Django app to production with Vercel!

hi I'm Tom de cam in this video I'm going to show you how to use how to deploy Django extremely quickly with the cell it's extremely rapid and that's deploying a full Django app including how to deploy static files with your CI so that every time you push to GitHub it will auto deploy so start off with this the Django hello world template from versaille There's the link and click deploy choose I'm going to call it Tiber call it whatever you want this will create a new repo and click and now we wait for it to deploy and there we go it's deployed and so if we go here and click on it we can actually see yeah it's deployed already serverless functions are extremely fast and particularly with Versa okay now we've we've got it in production now I want to get it in a local copy to edit in development so here's the repo this is what personal setup pull that down and then clone it down and there we are it's in and now open my editor I use pycharm and let's create a local environment to set it up for me and make sure you go because we're going to use Django make sure you uh four point is the requirements 4.1 make sure you use something that's three that's like a 3.9 or later yep so virtual environment and then I'm going to call it end I'm going to use 3.10 open that pop in now we're in the virtual environment now I can install and there it is great this is the a slight bug in the first album repo so you need there's a misspelling if you go to settings application and change that to app it's referring so the here yeah that's that's a type that's an error in there set up and then run it again now you can see and if we go here there we go and this is expected disallowed hosts you're going to need to add this to our Django settings our local path if you like browser path add that so that you can that's it locally and refresh so there you go you've deployed to production extremely fast with Versa and any chain any push you make to your GitHub repo will be automatically automatically pushed to the that's all to production and also adding a custom domain and everything else is very easy through the first cell settings but let's add a static file to demonstrate that as well add a to our app we're going to add a templates we'll render some files where you can render some HTML and tml file with index let's find it add it to our git and then we'll add a view we're going to get rid of this response here and we're going to just install a render a render that template and let's import the Django helpers import render it no shortcuts my outputs there we go render Ah that's why I've misspelled template it's not templates templates okay and now we get come back to index should be okay yeah there we are okay so templates now we want to add we'll just add something saying hi there or hello another galaxy okay and then and we come back see yep there we are and now we're going to make add in a static file so which you will obviously want to do to add JS or to add your styling so we're going to call add it the static and then we're going to name space it to add a another file a directory with the name of the app in between not necessary but good practice and then we can call it CSS and then we add a CSS file style sheet and we'll call it index it's fine add it to get yes and then we could create a cast that's just it's just to demonstrate and say main text call class and we'll call it a background of interesting chartreuse no just call a color actually what is it saying there yeah let's see what that is main text okay and now we want to come back into here load use the Django tag to load static that loads that kind of provides a shortcut for us where is that yeah and then we're going to add our style sheets here we go to the link href equals and then static and obviously it's static and then link to our our place which will be example because we we get that static and so we get that and so it's going to be CSS index dot CSS and make sure you put that as a single comma as a single apostrophe and then at the static finish finish off the and then I don't have to go type well style sheet there it won't work because we haven't added the a class let's say class here print text thank you for autocomplete Okay so we've just added this in to main text and have a gallery and then there it is hello Galaxy let's actually add change that color a little to something nicer to dark Orchard yeah they are we need to set it up to build the static files for the cell We'll add update our settings file here using this if OS environment get the cell so we need to add RS that will check if we're on an our verse cell environment because aversal sets this environment variable and then you can see the instructory text there then we're going to turn a white noise which will compress the static files and we need to install White Noise here so make sure you go back into your terminal make sure you've activated your environment pip install white noise like that and then make sure you add it back into your update your requirements text there you go so you can see white noise is now there in your requirements.txt update to this nice little build kind of a configuration file that versaille has I'm just going to copy in something that I wrote that and you can see the green highlights the things we've added so we're going to add this build sh so this will use up to a build static files that would touch about CSS and anything else on our static folders for the cell and then we're going to put the static files here very simple hopefully and the green shows what I've added compared to the default so now we need to add this build.sh file air build dot sh and for this you just want to add in the things that you're going to you want to run at build time and that is going to be I've just copied the same pip install and collect static you do not want to add this yet because we don't have a database you can add a database which I'll do in a later video very easy again but currently This would run and say you don't have a database so get rid of that and we'll make sure thing I haven't done so far is we need to add the White Noise here to the middleware and you see here we just added this interval make sure to add that comma and so we push up okay and now we've deployed and I think we can see already perfect yeah we've deployed extremely quickly we've got a full production CI setup with Django the only drawbacks are that if you have massive python packages that can cause problems and if that's the case you can add background workers which yeah has a different service so hope that's useful

Channel: Tom Dekan

Views: 5,337

Keywords:

Id: KBzcDjanADU

Length: 8min 33sec (513 seconds)

Published: Thu Feb 23 2023