React (Vite)

Map your domain

hatch add myapp.test 5173 --https

Configure the dev server

Vite needs two changes: accept connections from any host (so the proxy can reach it), and configure HMR to use your Hatch domain for the WebSocket connection.

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    host: true,
    hmr: {
      host: 'myapp.test',
      protocol: 'wss',
    },
    allowedHosts: ['myapp.test'],
  },
});

Environment variables

# .env
VITE_APP_URL=https://myapp.test

API proxy

If your React app proxies API calls to a separate backend, you can either map the backend to its own Hatch domain (e.g. api.test) or keep Vite's built-in proxy:

// vite.config.ts
export default defineConfig({
  server: {
    host: true,
    hmr: {
      host: 'myapp.test',
      protocol: 'wss',
    },
    allowedHosts: ['myapp.test'],
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true,
      },
    },
  },
});

Project config

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

Common issues