DEV Community

ADITYA OKKE SUGIARSO
ADITYA OKKE SUGIARSO

Posted on

Custom Local Domains on Windows with Hosts File and Caddy

#caddy #devops #dns #networking

target:

By the end of this tutorial you will be able to open https://myapp.local in your browser and see an app that is running on your own computer, instead of http://localhost:5173.

stack:

  • Windows hosts file
  • Caddy

ref:

steps:

Step 1. Open Notepad as Administrator
The hosts file is a protected system file, so a normal editor cannot save it. You need Administrator rights.

open as admin

Step 2. Open the hosts file
In Notepad, click File -> Open.
open host file

In the File name box at the bottom, paste this exact path and press Enter:
C:\Windows\System32\drivers\etc\hosts
explorer path

If the file list looks empty, change the dropdown in the bottom-right from Text Documents (*.txt) to All Files (.). The file is named just hosts with no .txt ending, so Notepad hides it by default.
choose file type

choose hosts file and click open
choose hosts file

Step 3. Add your desired DNS
for this tutorial we will use this dns as an example

127.0.0.1   myapp.local
127.0.0.1   api.myapp.local
Enter fullscreen mode Exit fullscreen mode

Caddy makes local certificates automatically for names ending in .local, .localhost and .internal

hosts file content

then press Ctrl + S to save the file

  • If it saves silently, you're done with this step.
  • If you get an error like "Access is denied", Notepad wasn't opened as Administrator -> go back to Step 1.

Step 4. Check if DNS binded correctly

  • open cmd
  • to clear the DNS cache, run: 
ipconfig /flushdns
Enter fullscreen mode Exit fullscreen mode
  • To check that DNS resolves the name, run: 
ping myapp.local
Enter fullscreen mode Exit fullscreen mode

If you see replies from 127.0.0.1, Windows now sends myapp.local to your own computer.
cmd check binded dns

Step 5. Install caddy

  • Open PowerShell (Start -> type powershell -> Enter) and run: 
winget install CaddyServer.Caddy
Enter fullscreen mode Exit fullscreen mode

When it finishes, then check by using:

caddy version
Enter fullscreen mode Exit fullscreen mode

install caddy

Prefer a download? Get caddy_windows_amd64.exe, rename it to caddy.exe, and put it in a folder such as C:\caddy. Then run the commands below from inside that folder.
Step 6. Create the Caddyfile

  • Create a folder, for example C:\caddy
  • Open normal Notepad (no administrator needed this time)
  • Paste this, each pointing to the port your app runs on: because in localhost, my frontend run on port 5173 and my backend run on port 3000, so adjust the port according to your own frontend and backend 
myapp.local {
    reverse_proxy localhost:5173
}

api.myapp.local {
    reverse_proxy localhost:3000
}
Enter fullscreen mode Exit fullscreen mode

Caddyfile content

  • File -> Save As, go to C:\caddy, and in the File name box type the name with quotes: "Caddyfile". The quotes stop Notepad from adding .txt to the end.

Caddyfile content

save as Caddyfile

Caddyfile

Step 7. Start caddy
In PowerShell, go to the folder and run Caddy:

cd C:\caddy
caddy run
Enter fullscreen mode Exit fullscreen mode

to start on background, run this:

cd C:\caddy
caddy start
Enter fullscreen mode Exit fullscreen mode

to stop caddy background process, use caddy stop

You should see: "Successfully started Caddy (pid 1234) - Caddy is running in the background"

Two pop-ups may appear the first time only:

  • A security warning asking to install a certificate ("Do you want to install this certificate?") -> click Yes. This is Caddy's own local certificate that makes the padlock work; it is only trusted on your PC
  • Windows Firewall asking to allow Caddy -> click Allow or Cancel; either way it works from your own computer

Step 8. Open it in the browser
Make sure your app is running (e.g. npm run dev), then open:

https://myapp.local
Enter fullscreen mode Exit fullscreen mode

frontend

Note: caddy start says it's running in the background, but on Windows it stays tied to the window you launched it from. Close that window and Caddy stops.

Top comments (0)