Host Next.js App on VPS Using Coolify.io (With PostgreSQL)

Hello What's up guys, today in this video we will see how you can host your Next Js application in VPS using Kaliffi. Yes guys, today's video is going to be very important because in the Nex application, for the database we are using a post base sequel, so guys, today I will host that application with the help of Kaliffi on our VPS server and tell you about it. I want to clear one more thing beforehand that this was the application, if you can see it here. Ok? I guessed a few days ago, just 11 days ago, I had told you about the same application by hosting it on VPS. And I told you in complete manual way about using Caddy which is important in which you have complete power from A to Z, do whatever you want to do. But just yesterday I made a video and told you that what if like we have a Versal, we have Netlify, we have a hook where we go and integrate GH and just select that GH project, set the environment variables, deploy and that's it, our live host is done. So guys, same type of user interface, same type of user experience, now you can use it in VPS also. And that is with the help of this coolfie. So today in this video how can you host live in BPPS with the help of KalI. I am going to share the whole video with you complete from start till end. And the best part is that I have already added the complete steps, step one, step two, complete steps here for you all so that in case there is some discrepancy somewhere, you can check out the steps. And I can guarantee that if you watch the video from start till end, you will not have any doubt. And whatever application you have, you can host it in a jiffy in your hosting a VPS server with the help of this qualification. Alright guys so what's the first thing to do? See first guys we need a VPS server. So till now if you were thinking of buying BPS then guys this is very awesome news for all of you. And that is BPS Pay already offered. On top of that I have special coupon code where you will get extra 10% discount on existing discount. There is nothing to do to get it. Just simple, for how many months do you want, for 1 year or for 2 years. Let's go with guys for 1 year. Ok? I have a coupon code here. You can see it very clearly at this place. So come here I have a coupon code. After coming here you just have to write with Thapa. Look at the end price it is ₹7788. But the moment you do this then now you have to do it only for Rs 7000. And this is very low. Believe Me BPS is priced higher than Usefully Said Hosting and Alldos. Because in this, guys, let's say your right application is Angular View, your Python, Node Express, MySkill Post, Mango Db, whatever you want, any kind of application, be it your normal HTML, CSS, JavaScript, any kind of application, you can host it here very easily, so guys please do check it out and then you continue here and by buying it, do the initial setup and create your SSS username and then the password, and for more in depth how to do it by buying. So you must check out this video. At least as far as we have gone by that, till the time we create the password. Once this is done then guys you need to open the terminal. And here you simply have to do whatever login you have with SSH root, guys, you can do it in a simple way. And once you login. Now your actual video starts from here. So guys, in my case, to secure my VPS, I have disabled no ah which is ah root user. So that's why I go to non root user. And what do I do? By doing sudo SEO, you can see that I am reaching my root user. Ok? But you do n’t need to do all this. Simply log in as your root user. SSH root using the method I explained in the beginning. Ok? Once you come here there is nothing to do. Just Simply We Need To Install. You can see here the first step written is we need to install qualify in our VPS. So for that you have to do that, you can see here we have these talks and in yesterday's video I completely explained what is qualify. So you can check that video out once. So please come to the documents. Ok? We have got this started. If you come here then we have this installation over here. You can see the installation here, right? So please click on this. So here you get a code. You just have to copy it. Ok? So I copied this and I will go here and I will paste it like this. And boom guys now you can see that this is ours has been installed. I do it a little less. So you can see congratulations is telling you. what is he saying? Congratulations, it has been installed. Everything has done its job. And here you can see what he has done? We are given a URL. Ok? IPV6 is the URL of IPV4. You should guide him to someone here, what should you do? I have no control, however it won't happen without pressing control. So I'm pressing Control and I'm clicking on this. Ok ? So you will see an interface like this. You can see that I had pressed it twice. So remember guys, this is very important. So, the very first time you install Kali on your VPS, you will see an interface like this. Isn't it? Simple. Now here, if you have installed Qualify for the first time, then you will have to register. So please add your name here. Through which email ID do you want to do this? So guys, here you can see that I have done everything like name, email, password and then password and basically confirmed password. And I click on Register. So now you can see that Welcome to Qualify, our registration has been completed. I will click on Get Started. What is qualify? We have already seen it in yesterday's video. So we know about self hosting with super powers brother. What is Next Now asking you? Whatever your server is it is asking you. Ok? what are you asking? Do you want to deploy your resources to your local host and to a remote server? This means that with lets you have two Vps each. What will you do? You will just install CoolFi on one VPS and host your website on the other VPS. What will happen from this is that suppose if your other VPS goes down, then the VPS on which you have installed CoolFi is basically installed and that VPS is safe and sound, you can make the changes from there or host it there. So guys, this is also a method which is used by big people. But we have only one BPPS and we are happy. So I would like to do local host only. Ok? So now there was a second on the right side, you could read it. Now let's create an initial project. So create a new project. Let's Do It in Resources. We click. And boom guys see this is it. So this is how you can install Qualify in your VPS and we are done. So what is the first thing to do once all this happens? Let me tell you. First of all guys come to your settings. Ok? The reason I'm telling you about settings is because the interface that you're seeing right now is Qualify's dashboard. This is good. Everything is fine. No issue. But the problem is that if tomorrow you shut down the app or you want to visit it again after logging in, then how will you visit it ? Do you remember that IPP address that we just clicked on before ? You tell me. Do you remember ? Not there. You don't remember. You can see it looks something like this. You had some the url was this. So it does not remember our IP address. That's why we call a domain and attach a string to it. We give him a domain name. So that's the instance domain. Right? So here I am going to give it a name. I'll give you a let's say a cool if just a second there's one thing to remember here. These people will say don't forget to add this particular HTTPS. This is very important. So you do one thing https call and huffn huffn kal dot cod wpal.com what did I do? Kal nepal.com now this kdw nepal.com is my own domain. Ok? You can give the name of the instance here like this: Ok? The end is okay. ipv before whatever it is here this is dns server. If for some reason you are unable to access it tomorrow. So guys, if you are using Wi-Fi or if you are using Ethernet cable, then go to DNS settings and add whatever URL you have for IPV4 by manually selecting it. In case this does not happen then this is all you had to do. Go into settings and give yourself a domain name of your own so that tomorrow when I hit this URL I will see this page. Simply, I gave the name of each instance. Ok? I will copy it. And I will save it here. That's ok. Apart from this there is nothing extra here. Ok. So much of my work is done. Now let's do one thing. Let's go here. Did something happen? Our accessible web server interface. This should also be mine. Ah I moved this to next one second. Now look at this part now connect your domain. Now this is important because just now what I did in front of you is qualify. Is NPA.com okay? Yesterday I added a sub domain Nepal.com, is it here? So, brother, I will have to at least denote this domain codit nepal.com at whatever IPP address my VPS has. Is n't it? You will have to connect. So what do we do for that? You can see. Here we have a code with npal.com check it out. Here I have the code vip.com. So I go to manage. You are not able to see manage. But here we have a management. So I'm going to manage. So the moment I go to manage. On the left hand side you can clearly see DNS and a name server. So we have to go to DNS and name server. There is nothing to do. I have already given you everything here. Just so you can see if you need to connect your domain to your VPS. For that matter this is a Type A record. Ok? We have to include that. Where we connect our domain to whatever IP address we are giving it. So type a give@@ means it has its own domain like what is my code is vip.com. So, I will connect it to whatever my VPS IPP address is and give it the time to lip, whatever it is, 60 seconds or 60 value. And again another one I need to add a type which is or add a record. On which I have to give an asterisk. Giving an asterisk means that now I can add any number of subdomains before my domain. And whoever I am adding, again you connect them to my BPPS IP address. Again I have given value 60 to TTL. So this asterisk is very important. And right now what we have done here is just the part with the asterisk. Because this is my actual domain codit nepal.com and this coolfi is yours what guys? This is nothing but your what? It's your sub domain. That is your sub domain. Ok? So that asterisk that I have used there, its meaning is that whether it is my domain or all my domains, you should connect them all to this VPS of mine. Ok? So this is how it works for you. And don't worry, I am showing it here in reality. Look at this, you can see it yourself. You saw this, look at this. You can see. So this is the Type A. Priority zero below this is the asterisk name. Content is basically your IPP address and then this is basically a @ whatever your IP address will be, you have to click on 60 and then add record. I have already done this. That's all you need to do. Ok? One has to do with @. The second thing you need to do is create an asterisk. You have to simply follow these two steps and add it. Asterisk is here. And somewhere we have this record. You can see over here we have this a record. I have already added this. Ok? So by just following these two steps, your domain will be connected to your BPS. Alright fine, my work is done. Is it okay ? And by the way guys, I have already done this. I did four first and three later. But whatever it is, I showed you it. And you must have also known how it is happening. Now let me tell you what I am saying. Like it is now. Isn't it? I have already connected. Now if I go here and click refresh. And boom guys see this. And those guys the moment you get logged in then you will see a dashboard of qualify like this. Now it is very easy. Note in first case just install it then install your next one. I do n't know how much I had to do. Install post grace sequel. So much had to be done. Install the gate. A lot had to be done when we were doing it manually. But now there is nothing left to do here. Simply installed Coolfi and logged in. Now do you want to host any project ? So come to the project. You can see on the left hand side we have this project option. So come to the project. Ok? Here you can see my very first project. Ok? You can click on this. So you will see something like this. But I don’t do anything about it. You can see at the top that you can host any number of projects here. And here we have this add button. You click on the add button. Whatever your project name is, please give it. This is my certificate. Basically I have an IT company called Codfire, so guys I would like to tell you about my own company where we take online classes related to IT. Currently, we have started Mysl classes, for which I had earlier kept the price at Rs 5000. But due to your request I made it 29. In such a short time, you are going to learn a lot from it. Our instructor lives in USA. He has already worked in MAC company in India for more than 4 years. Has been a team leader. They have complete idea that what is needed in the back end ? What's going on in the database world. He will tell you. How can you make a resume. How can you prepare for the interview? There are many things that you can see that you will find. I don't know how much the charges are at other places. But here only 2999, if you click here you will get the option. You can enroll here. And I will connect with you. Ok? Please check it out now. It is very awesome. You will enjoy it. These are complete live classes. We will all be together for 30 days. No recorded videos. Everything will be live. Allright. Ok ? So again I will add. Now you must have understood why I have written certificate here. Right? Because what do we do here? Codifiers also provide certificates, each with a unique ID. So here I am hosting the one which I created using Next and Post Grade Sequel. Ok? So if I write a blank certificate then I will know. Anyways I clicked on continue. So what happens is that when you are working on your local platform then we call it deployment. Isn't it? But when we work in real then we have the production version. So that's why we will click on direct production. Here we have this option called add new resources. So you come here. So when you come here, your first thing should always be that whatever project you are going to post, whether it must be stuck with Angular, or Python, or whatever it is, we are not concerned, first of all you create the database. So you can see here that the main thing is that whatever project it will be, it must be hosted in Git, we will see this later, we have a Docker also and database, so many [ __ ] DBs, Postgres, whatever else it may be, there are many services, so what is ours right now? There is post grace. I click on post grace. So the post is showing multiple types of grace. Post grace no i mean 16 we have a super base post this pg vector and all but we are using normal. So I will click on post grace equal 16. So the moment I clicked on it. It did everything automatically. No, I did not need to install it. I don't have to do anything like my name, nor your database name, nor the password. This is making everything happen for me. Creating the username for me. He is creating the password. You can see here, if you ever need to do mapping then this is the post grace URL, which is important, you should copy it. Alright guys so I saved this in my notepad also. There is nothing else to do here. So guys that's all you have to do. Just click on post grace. Meaning, all your work is done. Don't do anything. The start which is visible here at the end, on the top right, you have to click on it so that you start your database, it should keep running always, okay so these things, guys, let it keep running, it will start in some time, we don't have to worry, okay let's do one thing, let's wait for a bit and what do we have to wait for, I was just saying to wait, guys, look ours has started, this is okay, you can see it back here, here we have a bread crumbs, something, you can call it the same where there is production and post, now I will go back to production. Ok? Look, my database work is done. Now it won't be possible just with the database. Next jsB So now I'll go back here. Here you can see this again we have this new button next to the resources. So I click on new. You can see back here I will have so many options. Now guys there is multiple option here to deploy GH app via public private repository or via private repository. Look, you might be thinking that I have a public repo so I will select the public one. Oh no, I have a private repo. I am private, so whether yours is public or private, it doesn't matter, go with this second option with GH app, whichever repo you have, I have to take it from GH application. You should speak in this manner because till now I have not done anything to GH here. It has not been integrated yet. Nor do I have any actual GH project here right now. So that's why you have to select it. What is he saying to you? No GitHub application found please create a new one. So here we have this option to create a new one. So I click on Add GitHub App. Now guys what can you do here ? If he is calling you by your name then please give him your name. You have GitHub app, right? Ok? So you can write Thapa hfn shirt in this manner. Ok? And you just give the answer and I will click on continue. It is self hosted. Obviously I click on continue. So the moment I click on continue. So here is an important thing. And that is the end point. So what happens is that guys, we all know that I created a project like this is my Codify project. Ok? So I came to my online classes which we are going to start now. Now let's say guys, someone told me that these resources of mine are not 30, brother. You are providing more than 50 resources. Then what will happen to me? I'll go back to my project and make it 50 instead of 30. That means I will change it. For me, it takes just a second to open my file and convert three into five. But brother, if I have to host it again then I will have to go through the whole process again to qualify. Do this by logging into Qualify and clicking here. I mean how much hard work it takes. Is it or not? Right? I do n't want to do that, I wrote a five instead of a three. All the things that I am doing now, I should go back and do it again. Just for the part of five instead of three. Right? So what do we do? Let's integrate the web book end point here. What this will do is the moment you make this change. Never mind, you did it. It's a good thing. Isn't it? I changed it. And obviously you will git push the file. You will add commit and then push, right? So the moment you push from your VS code editor, then with the help of the qualification in your VPS, this web make will ensure that the changes happened here will happen there as well on the website where you have hosted it. Ok? So what else we need is the moment, meaning whatever change happens, it will change there. For now, just understand this much. That will get your work done. Ok? So what do I do? I click on Register Now. Now here you can add whatever you have. So you can see that guys, I have authenticated it here through my pass key. This is the name of my GH app. So let me create one here. Now my work is done. Now, I have integrated what is here very easily. Now install repository. This means that now look, should I install all the repos that I have in Cool Coolfi? No, I don't have to do everything. The moment I feel that this particular project is mine. Now to host. I will do just that. Ok? So I will click on Only Select a Repo. And let's go here and I'm going to set it to one second, all right by default to the revo. I click on the certificate. You can see this is my codifier shirt which has arrived. Now here you can see I am installed. So I click on install. How easy is it to add any project with the help of Coolfy and it has been added, right? So mine has been added, so this is the URI, this is the API URI, Users Port, App ID, Installation Client ID, Secret, Web Secret, Meta data, Environment Name, everything is correct, let me save it, I have saved it, what guys, okay, now I will come back to my project, okay, I know that I have a certificate, so I will come to this, I already have a post grad database here. It's a good thing. I'll go back to Resources after that to what's new. Now let's see how easy it becomes here. I'm going to select this back. I go to the private repository here. Look, by default it is here now. Because out of so many repos, I installed one repo which was mine. Now I will select this. Yes, this is the getup I want. I will click on Load Repository. By saying this, which branch does one belong to? You can see. If you go to my official one, it's a private one. Ok ? But if you see, this is master, right? Now your doubt is cleared that yes brother there is a master, what is there in the build pack from let's, right now I have Next JS, Post Grace, it is a kind of dynamic, you can call it, or Manstak, which is not Manstak but is a kind of dynamic world, so there I will need Next pack from let's, if you had made a portfolio website with the help of simple HTML, CSS or JavaScript, then you would have selected static, even bootstrap also comes under static and if you had made something related to Docker, then you would have selected Docker, right now we will use the nexp pack which was made by the railways. And this is me and what is its function? Its job is to check whatever project you have created and it will itself see how it should be deployed. We don't have to do anything. They have provided port 3000. Ok? Not a static website. So I won't tick anything. I am clicking on continue. And this is it. My work is done. This is my name. Whatever this nexp pack is. And this is the domain. This is the domain where I can go and do what with my website ? I can get it. I can see the meaning. Like this is codiffi.com, if I write kdifi.com, my website will appear. But what the KI people have done is that whoever wants to verify my certificate of our IT company will have to visit this particular domain to verify whether their certificate is genuine or not. But obviously this is a domain that no one is going to miss. C This looks more like a code than a domain. Right? So what should we do? I will remove this. I will write here cert dot i, right now I am doing this just to show you guys. But I will add it again on the codifier. cert dot a code vip.com because I have connected it. So I will keep this here and save it for now. I saved this. Ok ? Allright. Ok. I changed the domain. Now at least you can go for this. scodw nepal.com you can go to this. Ok? Docker is not needed. Now remember one thing here, everything is fine. I told you that you don't have to do anything. I mean there is no need to do anything. Qualifies automatically. Here, just in this build command, you have to make sure of make because we are using next js. That too in the name of post question I mean to use post question we are using a drizzle vam. Ok? So there is some build command. And in Drizzle we need to migrate. So first of all I would like to tell you that I have already written this part here and it varies from project to project. I am writing this DB Migrate. You don’t need to write. Ok? You can write a blank npm run build or you can write burn run build. Your work will be done. So the work of connect to getup has been done. nexpex is done. Look, you can see the deployment here. We have kept this. And it's optional. This part depends on you. Ok ? It's not that you have to do this. So that's it, burn run DB huffn migrate m person, which means this has to be run. Along with this burn run build also has to be done. Ok? You have to do it this way. So guys once you write this command because we need to do this. Obviously we need to migrate to diesel, right? And obviously the project had to be built. Burn, run and then build. Whatever command there is, write it here. That npm run start and all that thing, you don't have to do anything. You have to write the command for empty build here. Ok? And if migrate remains then again it does project to project variation. Please make sure. Allright. Now all this has happened. Just one last step left. And that is environment variable. Your dot nb file. The ENB file holds your secrets. Connections to your URL remain. So see how easy that is. Environment variables. Isn't it? I told you that liking has become so easy. Here we have this ad option. Now obviously how do we know what is there in our project? No one we have this example. Here you can see this is it. So paste the database URL and I told you in the beginning, guys, remember this database URL, when I installed Post Base, paste the instance URL here. So guys, you can see that instance, I have pasted it here. So one thing I did was done. So guys I do one thing in the same way. Are these three of mine okay? Ok? You can see here JWT Secret Server API URL and then node environment these three, I will quickly add these three also. Now this is the last one left, the node environment. Now look, guys, your deployment will obviously be there. But here I will have to write production. Isn't it? Because we are using production. what is here? There is development here. Develop, deploy, not development. Here I have production because I am using it for production. now right? So I had to do production. And this is it. So you can see in this way that my work is done for the URL of these four databases, JWT secret node environment and secret API URL. And this is a preview of the rest, so don't worry. Again it is saved somewhere here. No, there is no option to save anywhere. Ok? Please come in advance. All this has already happened. Ok? Let me go back to the configuration. Guys, this build command that we had here is gone. npm run db I'll write it back once. I probably forgot to click on save. And burn and yes by the way you may have used npm but I am using burn. That's why I am writing burn here. Ok? If you have used npm then please write npm run build. You can at least do this much. Right? And look here, there is a save option. Ok? So I clicked on save. We have added the environment variable. Now look here, there is an option of deploy but guys, I guess, they deployed it automatically. Can I go to the locks once and see if they can load containers, okay? It is happening. Allright. Ok. Let me do one thing, I will redeploy it. Here we go. So it is on q. Allright. Now this is progress. Ok? So that's it guys finished. That's all that had to be done. So guys our work is done. Now I am telling you that if you want to see it further then click on this particular place. So here I will tell you everything. So guys, let me give you a quick recap. We did nothing. Logged into the VPS using a root user. This is important. Installed it yesterday. Once you install it, you will get a link. On clicking, it opens the Coolfi registration page. Guys, as soon as we register, we get a dashboard like this. But guys, we were not able to understand the URL that was at the top. That's why we go to settings and change the domain so that we can access this dashboard of Qualify through that domain. Once that is done then it is very easy. I have to go for a simple project. First of all I told you that whatever be the project, you should create the database as per the guidelines. So we copied the instance URL created post sequel. Then we went back to the project, the same project. Guys, after going there, what did we do first to whatever that URL was of nexjs through get? Installed it. Then later we went back there and loaded it. Then I showed you how to add some build commands to it. Then we added the environment variables. And as normal, we run it in our base code editor. Now this run is happening with us here also. You can see it's over. And boom guys. Now you can see that the success option has come. I mean the pop up has come. Application Status Updated Finished. Now we don't have to do anything. What I created was cert dot a code vip.com and 3 2 1 and and guys this is a scam. It is showing no available server but this should not happen because there was nothing to do here. So guys you come here to general and back to your project. Ok? Pay attention to the domain. Cert Dot Code V Nap. Hey friend, I accidentally missed it here like this. What does it mean? Now, will it work without S ? Oh my God. Never mind, I will tell you. Well, this is good. It was good for you people because you had doubts in your mind. Brother, what should I do if something goes wrong ? Look, there is nothing to do. I obviously want this here. Ok ? I am adding S. Ok? And also it is telling end non ww also. No problem. here I go. Ok? Ok? I added S. What do we have? We have a save option. I am saving this. Now notice one thing. I got a pop up here. Let me zoom in a little. What he is saying is that this latest configuration has not been applied. Please restart and redeploy to apply the new configuration. So, let's do one thing. Let me redial this back. Ok? You can also restart if you want. But what I feel is that all the necessary things , installation, migration and all those things have already been done. Isn't it? Now it won't take that much time. Now it will not take that much time because it knows that only one thing would have changed. He will just update it quickly. So guys, you can see that this particular part of neck JS creating and optimizing production build is visible to you now, believe me, earlier when I applied read, it took me a lot of time. Not much means not that much butt was hit. Isn't it? But now this particular part came to me within about 5 seconds or 6 seconds. So this means that when you go to redeploy, all those things do not happen again. What has happened has happened. Now, whatever small changes you might have made, due to which any changes might be happening in real life, it is just updating them now. Alright guys so you can see this is showing you the finish. And it is showing running. So now let me do one thing. If I refresh this and boom guys see this is what I wanted. Look https, I don't know if you can see it or not, but let me show you for a second here, okay, see this https, and friend this is it. That's it for today for this video. I hope you would have liked the video very much. I did not skip anything anywhere from start till complete, I showed you in this video today how you can host any application in Qualify. So guys, that's it for today for this video. And if anyone has any doubt, please do tell me by commenting. And I will also share the notes with you in the link which is below, in the description and comment section. And don’t forget to add coupon code from Guys Thapa in Hosting. I will give you the link for this also in the description and comment section below. You can buy it only by clicking there. So that you don't have to go anywhere else. Simply by clicking on a link your work will be done. Ok? So guys I would like to tell you that I have uploaded many videos on BPPs through the engine x server through caddy. So whichever you like, now you have multiple options to host in BPPS. You can adopt and install the style you like. Ok? And yes one more thing guys, this is which I told you how you can host it here and today which I told you about the same application through caddy I mean qualify, please do tell me by commenting which one you liked the most, like according to me it became very easy and this part which we had done is a hard code developer, brother I will do it myself whatever I have to do, if I do n't want it then I will just not install it, although this is also doing the same but whatever it is it is totally up to you, so guys that is all for this video today, please if you like the video then like it lots of times with friends and the next target is 8 lakh rupees. If you have n't subscribed yet, please do. I will see you in tomorrow's video. Till then guys thank you so much. Take care. [music]