DEV Community

Locahl
Locahl

Posted on

Use a custom local domain instead of localhost:3000

#javascript #webdev #tutorial #productivity

http://localhost:3000 works. It also breaks a few real-world checks early:

  • cookies scoped to a real-looking host
  • absolute URLs in emails and webhooks
  • multi-app setups (app, api, admin)
  • OAuth redirect allowlists that hate bare localhost quirks

A local hostname like myapp.test is often cleaner.

1. Add the hostname

In /etc/hosts (macOS/Linux) or C:\Windows\System32\drivers\etc\hosts (Windows):

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

Prefer .test. It is reserved for testing. Avoid inventing fake .com names you might later need for real DNS.

Flush DNS after saving.

2. Point your app at it

Many stacks already bind 0.0.0.0 or 127.0.0.1. You only change the URL you open:

http://myapp.test:3000
Enter fullscreen mode Exit fullscreen mode

If the framework reads HOST / APP_URL:

APP_URL=http://myapp.test:3000
Enter fullscreen mode Exit fullscreen mode

Keep the port unless you put a reverse proxy in front.

3. Optional: drop the port with a proxy

Caddy example:

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

Then open http://myapp.test. Same idea with nginx or Traefik.

4. HTTPS locally

Some features need secure cookies or HTTPS redirects.

Options:

  • Caddy or mkcert for a local cert on myapp.test
  • Your framework's built-in HTTPS in development

Do not fight browser warnings with a public domain pointed at 127.0.0.1 unless you control that name.

5. Frontend and API on sibling hosts 

127.0.0.1   app.myapp.test
127.0.0.1   api.myapp.test
Enter fullscreen mode Exit fullscreen mode

Frontend on :3000, API on :4000. CORS and cookie domains become closer to production:

Domain=.myapp.test
Enter fullscreen mode Exit fullscreen mode

That is often the whole reason to stop using plain localhost.

Checklist when it "does not work"

  1. Hosts line exists and is not commented
  2. DNS cache flushed
  3. App is listening on the port you typed
  4. You opened myapp.test, not localhost
  5. Proxy config matches the hostname if you use one

Terminal check:

ping -c 1 myapp.test
# should show 127.0.0.1
Enter fullscreen mode Exit fullscreen mode

When to skip this

Throwaway demos and single-file experiments are fine on localhost.

Reach for a custom local domain when cookies, redirects, or multiple services start fighting you. One hosts line usually ends the fight.

If you switch hosts a lot, a small desktop manager helps keep profiles and DNS flush in one place: Locahl.

Top comments (0)