Add live-reload support for frontend development (#360)

Author: ppcano

Makefile

@@ -18,6 +18,19 @@ build-go: # Build Go binary (doesn't rebuild frontend)
 		cp pkg/web/dev.html $(FRONTEND_BUILD_DIR)/index.html
 	go build -o bin/quickpizza ./cmd
 
+.PHONY: install-web
+install-web: # Install frontend dependencies
+	cd pkg/web && npm install
+
+.PHONY: dev
+dev: # Run with live-reload (frontend dev server + backend with -dev flag)
+	@echo "Starting dev server with live-reload"
+	@trap 'kill 0' EXIT; \
+	(export PUBLIC_BACKEND_ENDPOINT="http://localhost:3333" && \
+	export PUBLIC_BACKEND_WS_ENDPOINT="ws://localhost:3333/ws" && \
+	cd pkg/web && npm run dev) & \
+	go run ./cmd -dev
+
 .PHONY: proto
 proto: # Generate protobuf files
 	protoc --go_out=. --go-grpc_out=. proto/quickpizza.proto

cmd/main.go

@@ -2,6 +2,7 @@ package main
 
 import (
 	"context"
+	"flag"
 	http "net/http"
 	"os"
 	"runtime"
@@ -21,7 +22,10 @@ import (
 	"go.opentelemetry.io/otel/propagation"
 )
 
+var devMode = flag.Bool("dev", false, "Run in development mode with Vite dev server")
+
 func main() {
+	flag.Parse()
 	// write logs as JSON
 	slog.SetDefault(slog.New(slog.NewJSONHandler(os.Stderr, &slog.HandlerOptions{
 		Level: logging.GetLogLevel(),
@@ -96,7 +100,7 @@ func main() {
 
 	if envServe("QUICKPIZZA_ENABLE_PUBLIC_API_SERVICE") {
 		// Serve frontend static assets
-		server.AddFrontend()
+		server.AddFrontend(*devMode)
 
 		// If running as a microservice (not all services in one instance),
 		// also act as a gateway to proxy public-facing endpoints

docs/development.md

@@ -4,6 +4,32 @@ Running QuickPizza locally.
 
 **Prerequisites**: Go 1.21+ and Node.js 18+
 
+## Development Mode (with Live-Reload)
+
+For the best development experience with automatic frontend reloading:
+
+1. Install frontend dependencies (first time only):
+   ```bash
+   make install-web
+   ```
+
+2. Start dev server with live-reload:
+   ```bash
+   make dev
+   ```
+
+3. Access at `http://localhost:3333`
+
+This starts both:
+- Vite dev server on port 5173 (with hot module replacement)
+- Go backend on port 3333 (proxies to Vite for frontend assets)
+
+Frontend changes will reload instantly without rebuilding or restarting the server.
+
+## Production Build
+
+To build and run as in production:
+
 1. Build frontend:
    ```bash
    make build-web
@@ -17,3 +43,4 @@ Running QuickPizza locally.
 3. Access at `http://localhost:3333`
 
 
+

pkg/http/http.go

@@ -346,7 +346,7 @@ func (s *Server) AddPrometheusHandler() {
 }
 
 // AddFrontend enables serving the embedded Svelte frontend.
-func (s *Server) AddFrontend() {
+func (s *Server) AddFrontend(devMode bool) {
 	s.router.Group(func(r chi.Router) {
 		s.traceInstaller.Install(r, "frontend",
 			// The frontend serves a lot of static files on different paths. To save on cardinality, we override the
@@ -357,7 +357,14 @@ func (s *Server) AddFrontend() {
 		)
 
 		r.Handle("/favicon.ico", FaviconHandler())
-		r.Handle("/*", SvelteKitHandler())
+
+		if devMode {
+			// In dev mode, proxy to Vite dev server
+			r.Handle("/*", ViteProxyHandler())
+		} else {
+			// Production: serve embedded files
+			r.Handle("/*", SvelteKitHandler())
+		}
 	})
 }
 
@@ -1533,6 +1540,23 @@ func SvelteKitHandler() http.Handler {
 	})
 }
 
+// ViteProxyHandler returns an http.Handler that proxies requests to the Vite dev server.
+func ViteProxyHandler() http.Handler {
+	target, _ := url.Parse("http://localhost:5173")
+	proxy := httputil.NewSingleHostReverseProxy(target)
+	proxy.Director = func(req *http.Request) {
+		req.URL.Scheme = target.Scheme
+		req.URL.Host = target.Host
+		req.Host = target.Host
+		slog.Debug("Proxying request to Vite", "path", req.URL.Path)
+	}
+	proxy.ErrorHandler = func(w http.ResponseWriter, r *http.Request, err error) {
+		slog.Error("Vite proxy error", "err", err, "path", r.URL.Path)
+		http.Error(w, "Vite dev server unavailable. Make sure it's running on http://localhost:5173", http.StatusBadGateway)
+	}
+	return proxy
+}
+
 func PrometheusMiddleware(next http.Handler) http.Handler {
 	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
 		start := time.Now()