DEV Community: B Kanhu Charan

Part 1 - Vercel to VPS

B Kanhu Charan — Sun, 18 Jan 2026 18:19:20 +0000

Vercel, it feels like magic.

You push to Git, and suddenly your site is live and globally available. No servers. No configs. No stress.

But at some point, you decided to move out of Vercel. Not because Vercel is bad or more pricey, but because production means more than “it works”.

But first, why move from a managed platform to a VPS?

Managed platforms like Vercel and Netlify manage all the behind infra setup, so developers can ship faster, but a VPS optimizes for control.

Here are a few things that might trigger the shift:

Cost:

Managed platforms are cheap at low traffic, and expensive at scale.

A VPS has a fixed monthly cost, regardless of traffic patterns.

Infrastructure Control:

On managed platforms:

You don’t control the server
You don’t control process lifecycles
You don’t control the network

On a VPS:

You choose how requests flow
You decide how apps restart
You define how failures are handled

All this is a fine reason. But we're moving for the love of the game. Game? yes to learn a thing or two about the production system.

So how the production setup is done in VPS?

A VPS-based production app usually follows this this request flow:

User → DNS → Nginx → Node / Next.js → PM2

User → DNS:

When a user sends a request, the first stop is DNS (Domain Name System).

DNS is responsible for:

Translates a domain name into an IP
Allows IPs to change without breaking users
Enables global routing and failover

DNS → Nginx

Once DNS resolves the domain, the request reaches your server and is handled by Nginx.

Think of Nginx as the front door of your application.

It handles:

Incoming HTTP/HTTPS traffic
TLS certificates (HTTPS)
Request routing
Rate limiting
Static asset delivery
Reverse proxying

Nginx sits in front of your app to absorb traffic, handle networking efficiently, and protect your Node process from direct exposure.

Nginx → Node / Next.js

Nginx forwards the request to your Node.js / Next.js application via a reverse proxy.

It handles:

Routing
Rendering
API logic
Data fetching
Authentication logic

Node / Next.js → PM2

Your application is managed by a process manager such as PM2.

PM2 ensures that:

Your app restarts if it crashes
Multiple instances can run
Logs are captured
Memory leaks don’t silently kill production

Without a process manager:

One crash = downtime
One uncaught exception = dead app

TL;DR:

PM2 protects Node
Nginx protects your app
DNS protects your server
The VPS hosts them all

You can also check out my article on Test-Driven Development (TDD) on my blog. Give it a read.

CSS Shorts: Lets Build a Custom Scroll bar

B Kanhu Charan — Thu, 06 Jan 2022 14:42:43 +0000

Lets face it. We as developers and designers spends hours on designing the webpage that should looks good, feels good and drive sales/convert customer. We spends hours on micro-animations. Then Why not design the scroll too. In this artile I'll show you how to do that.

The scrollbar has basically 2 components. That is scrollbar-track and scrollbar-thumb.
And we need to tweek ::-webkit-scrollbar pseudo element to modify the look of the browser's scrollbar.

Here the code that you need to design a simple scrollbar which has a width of 10px, A black trackbar and a red thumb.

::-webkit-scrollbar {
    width: 10px;
  }

  ::-webkit-scrollbar-track {
    background: #ff2b2b;
  }

  ::-webkit-scrollbar-thumb {
    background: #ff5252;
  }

That's it? Well you can use vertical-scroll::-webkit-scrollbar-track {} to design the horizontal scrollbar.
You can use other css properties background, border-radius, box-shadow and similar.

Access Localhost from Smartphone with help of VS Code and Live Server

B Kanhu Charan — Thu, 06 Jan 2022 14:09:36 +0000

Responsive Web design, well I know the developer console is a greater tool for debugging. and it gives you an option to check the responsiveness of your webpage. but checking it on a real device is always better.
So how to do it without too much hassle? The simple answer is with help of VS Code and Extensions called Live Server.

Before proceeding make sure your laptop and mobile device are connected to the same wifi.

For this, you need to install VS Code from here. And Live Server Extensions by Ritwick Dey from here.

After installing open your project folder on VS Code. You can do it by "drag-and-drop" or by navigating to "File > Open Folder".

Then open index.html and right-click on Editor, from the "Explorer Window" choose "Open with Live Server".

Remember the port, on which the live server is running.

Now open "Command Prompt" on windows and type ipconfig hit Enter. Check the IP Address.

Now open your favorite browser on your smartphone and on the address bar enter the IP Address of your Computer and port of the local server. after that file name. like http://ip_address:port/filename for example, mine would be: http://196.168.43.14:5500/index.html

Auto Deployment Of Website With Github and Hostinger

B Kanhu Charan — Thu, 25 Mar 2021 10:55:49 +0000

Creating a website? You might know the hassle of zipping the build folder, uploading via FTP to Web Server, extracting the folder. And repeating it every time whenever you made changes to the website. It's a time-consuming process. Isn't? So let's make it Automated.

Note: For Automated deployment, As webserver here, I'm using Hostinger, and Github to host my code. Let's begin.

First of all, create a public repository on Github, make it public. And upload website content to it.

After that Login to your Hostinger account. Go to the Hosting tab, Choose the website in which you want to perform the automatic deployment. Click the Manage button.

Scroll down to Advanced Section and choose Git.

Enter the details in the Create a New Repository section. what details did you ask?

Well on the Repository field put the git repository link which we created earlier. On Branch put the name of the branch. By default, it was used to be the master branch. but now Github using main as the default branch. if you not sure about your branch name open the GitHub repository and check the branch name. And the Directory field, leave it blanks. So your website will be deployed to the root folder (/public_html). Now click Create button.

On successful creation, you will able to see the information on the Manage repository.

After that Click the Auto Deployment button. Once you clicked a window will pop up on the screen. You might be wondering what it this, well we need to set up a webhook in the Github repository.

The popup windows have the webhook URL. Copy the webhook URL from that window, and open the Github repository. Go to the setting tab of the repository, Select Webhooks in the left side panel. Click on Add Webhook.

Or you can simply click the 2nd URL on that popup window which says Set up webhook on Github.

It will directly bring you to the webhook page on the GitHub repository.

Once you there, paste the webhook URL which you copied earlier into the Payload URL field on Github, and the content-type: x-www-form-urlencoded.

Select “Just the push event” in the Which events would you like to trigger this webhook? section. Select “Active”. And click Add Webhook.

That’s all folks. Automatic deployment of the website is complete.