Angular

Map your domain

hatch add myapp.test 4200 --https

Configure the dev server

Angular's dev server needs to bind to all interfaces and accept connections from the proxy hostname. In angular.json:

{
  "projects": {
    "my-app": {
      "architect": {
        "serve": {
          "options": {
            "host": "0.0.0.0",
            "allowedHosts": ["myapp.test"],
            "hmr": true
          }
        }
      }
    }
  }
}

Or pass the flags directly:

ng serve --host 0.0.0.0 --allowed-hosts myapp.test --hmr

Environment files

// src/environments/environment.ts
export const environment = {
  production: false,
  appUrl: 'https://myapp.test',
};

API proxy

If your Angular app proxies API calls to a backend, you can keep using Angular's built-in proxy config, or map the backend to its own Hatch domain:

// proxy.conf.json
{
  "/api": {
    "target": "http://localhost:8000",
    "secure": false,
    "changeOrigin": true
  }
}

Alternative: map the backend separately with hatch add api.test 8000 --https and call it directly from your Angular app.

Project config

# .hatch.yaml
domains:
  - domain: myapp.test
    port: 4200
    https: true