How to Deploy a Web App to a VPS (2026)

Hey, I'm Caleb and today I'll show you step by step how to deploy a web app to a VPS. If you want to take something you've built like a side project, an [clears throat] API, or any kind of web app and get it running live online, this video will walk you through it from start to finish. And the best part is this tutorial will work for any kind of web app, whether it's built with Node.js, Python, or any other framework. To get started, first we'll set up your VPS using a ready-made template that already includes everything you need to deploy apps. Then we'll connect it to a domain and secure it so it's safe and accessible online. After that, I'll show you how to deploy a real web app step by step, and by the end, you'll have your own project running live on your VPS that's 100% ready to go. So, what's the first step? We'll need to start by choosing a VPS plan. I mentioned earlier that we can use a ready-made template that includes everything you'll need to deploy apps. And to get access to that, I'll be using Hostinger. Hostinger makes it really easy to get started. The plans are affordable, the performance and storage are great for web apps, and the template we'll be using comes preconfigured with everything you need to deploy right away. And right now you can get an extra 10% off any hosting or VPS plan. To get that 10% discount, go to the link right here at the bottom of the screen or just scroll down to the video description and click on the first link you find there. That's our special partner link. It'll make sure you're getting the best deal available. Once you go to that link, you'll be brought to this page right here. Let's click on claim deal. And that's going to bring us down to the VPS plan options. And here I recommend going with the KVM2 plan. This is going to include two virtual CPUs, 8 GB of RAM, 100 GB of NVME disc space, and 8 TB of bandwidth. This is going to be more than enough for most web apps. And you can always upgrade or downgrade your plan later on if you need to. For this tutorial, I'll be going with the KVM2 plan. So, here I'll click on choose plan. And from here, you'll be brought to the checkout page. And let's start by choosing your plan period. By default, it'll be set to 24 months, which gives you the best savings and includes a free domain. You can also choose the 12-month plan if you'd like to. This will still get you a lot of savings and include that free domain. And for this video, I'll be going with the 12-month plan. Scrolling down, you can also toggle on daily auto backups if you'd like to. And you can also select your server location. By default, Hostinger will choose the server that's closest to you and has the best latency. So, I'll just leave this as default for now. And lastly, let's scroll down and select our operating system. Start by clicking on OS with panel. and we'll find the docloy template. This is one of the biggest advantages of using Hostinger. They include all of these ready-made templates that come preconfigured with everything that you need to deploy web apps. So, I'll click into Doc and this Ubuntu and docploy setup will give you Docker, Docker Compose, and Doc already installed. So, that way you can start deploying web apps right away without running manual commands or installing anything yourself. With this selected, I'll click on confirm. And now we have the Doc Ploy template selected. Now, let's scroll back up to the top and we'll make sure that the discount code here is applied. You'll get this automatically by using the first link in the video description. And as you can see here, this will take 10% off your plan. Now, let's go down and click on continue. Next, you'll need to create your Hostinger account if you don't already have one. Just enter your email address here and then create a password. Then, click on register to continue. Then, on this page here, you'll need to enter your billing address and your payment information. I'll go ahead and do that now. Now, I filled out both my billing information and my payment information. From here, I'll click on submit payment. And with that payment submitted, I'll click on get started. Now, we'll need to create a root password. This is the main password that you'll use to log into your VPS and manage everything on it. You can think of it as your server's master key, so make sure it's something strong and it's something that you'll remember. Here you'll also see an option to add an SSH key, which is another way to securely log in without typing in a password each time. This is optional, and for this video, I'll just stick with the root password. Here, I'll fill in my root password. And once that's filled out, I'll go down and click on next. Here you'll see an option to add in a malware scanner. This is free, but for this video, I'm going to disable this. This will make sure we get a nice and clean VPS install with no issues. With that disabled, I'll click on finish setup. And now our VPS is going to be set up for us. This can take a few minutes to complete. So I'll fast forward to whenever it's done. Our VPS is now set up. Here you'll see your SSH access. This is the connection command that you can copy and paste into a terminal to access your server directly. Hostinger also gives you a built-in browser terminal, so you don't have to install anything extra to connect. If you chose the 12-month plan, you'll also see an option here to claim a free domain. But we'll come back to this a little bit later. For now, let's click on managevps to open up the dashboard. Now, here you are in the HostingerVPS dashboard. The first thing that we'll want to do here is take note of our IP address. You can always find it right here in your dashboard, but it is a good idea to write it down. We're going to need this later when we connect our domain. Next, let's find the browser terminal in the top right here. Hostinger gives you a built-in terminal right inside your web browser. It's simply a command window where you can talk directly to your server. Let's click on terminal here to open it up. And this is what the view looks like inside of your browser terminal. Before we move on, let's make sure that everything on our server is up to date. We're going to want to run a very simple command here. First, type in pseudo apt update. Then type in two and symbols. Then we'll type pseudoapp upgrade dashy. You can also find this command listed in the video description. From here, press enter or return on your keyboard. And it's going to install and update our VPS. We'll give this a second to install and update everything. And now everything has been updated and installed and we are officially running on the latest version. Once this is done, you can simply close out of the browser terminal tab. And we'll go back to our HostingerVPS dashboard. Now, the next thing we need to do is install Docy. And since we used the Docy template, everything we need is already installed and running for us in the background. As you can see right here, we have Doc available already. All we have to do is go to the top right here and click on manage panel. And this is going to open up the Doc Ploy setup page. This is where we'll create our admin account. Start by entering a name. Then enter your email address and create a password. Then go to the bottom here and click on register. Once you register, you'll be brought here to your Doc Ploy admin panel. Here on the home screen, you'll see your projects listed here along with a sidebar for other tools and then your settings at the bottom. Depending on when you're watching this video, you may also have an update available message here at the bottom. You'll want to install this right away to make sure everything on your VPS is running smoothly. So, I'll click on update available. You'll see the version number here at the top. Let's go to the bottom and click on update server. Then click on confirm. Now, Doc Pulley will automatically install the latest version and restart itself whenever it's done. And with that done, we have now installed the latest version of Docpo. And now that we've installed the update, you'll notice something important. At the top of the page here, it says not secure. That means we're currently accessing the Doc admin panel through our server's IP address instead of a trusted domain. And when a site isn't secure, any information you enter, like your login details, could potentially be exposed to others on the network. So before we start deploying web apps, we'll want to fix this. We'll do this by connecting the admin panel to our own domain and installing a security certificate. This will let us access the docloy admin panel through a normal website link instead of just the raw IP address. And we'll keep the connection encrypted so your data and credentials stay private. To get started, let's go to settings in the bottom left corner. Then click on web server. And over here is where we can connect our domain and install our security certificate. But before we connect the domain here, we'll first need to purchase one or set one up. So let's head back to the Hostinger dashboard to get our domain configured. Then we'll return here to docloy to finish securing our admin panel. Now I'm going to go back to my HostingerVPS dashboard. I'm going to go to the left hand side here and find domains and click into this here. Click on domain portfolio. Then I'll scroll down and find the option to claim your free domain. Here I'll click on claim domain. and I'll enter my domain name here. I'll go for my VPS demo. Click on check availability. And this domain is available and free to use. And if you already have a domain from another provider, you can follow along using that. The steps will look slightly different, but the overall process is the same. For this video, I'm going to be getting my domain directly through Hostinger, so everything for my VPS stays nice and organized in one place. So, I'll click on claim domain. And now that domain will be registered to my account. Now before we move on, we'll want to quickly check our email inbox and verify our email address. In your email inbox, you'll get an email from Hostinger that looks something like this. All you have to do is click on verify email. Then I'll click confirm. And now our domain is ready to be used. So I'll click on continue to home. Then we'll go back to domains in the top left. And as you can see, my domain name is here and it's now active. The next thing I'll do is click on manage. Then on the lefth hand side, I'll open up the DNS settings. Now let's scroll down here to our DNS records. And we're going to start by deleting two default records here. The first one is the one at the very top with the type labeled CNAME. Let's go ahead and delete this record here. Then I'll scroll all the way down to the bottom and find this A record here. We'll go ahead and delete this record as well. Doing this will make sure that we can start with a completely clean slate. This will make sure that there aren't any conflicts when we connect our domain to the VPS. Now let's scroll up to add in a few new records. In total, we're going to add in three records and all of them are going to point to our VPS IP address. If you remember a little bit earlier, I mentioned to write down your VPS IP address. If you need to find your VPS IP address again, just go to the lefth hand side here and click on VPS and then navigate back to the DNS records here. For the first record, we'll want to make sure that the type is set to a. The name is just going to be the at@ symbol here. And then for points to, we want to set this to our VPS IP address. I'll copy and paste mine in here. And then for TTL, I'm going to set this to 300. That just means that this DNS record is going to update a little bit faster. With that done, I'll click on add record. And that record has been created successfully. Now, we'll add in our second record. Once again, we'll make sure the type is set to A. For the name, I'm going to change this to www. And this is just going to make sure that when someone types in your domain name, it's going to load the site correctly. We'll make sure once again that it points to our VPS IP address. And I'll click on add record. Again, you may get this popup here. Just click on confirm. Now, for our next record, we're going to change the name to admin. We're going to use this subdomain to point directly to our Doc Ploy admin control panel. We'll keep all of the other settings the same. Go back over to the right hand side here. Click on add record and then confirm. Now I'm going to add one last record for analytics. So I'll change the name from admin to analytics. We're going to use this later for our analytics dashboard which will work just like our docloy admin panel. So I'll click on add record and confirm. And now with the DNS records configured, let's switch back over to the docloy admin control panel and connect our domain. Then I'll go ahead and set the domain here. In my case, this will be admin.vpsdemo.cloud. But in your case, use the domain name you chose when setting up your records. For example, that would be admin.youdommain.com or whatever subdomain you decided to go with. Next, enter your email address here. This can be any email address that you want. For the provider, we'll select let's encrypt. And with all this filled out, I'll go to the bottom right here and click on save. And now we have assigned a domain name to our docloy admin panel. So now if I visit admin.mmyvpsdemo.cloud which I'll do by copying this creating a new tab. Copy and paste in my domain name. Press enter. And now here I have my docloy admin control panel and I'm able to log in here. And if I go to the top left and I click in here the connection is now secure. So, I'll go ahead and log in here using my information from earlier. Now, I'm logged back in and my Docplay admin panel is fully secure. With that finished, let's start getting our first web app ready to deploy. Before we go ahead and create our project, I want to mention that throughout this video, I'll be deploying a very simple demo web app I built purely for testing purposes. If you'd like to follow along step by step and deploy the exact same web app, I've added a link in the video description to the GitHub repository. When you click on that link, you'll be brought to this GitHub repository page here. Here you can click on the green use this template button. Then click on create a new repository. Then you can give it any name that you'd like. That's going to make your own copy of the web app. So you can connect it to doc ploy and deploy it the same way I'll be doing in this video. If you already have your own web app that you'd like to deploy, you can follow along with that instead. The process is the exact same. So, let's go back to docloy and we'll click on create project. We'll start by giving our project a name. I'll name this VPS web app demo. And you can also add a description here if you'd like to, but I'm just going to leave mine blank for now. From here, click on create. And you've now created your first project. So, we've created our project and it's now ready. But what exactly is a project? Well, in docloy, your project acts as a container that holds everything related to your web app. So, for example, here I can create different services inside of my project. If I click on create service here, I can create an application, a database, use docker compose, templates, and AI assistance. In this video, I'll be using three of these. We'll start by creating an application, which will let us deploy our web app. Then we'll create a database and then we'll use a template to set up analytics tracking. For now, let's start by creating our application. Click on application here. And once again, we'll start by giving it a name. I'll just name this demo. And I'll click on create. And here you'll see the application appear within our project. Let's go ahead and click into this here. And this is going to open up our demo application and show us all of the settings that we need. Now it's time to connect our GitHub repository and deploy the web app. Let's scroll down here to the providers. And by default, you'll have GitHub selected, which is what we're going to be using for this video. You'll also see a few different options here as well. In order to deploy using GitHub, we'll have to configure our account first. To do this, we'll have to go to our settings. With GitHub selected, click on settings here, then click on the GitHub button. If you're part of an organization, you can toggle this on here. I'm going to leave this turned off for now. From here, click on create GitHub app. And I'm already signed into my GitHub account, so I'll just have to verify using my email address. Click on verify via email or log into your GitHub account here. And I'll have a verification code sent to my email address. Copy and paste the verification code from that email and paste it in here. Then click on verify. And here you'll need to give your GitHub app a name. And by default, Doc Ploy will autogenerate one for you here. And it's perfectly fine to leave this as is. This name is mainly used to identify the connection between Doc Ploy and your GitHub account. If you'd like, you can rename this to something cleaner, but I'll just leave this as is. Click on create GitHub app, and you'll see your GitHub appear here. You'll notice this button here that says action required. To finalize the connection between Doc Ploy and your GitHub app, click on this button here. And now we're on the install and authorize screen for the GitHub app that we just created. Here, GitHub is asking what level of access you want to give Doc Ploy. You can either allow it to have access to all the repositories on your account or just select repositories. To keep things simple and secure, I'm only giving it access to a single repository. So, I'll click on only select repositories. I'll select my repository here. I'll make sure I'm choosing the deploy web app tutorial repository. I'll select this here. Then I'll scroll down and click on install and authorize. Now docloy will be able to pull your project's code in from GitHub so it can automatically build and deploy it on your VPS. From here, let's go back to projects on the lefth hand side. Click into our project. Click into our application service. And now when we scroll down, we can select our GitHub account. Click on this here to select your GitHub account. I'll select mine here. Then under repository, select the deploy web app tutorial. Or if you're deploying your own web app, you'll see that appear here. So select your repository that you want. Then go down and underneath branch, you'll want to select the main branch. I'll select this here. Then we'll scroll down all the way to the bottom here and we'll select our build type. Here you'll want to make sure that Nyx packs is selected. Nix packs is the easiest option for beginners because it automatically detects what kind of project you're deploying. Whether it's a NodeJS app, a Python project, or even a simple static website, Nyxpax will install everything that it needs to run successfully. So, with Nyx pack selected, I'll go down and click on save. And then I'll go to the top here. And with my GitHub account and repository selected, I'll click on save again. With that done, let's scroll back up to the top here. And now we can deploy our web app. First, click on deploy. Then, click on confirm. And you'll see that the deployment is now running. You can click on view here to see the logs. Now, Doc Ploy is installing your dependencies, building your app, and starting it automatically. You can follow the progress right here. And once you get this success message here that says Docker deployed with the green check mark, that means that everything worked properly and that the app is now live. Next, we'll need to set up a domain so that we can actually access the app on the internet. So, let's close out of this tab here. Click into domains at the top and click on add domain. Here you can enter your domain or you can generate a domain using this button here. We set up our DNS records earlier. So I'll type in my domain here. That's going to be myvpsdemo.cloud. Let's scroll down to the bottom here and toggle on our security certificate. For the provider, we'll do let's encrypt again. And before you click on create, let's quickly talk about the container port. Right now, it's currently set to the default value of 3000, which works perfectly for me since I'm deploying a NodeJS app. Just keep in mind that the port number may be different depending on the type of application you're running. If you're using NodeJS, you can leave this set to 3000 since that's the most common configuration. With that done, let's go down and click on create. And now we've linked our web app to a domain. To make sure that everything is working properly with our DNS settings, click on validate DNS. This shows that our DNS settings are valid and that everything is working properly. To view our demo web app, click on the domain here. And if everything went smoothly, your web app should load right here within your browser. This demo web app that I created acts as our test environment. Is designed to confirm that everything on our VPS is working the way it should. and make sure that the front end, the API routes, and the server itself are all communicating correctly. At the top of the page, you'll see two different buttons. Let's start with fetch data. When we click it, it sends a request to our server to grab some live information. In this case, it's returning the current server time. If that time appears instantly and correctly, that means your VPS is online, your app is responding to requests, and your server route is working perfectly. Next, let's test write data. Each time we press it, it sends a small request to the server to store an event and updates the counter on the screen. Right now, this is using temporary in-memory storage. So, if we redeploy or restart, the number will reset. But this test does confirm that data flow is working end to end. And finally, if we go down to the metric section here, you'll notice a line that says DB false. That tells us the app isn't connected to a real database yet, which means anything we store is temporary and will reset if the app restarts. To fix that, we'll connect a database. So that way our app can store data permanently. And after we connect our database, we'll come back to this page here and make sure that this value is set to true. So let's go ahead and connect the database. Let's go back up to the top here and go back to docloy. Scroll up and go to projects. Click back into your project here. Click on create service and click on database. From here we can choose what database we want to use. And for this video I'll be going with Postgress. Doc pulley does support other databases but I do like using Postgress the most. It integrates super smoothly for most web apps and it's very reliable. For the name here I'm going to name this just database. You can add a description if you'd like to. And down here we'll need to fill out some information. I'll start by giving the database a name. I'll just name this app DB. Then you'll set up your database username. I'll name this app user. And then set up a database password. In your case, you can name these whatever you want. Just make sure to use a strong password here if you're working on a real project. These credentials are what your web app will use later to connect securely to the database. And once that's all filled out, go to the bottom right and click on create. Now let's open up our database here. Now the first thing we'll do here is deploy our database. So that way it's up and running. So click on deploy and confirm. Now your database is going to be deployed. You can follow along with the logs here to see the progress. And at the bottom you'll get this green success message that says deployment completed successfully. Let's go ahead and close out of this in the top right. And if you see this green circle here, that means the database is now active. Now, let's scroll down to the internal credentials area here. Then find the internal connection URL. Click on the copy button here to copy this. And we'll be copying this because this is the address that your app will be using to talk to your database. And we'll connect this to our app in just a moment. Now, let's switch back over to our application. We'll scroll up to the top, click into projects, click back into our project here, then click into our web app here. Next, you'll open up the environment tab. Then, we'll click on this eyeball button here. We'll click into the top. And here you'll want to type database URL equals and then paste that connection URL here. This will tell docloy exactly where the database is and how to connect to it. With that done, scroll down and click on save. Now to make sure that the changes take place, let's go up to the general tab here. Then click on reload and confirm. You'll see that the application was reloaded successfully. Now I'll go back to my web app here by opening up the tab and I'm going to refresh the page. You'll see at the bottom here DB has switched from false to true. That means we now have a live database. Now any of the data that's written on this web app will be stored permanently. Now, let's take things one step further and add analytics tracking so we can actually see what's happening when people visit our web app. Let's go back to docloy at the top here by opening up our tab. Let's go back to projects. Open up our project here. Go to the top right and click on create service. Go down and find template. And we'll search for a template here. Go ahead and type in umami. You'll be looking for this here. Then go down and click on create. Click on confirm and we'll click into Amami here. Now, the first thing you'll do here is click on deploy to start it up just like we did with our database. So, click on deploy, click on confirm, and we can view the logs just like we did before to see how everything is doing. Give this a moment to load in. And here you can see everything was done successfully. Let's close out of the logs here. Then you'll want to go to the domains tab here. And here you'll see that Doc Ploy actually autogenerates a domain here for Umami. But since we already set up our own analytics tracking subdomain earlier, we're going to use that instead. So let's click on edit. And here I'll type in analytics.mmyvpsdemo.cloud. Next, scroll down. Find your security certificate here. We'll toggle this on. Make sure that let's encrypt is selected and click on update. Now, this will take a few minutes for the changes to reflect. But once that's done, umami will be running securely here at my analytics tracking subdomain and then it'll be ready to link to our web app here. Let's click on validate DNS to make sure that everything is working properly. And it says DNS valid, which means that everything is good to go. So I'll click on the domain here to access the Omi dashboard. And here you'll have to log in using the default credentials. That's going to be admin for the username. And then for the password here, you'll type in Umami and you're able to change out the password in just a moment. Let's click login here. And now we're logged into our Umami dashboard. To change your password, go to the top right and click on this icon here. Click on profile. And then you can click on change password. I'm going to go ahead and skip this step for now. From here, we need to add our website. Let's go to the top and click on settings. Click on add website. Start by giving it a name. I'll just name this VPS demo. And then here, go ahead and set your domain. In my case, this is myvpdemo.cloud. With that info filled in, I'll click on save. Now, we'll need to copy the tracking code for this website. You can find the tracking code by clicking on edit next to the website. go to the top and click on tracking code. Then I'm going to highlight this here and then copy it. Now the next thing I need to do is switch over to your GitHub repository. I'll open up my GitHub tab here. And from my GitHub repositories main page, I'm going to add the analytics tracking into the website. The tracking code will need to go inside the pages head section. That's the part of an HTML page that loads settings and scripts before the content shows. First, I'll need to open the file that controls my main page. In this project, that's located in the public folder and then inside of index.html. Depending on the web app that you're building, this may be slightly different. Common file types where you can find the head section include index.html, app.html, or layout.html. In my case, I'll open it up right here in index.html. And you'll find the head section right here at the top. It starts on line three and ends on line 18. And you'll see here there's some placeholder text that tells us that we need to paste in the Umami tracking link right here. So, let's go ahead and edit the code here within GitHub. To edit the code, go to the top right and click on this pencil icon. Then I'll highlight the placeholder text here and simply paste in that tracking link. You'll see that populate right here. With that done, I'll go to the top right and click on commit changes. I'll make sure it's committed directly to the main branch and click on commit changes again. Now that I've committed this change, doc is actually going to detect the update automatically and redeploy to make sure everything's working. I'm going to go back to Omi. Click on the tab here at the top. Then I'll click on view. Now I'm going to go back over to my web app and I'm just going to simply refresh the page. Now if we go back to Amami, we'll refresh the page here again. We'll see now that it's tracking page views successfully. And now with that done, you've deployed a web app, added a database, and added analytics tracking to your web app. Now, earlier just a moment ago, whenever I added the analytics tracking code and committed the changes on GitHub, I mentioned that Doc Ploy automatically redeployed my web app without me needing to do anything. Now, let me quickly show you how to make sure that that's working on your end, too. So, I'm going to go back over to Doc Ploy here, go back to my project, click into my project, and open up my web app here. Right here, you'll see an option for auto deploy. Make sure that this is turned on. Now, whenever you make any changes to your code on GitHub and you commit the changes, your web app on Doc will automatically redeploy with the new code. And if I click on deployments here, you can actually see all the different deployments that have been done throughout this video. Docloy also has preview deployments which lets you test changes before pushing them live. I'll go ahead and click into preview deployments here. You can set this up by clicking on configure here. You'll start by setting your wildcard domain. This is what Doc Ploy uses to generate unique preview links so you can actually see those changes in action before they go live. Here you can limit how many previews stay active at a time. And if you want to load those securely with a security certificate, then to enable preview deployments, you'll turn on this toggle right here. And now preview deployments have been enabled. With that enabled, every time you create a pull request or test an update, Doc gives you a quick preview link to review it safely without touching your main app. And this can be super helpful to keep your web app and VPS safe. You can also turn on automatic backups inside of your hosting or VPS panel. Let's navigate back to our hosting or VPS panel here at the top. Click on backups and monitoring and then snapshots and backups. Go down to manage backup schedule and make sure it's set to weekly. You can go with the daily option, but that is a paid upgrade. I'll make sure weekly is selected and click on save. And now weekly backups have been turned on. Now I'll switch back over to my doc ploy tab here at the top. Navigate back to projects and open my project one more time. And here we can see all three of the different services that we created. Now my demo web app database and analytics tracking are all working together within this single project. And if you want to take things a bit further later on, docploy also supports running multiple projects or even connecting to other VPS servers so you can scale up your setup without changing your tools. And make sure you don't forget to use the first link in this video's description to save an extra 10% off your hosting or VPS plan. I really hope that this video helped you out and helped you deploy your first web app successfully. If you run into any issues or have any questions, make sure you leave a comment on this video. I'll do my best to help you out. Thank you for watching this video and I'll see you in the next one.