Turn Your Laptop into a Server: Host Web Apps Locally with Coolify and Cloudflare Tunnels

Have you ever thought about using your own laptop as a server to host web apps so anyone on the internet can access them globally?

Let me introduce you to a powerful combination: Cloudflare Tunnels and Coolify. Together, these tools allow you to transform your local PC into your very own Vercel, Netlify, or Heroku.

If your internet connection allows for standard port forwarding, setting this up is a breeze. However, many Internet Service Providers (ISPs) use CGNAT (Carrier-Grade NAT). If you are behind CGNAT, your public IP and ports cannot be accessed from the outside world, even if you configure port forwarding on your router.

How to know you are behind CGNAT:

1. Look at your router's "WAN IP" or "Internet IP" in its settings.


2. Go to a site like whatsmyip.org.


3. If the two numbers are different, you are behind CGNAT.
   
   
   
   
   • Common CGNAT IP range: 100.64.0.0 to 100.127.255.255.
   
   
   
   

If you are behind CGNAT, don't worry—that's exactly where Cloudflare Tunnels come in to save the day. Additionally, while you can deploy apps using just a Cloudflare Tunnel, Coolify is the secret ingredient if you want a beautiful, Vercel-like UI to manage and deploy multiple projects effortlessly.

Let’s get started!

Step 1: Install Coolify

First, we need to install Coolify. You can do this with a single command in your terminal.

If you on your PC then go to terminal for VPS user SSH into your server and past below command

curl -fsSL https://cdn.coollabs.io/coolify/install.sh | sudo bash

Note: This script will also install Docker Engine if you don't already have it

Once the installation is complete:

• Local Machine: Open your browser and go to http://localhost:8000 to create your root user account.




• VPS Users: If you are doing this on a VPS, navigate to http://<your-public-ip>:8000.

Now you have a dashboard ready to deploy Node.js, Next.js, Python, WordPress, or any database directly on your own hardware!

Step 2: Deploy a Demo Project

Let's deploy a demo project to see how it works.

1. In Coolify, select Public Repository.


2. Paste in your repository link. For this demo, I'll use: https://github.com/vimal-verma/vimalverma.in
   


3. Select Docker in the Build Pack settings and click Continue.

Before hitting deploy, verify your Network section has the following values (this is crucial for linking a custom domain later):

Ports Exposes: 3000

Port Mappings: 3000:3000

Click Deploy. Once finished, Coolify will generate a link for your web app that looks something like this:

http://xo0gcogkks04ks4sgkk84oww.<your-public-ip>.sslip.io

Can you access this link?

If you are using a VPS or your ISP does not use CGNAT, this link will work immediately. Congratulations, you've just deployed an app on your self-hosted Vercel alternative!

You can also access your web app locally by replacing the port. For example, if your Coolify dashboard is at http://10.0.0.1:8000/, your deployed app is running at http://10.0.0.1:3000/.

if you want to link to custom domain add a DNS record type A target your public IP then update domain value in coolify dashboard save and redeploy

and Done

Step 3: Bypassing CGNAT with Cloudflare Tunnels

if that public link isn't accessible for you (likely due to CGNAT), don't worry. We are going to put your app online securely using Cloudflare Tunnels.

First, download and install cloudflared from the official Cloudflare developer docs. link

Once installed, authenticate your local machine:

cloudflared tunnel login

Create a new tunnel and give it a name:

cloudflared tunnel create <YOUR_TUNNEL_NAME>

Note: This command will output a UUID. Copy this UUID, as you will need it for the configuration.

Next, create a configuration file. Inside your ~/.cloudflared directory, create a config.yml file and add the following fields:

url: http://localhost:8000

tunnel: <Tunnel-UUID>

credentials-file: /root/.cloudflared/<Tunnel-UUID>.json

Route your DNS to your desired subdomain (ensure your main domain is already managed in your Cloudflare account):

cloudflared tunnel route dns <Tunnel-UUID or NAME> <subdomain.example.com>

Finally, run the tunnel:

cloudflared tunnel run <Tunnel-UUID or NAME>

(Tip: If you have multiple tunnels, you can specify the config path using: cloudflared tunnel --config /path/to/your/config.yml run <NAME>)

Check the tunnel

cloudflared tunnel info

Now, if you visit subdomain.example.com, it will securely serve your Coolify dashboard. You can log in remotely using the same email and password you set up locally!

Now if you want to add custom link to your subdomain then go to

Step 4: Routing Your Custom Domain to Your App

Now that the tunnel is active, you probably want to route traffic directly to your published app (running on port 3000) rather than just the Coolify dashboard.

Go to your Cloudflare Dashboard:

then Networking > Tunnels

Your local tunnel will be visible click on that and go in routes section and click on add routes then select published application

now add subdomain - www

Service URL - http://localhost:3000

and click on add route

Now go in coolify dashword go inside projects and select one then go to Configuration > general and change domains to www.example.com and save and Redeploy

And you're done! Your locally hosted application is now live and accessible to the world at www.example.com.

Happy self-hosting!