Domains for local apps

When working on side projects, I prefer setting up a custom domain for each app I’m developing. This approach mimics the production environment more closely and simplifies juggling multiple apps simultaneously.

Using custom domains for local development offers several advantages:

1. It prevents cookie mixing between different apps.
2. It allows for easier configuration of CORS policies.
3. It provides a more realistic testing environment.

Setting this up is straightforward, especially with the help of Caddy. Here’s my process:

First, choose your domain: I typically use the local subdomain. For instance, if my production app is breadandbutter.com, I’ll use local.breadandbutter.com for local development.

Configure Caddy, assuming my local server runs on port 4000, here’s the Caddy configuration I use:

local.breadandbutter.com {
    tls internal
    reverse_proxy localhost:4000
}

Finally, add an A record for local.breadandbutter.com pointing to 127.0.0.1 in my hosts file or local DNS server.

That’s all there is to it! Now I can access my app at local.breadandbutter.com, enjoying the benefits of a custom domain for my local development environment.

This setup not only enhances my development workflow but also helps catch potential issues related to domain-specific configurations early in the development process.