How to Deploy a Fullstack Django Web App on Vercel.

hi everyone so in this video I'm going to show you how to deploy this application on vassell it is easy and free so some months back I beat this up application using Django so this is this is a Blog application so I build this in Django and I'll show you how this has been how this is going to be deployed on a vast cell instead so it's super easy and free of charge so right now go down to your project directory so right now my projects files here so over here I'm going to create a file in the base in the rules directory so I'm going to call this file build underscore files.sh so I'm going to call this one let's create this file it's called build underscore files dot xh so these are the steps to go about it so once I've done this now fix this code inside here so just paste this so what we have there we simply have peep in store requirement.cst and python 3.9 managed by connect static understand so this is what we use these are the contents of this file so once you've done this now so I'm going to put another file called vasel.json it's simple just follow me for some.json so I would have to go down to the root directory again just right click here new file I'm going to call this vessel dots Jason so don't so we've made this other file already you can see there in the root directory you can see where we have the money where we have the money to spy that's why we are going to create these two files I just mentioned so click your bid underscore files.sh putting the content there then you create faster.json so you're going to put in the content there right now okay so here's the contents of faster.json so I'll just paste that in so don't worry I'm going to I'm going to share this these slides of coded to you guys on the comment section these slides what I just pasted there I'm going to share it to you on the comments I'm going to open it on the on my comment section so you can see you can see right this this is descriptive right just whenever you see Project's name because we have project name up here that's going to be the name of the folder that holds your settings of Wi-Fi you understand the folder is called my site on my end so your own ad when you cut something else again so wherever you see Project's name make sure you put them on that folder that contains your static that contains your settings.pify is super important so mine is called my site so I'm going to change that from this to I want to see my site so I'll scroll down again I also have that here so make sure you put in my sites here the folder that holds your settings.wifi my site so don't worry I'm going to share this lines of code with you guys on my comment section it's going to be pinned you understand so we've done this already so what's the next step okay so once you've done this the next thing for you to do is go down to your wsgi.spy open this file inside of this folder called my site before that is is it is in the same directory as your settings of Pi fi so open this wsgi.pify once you've opened it now so you're going to create a new variable called app it's necessary version is going to look for this variable called app it's called app and I'm going to assign that to application in Instagram you're going to assign this get wsg application so happens so you could simply see app is equal to application understands so we always do that so FAFSA is going to look for this line of code in your in your wsgi.pify so when we've done this now what's the next thing so right now we want to configure our static files it's super important okay so right now let's configure our static valves go down to your settings.ify I have that up here my students was Wi-Fi so this is not difficult at all just follow me step by step so just here I'm gonna paste some lines of code simple base so paste on it now so this line 124 and 123 are the same thing they are doing the same stuff right so I will just simply move 123 they are the same thing to remove it okay now so we need to add this to your settings.5 file it's really nice it's really necessary so my folder my starting folder is called Static you can see I call this static over here so whatever you call your static folder that should be that that should be what that should be the name you have here understand so I mean you called yourself something else make sure you put that name yeah so I called my static folder static that's why you can see that I have static and also here you understand so it's important you know to this please so once you've done this already you need to import OS on top go to the top of your computer to the top of your code let's import OS here let's say import okay so that's it once I've done this already I think we are good to go so you have to go down to your URS or pie five in your jungle projects so put this file now so just scroll down a bit you can see we have the media configuration for uploading of files threatening to into also add the same configuration for our static files instead okay and we have that here just put paste this over here instead so we have one for the media configuration this for uploaded files so that one is for the static files so once you've done this as if you almost done so we just keep scrolling down skip scrolling so scroll down to you scroll down to your settings or Wi-Fi reversal does not support sqlite3 this you can see Django come to this database on default well versus those for this kind of database version is something more production friendly and that's where post Grace curl comes in instance so at the bottom of the screen now I already have my post quiz configuration done so I'm just simply uncomment this cuts it and bring it up here so if you don't know how to create a postgres database I've been a tutorial before on how you can create a live PostScript database using Railway so I'm going to link that video in this video's description understand so right now simply paste this one here so first also accept this kind of database which is postgres understand so for this we have here vassa won't accept sqdb.sk like twitching accept it so I want you to do now is that if you do not create a live process database don't worry about that it's super easy I've made a tutorial on this before where I showed how you can make a live post quiz database using Railway and it's free of charge so couldn't go down to this video description I'm going to link the video in this video's description so right now you we have changed our database now so we need to make migrations super important so also make a change right now we've changed database let's make migration so come over here say python manage your spy make migrations so it's important you do this so let's migrate say my grades okay so you're going to create the new tables we need understand so it's gonna take quite some time in white Knights the live database instead so I'm not using the locality by using the live post Grace database it's gonna be it's going to be a bit slow in the stand so it's my great thing it's my greeting so it's it should be done so it keeps my creating so it's done so please if you can if you're getting in value from this tutorial if you're getting value please subscribe to my channel like this video you can share with your friends and also drop your comment I want to hear from you guys drop your comment for me instead Please Subscribe it's gonna mean a lot to me thank you so much so our database is still migrating let's take quitting the tables so it's almost done so let's just wait so once you are done we can quit the super user if you like it's not compulsory you don't necessarily want to create content Supply user you understand so so it's not migrating thank God so perfect so you've done this now let's run server python manage.spy run server so let's see so yeah no errors everything is working perfectly okay no errors no error says okay no arrows right so everything is fine so we want to add one more thing go down to the top now to your allowed oats your space days we need this allowed ocean stance so supportive ourselves so everything is up and now we are going to also these Dot now.sh and let's add our local links also add our our local our local domain which is one two seven 0.0.1 in a stand so you could also add localhost if you like localhost it's our local domains so it's going to be the live domain so you need to add this there so also if nothing we are almost done so let's continue now so once we've done this so right let's go and create our requirement.cst requirement file is necessary so come down here let's go to equipment.csd file so let me just say keep freeze and greater than symbol this angle sign then requirements dot cxt so enter so I'm going to create a five for us that's going to have all the dependencies for our project instead so it's going to take quite some time to do that so let's wait for it while it does that so right now it's done with the requirement.cst I think it has created the dependencies so you can see everything okay you can save it in there but on default so I've done this before that's why I'm going to remove these two libraries cycle PG cycle pg2 and psycho pg2 binary I'm going to remove them I'm using my music I'm gonna show you something it's never using post grease as your database you understand YouTube make sure you have ADP you need to make sure you have this dependency called cycle pg2 whenever I use postgres a database so this enables Django to connect to post Grace whenever you are trying to deploy if you don't have cycle pg2 and you're coming in your requirement.cst file it's going to throw an error while deploying in a stamp just know that so right now let's go install it so this dependency is called psycho PG tools I think I'm up I'm calling this to a cycle PG two yeah click on it so it's coming up so go to so I'm going to go to pipei.org so I'm going to install this in the right way so you must have either psycho pg2 or psycho pg2 binary you understand one of those two dependencies so let's copy this pip install so copy suppose we've copied this now what's happening it's not copying mine okay stop it now just come over here you're gonna simply install this understand so right now until we run this command called pip freeze so you can add this equation.cst to our to this file you know just you just let the new package you understand so into we have that package to this list that's why that's why I actually run this thing so right now I'm going to move this pg2 binary when we move I want to show you guys something I don't want to face some error on vast cells I want to show you how to debug this area of instance so I took it before you are trying to deploy on any app on any platform like iroquo Railway vessel it requires you to have this dependency this package in in your in your requirement or CST it's important to have it so once you've done all these things now so the next thing is going to push your code to GitHub so if you're not push your code to GitHub don't worry I have a tutorial for you guys where you can learn how to push your Django projects to GitHub so you find a video in this videos description let's start so before I push the gates up I need to I need to push my changes I've made down together so right now here's my code on GitHub I have my code already on this this is the code on GitHub already so for you if you don't have yours on GitHub go and watch the video tutorial and Link down you you will learn how to push your jungle project to get to this series is super simple it's easy you understand so right now to push I've missed some updates now so I'm going to push those updates now to get do that right away okay okay let's just say git add something I'm trying to I'm trying to push my ugly to get up so say please commits don't worry don't know what I'm doing here watch the video I'll link down below you let us put your go to GitHub super easy super easy so I just say update configuration professor so once I've done this now so I need to push the code finally push [Music] origin the main enter so right now it's going to push the update down to get up this last command get push origin means it's going to take quite some time to do about the screen will work now okay it's done it's done right since the browser now so we have now if I refresh the page now you see I've missed I just you see you're gonna record some new changes so that's the time so taking quite you can see now it says now I mean some changes now on this file since I can see says now you can see the commits name says added configuration for Van cell something push our code to GitHub what's the next thing so I'm going to go down to vassell dot com so let's see how it looks like so faster.com So currently we are on vastself.com this is vassell so over here if you don't have an account go and create your account it's free of charge no charge no credit card required so go down to fast.com so I'm going to log in I already have an account so I will log in so once I login is I'm going to continue with GitHub instead so if you have so GitHub is the easiest way to go in here if you have gitlab fun if you if you use bit Pockets fine but currently I use GitHub instead so continue to click on the button so we're going to take me in right now let me just give this some time so right now I mean go down to my dashboard I already have some applications on vessel because I have two applications I already have two applications on Virtual understand so what we have to do now is I'm going to Simply add a new one I'm going to add a new application right now on reversal we get so let's continue let's let's let's do this so I'm going to add a new one so for you you might see an empty page but just just come just follow me so I'm going to say add new so I'm going to say add new projects Right add new projects just follow me step by step it's simple so add new project so you can have access to so now I'm going to Simply now come over as you can see this is my engagement episode just over here click on this drop down so you want to click on ADD git account understand source of the app GitHub account rather so let's go ahead so this is my account here so since equal 20. so click on it once I've done this now it's coming up so I'm going to swim with my password and then proceed okay so once I'm done putting my password I was drawn onto this page instead of just scroll down scroll so now I'm so you can see it says repository assets I'm going to give it to a single repository I'm going to assume this and I'm going to choose the second option not this so I've done this now I'm going to Simply pick the repository I want to I want to deploy on the vessel instead so click on this list click on select your positions click on that just click on this right now okay let's say so now it my position is called I think it's called let's call the name is called it's called My jungle blog so come over here is a place again where was I oh so I'm gonna come back here again let's just say could you could try and see so it's got my jungle block so I'm gonna do now simply click your pickup you're gonna click on ADD GitHub account so over here remember we came here scroll down my repository is called my underscore jungle underscore blogs I'm looking forwards so you can see it over here so just click on it and then click on Save as soon as you've done this now so is it directing us again we are going to guess with directors let's just switch for this to get us a direct set okay we'll be brought back here again to this space so the brother just scroll just click I think you can close this drop down you can see my jungle blog is on top now you can see it up here so just click on this import button click on the import button here import let's set Imports right and I've imported this now scroll down click on deploy click on deploy it is deploying device discipline our project now so we might run into an error so let's see it's currently deploying see we can see we have you can see there's an errors let's see what the error message says click on this building click on the drop down so you're going to see the error message says now so you can see it was going so it was going smoothly smoothly smoothly so we got to this point here we fix up we Face some error here so the error says here just complain about psycho pg2 it says what it was I'm going to show you where the line is complained about psycho PG so where's the line again okay I think I'm looking for me just give me some time to find where it's complete exactly it says the path to fully as a key table please okay you can say it says if you prefer to avoid building cycle pt2 from source so what he's trying to say is that it's it's so right now it can't use cycle pg2 it wants to use psycho pg2 binary you can know what the error message says I will try deploy right so right now instead of us to use this dependence this package called cycle pg2 we need to use the one called cycle pj2 binary that's what vassell wants so I want to Simply come over here I'll copy this now paste on my browser let's paste it here and then search for read so once you install it display also install the dependencies so click on the first link the pipei.org so click on that so we're gonna come up again so you need to copy this installation process just copy copy it now go down to your browser again to your CMD let's install this depend this package so you're gonna install it now so it's done so I already have that so I'll simply run the PIP freeze again so update my account to update my requirement.csd file so it's important you do this so over here because we have second pg2 by Navi so let's move this cycle page it so you don't want it again remove it it's gone so that's it we've moved that already we don't want the circle pg3 because once you've done this now I'm going to push again to GitHub so get up then what's next again I think it's git commits right okay and the last one is called so so let's please push now let's push so let's wait for it twice processing so we are done um pushing the gate up once you push the gate up again it's gonna simply stop it deploying again on vassal vassell will start with deploying this so go back over here click on my where are we again she's going to start me deploying this Okay click on clean thing called swine see your name so you're gonna find where's our varsal okay this is our new this is our new application the new ones click on it again so I'm going to see them so I think it's currently is currently building it's building it's currently building the stuff the so you take his tea ongoing oh stuff I disappeared so click on view build logs let's see or I can come over here and say deployments let's see the deployments up here deployments so now I think it's ready because the first one should run error you can see the second one is saying ready right so click on this click on it now on the on the first link the one that says ready so let's wait for it as you can see our application has been deployed on Virtual these are the domains so these are the domains the individuals are the domains right so let's open this let's say it looks like you can see now currently our application is currently is have been deployed on vassal so we have a different domains so I think this one is Sim this one is much more simpler my jungle blog.fastcell.app so open this second one this is a much more simpler domain so this is this is much more simpler domain name so you can see yeah so you might be wondering our application is quite empty that's because we are on a new database from the old one we have here we are on the SQL actually database and already add some content in that database now currently we switched to a new database and I have not added any con since this database our database is CMT that's why I can see we don't have any content on this page also once you go down to your go down to slash admin slash admin create a super user slash admin once you come down to slash admin istrative videos make sure you have a super user created already you can see me come over here and add content to your blog application go down to your CMD and say python manage .spy treats super user security super user from here and the Spicer can simply access a Django admin I can go down there and create content for your blog because currently the blog is not Affinity blog is currently about application is not Affinity blog on it instance you can go down to slash admin and then create content for your blog application so right now they want to deploy our application on reversal instead so it's super simple straightforward free of charge so I hope you've learned something from this video I hope I've showed you some nice stuff so don't worry I'm going to share with you guys some of this configuration something like this so you don't have to just copy it I'm going to show this to you guys on the comment section so follow the steps I just follow the steps I showed you guys there it's not difficult first of all quit your build on the quit your build underscore file.sh putting this command or Json file put in this commands what else we do again your wag I5 over here make sure I put this line it's necessary you have to switch from using sqlite to using postgres or a morph or you can use a different database like MySQL but postgres is recommended if you don't have to do this I have a story on my on this video description where I showed you how you can make a live post creditor base using Railway esta so after you've done this already you're in your 7.5 you have to just go down there and add your success of information add this static configuration there and make sure this file is called the name of your static folder mine is called Static that's why I have static over here so what else go down cdi.pify you also have this line understand so I think we've covered everything we need to do and make sure you have the requirement.cst files instead so that's it for the plan to so for the plane to vast cell then you push you go to GitHub and then connect to varsal it's simple as simple as that so I really okay judge this tutorial if you did please subscribe to my channel like the video I would love to hear from you guys say something about the video in the comment section and we are going to see in the next video so stay blessed and bye bye

Channel: Code With Clinton

Views: 15,628

Keywords: deploy a Django project on Vercel, host django on Vercel, deploy a Django app on Vercel, django + Vercel, configure a django project on Vercel

Id: I5x8lAVQ8QQ

Length: 25min 26sec (1526 seconds)

Published: Tue May 09 2023