feat(docker): add watch mode for automatic frontend rebuilds in Docker

This commit is contained in:
Abhimanyu Saharan
2026-03-05 00:54:09 +05:30
parent 2b0d3ba386
commit df7152dcad
3 changed files with 63 additions and 0 deletions

View File

@@ -142,6 +142,22 @@ frontend-build: frontend-tooling ## Build frontend (next build)
api-gen: frontend-tooling ## Regenerate TS API client (requires backend running at 127.0.0.1:8000) api-gen: frontend-tooling ## Regenerate TS API client (requires backend running at 127.0.0.1:8000)
$(NODE_WRAP) --cwd $(FRONTEND_DIR) npm run api:gen $(NODE_WRAP) --cwd $(FRONTEND_DIR) npm run api:gen
.PHONY: docker-up
docker-up: ## Start full Docker stack with image rebuild
docker compose -f compose.yml --env-file .env up -d --build
.PHONY: docker-watch
docker-watch: ## Start stack in watch mode (auto rebuild frontend on UI changes)
docker compose -f compose.yml --env-file .env up --build --watch
.PHONY: docker-watch-only
docker-watch-only: ## Attach file watch to an already-running stack
docker compose -f compose.yml --env-file .env watch
.PHONY: docker-down
docker-down: ## Stop full Docker stack
docker compose -f compose.yml --env-file .env down
.PHONY: rq-worker .PHONY: rq-worker
rq-worker: ## Run background queue worker loop rq-worker: ## Run background queue worker loop
cd $(BACKEND_DIR) && uv run python ../scripts/rq worker cd $(BACKEND_DIR) && uv run python ../scripts/rq worker

View File

@@ -100,6 +100,36 @@ Before startup:
docker compose -f compose.yml --env-file .env up -d --build docker compose -f compose.yml --env-file .env up -d --build
``` ```
If you are iterating on the UI in Docker and want automatic frontend rebuilds on
source changes, run:
```bash
docker compose -f compose.yml --env-file .env up --build --watch
```
Notes:
- Compose Watch requires Docker Compose **2.22.0+**.
- You can also run watch separately after startup:
```bash
docker compose -f compose.yml --env-file .env up -d --build
docker compose -f compose.yml --env-file .env watch
```
After pulling new changes, rebuild and recreate all services:
```bash
docker compose -f compose.yml --env-file .env up -d --build --force-recreate
```
For a fully clean rebuild (no cached build layers):
```bash
docker compose -f compose.yml --env-file .env build --no-cache --pull
docker compose -f compose.yml --env-file .env up -d --force-recreate
```
### 3. Open the application ### 3. Open the application
- Mission Control UI: http://localhost:3000 - Mission Control UI: http://localhost:3000

View File

@@ -70,6 +70,23 @@ services:
- backend - backend
ports: ports:
- "${FRONTEND_PORT:-3000}:3000" - "${FRONTEND_PORT:-3000}:3000"
develop:
watch:
# Rebuild frontend image when UI source or build config changes.
- action: rebuild
path: ./frontend/src
- action: rebuild
path: ./frontend/package.json
- action: rebuild
path: ./frontend/package-lock.json
- action: rebuild
path: ./frontend/next.config.ts
- action: rebuild
path: ./frontend/postcss.config.js
- action: rebuild
path: ./frontend/tailwind.config.cjs
- action: rebuild
path: ./frontend/tsconfig.json
webhook-worker: webhook-worker:
build: build: