merge: Backend refactoring (#59)

.github/workflows/build-test-publish.yml

@@ -56,6 +56,13 @@ jobs:
         run: python -m pip install -U pip
       - name: Install pre-commit
         run: python -m pip install pre-commit
+      - name: Install hadolint
+        run: |-
+          curl -Lo \
+            /usr/local/bin/hadolint \
+            https://github.com/hadolint/hadolint/releases/download/v2.12.0/hadolint-Linux-x86_64
+          chmod +x /usr/local/bin/hadolint
+          hadolint --version
       - name: Run Pre-Commit
         run: pre-commit run --all-files
 

.pre-commit-config.yaml

@@ -107,7 +107,7 @@ repos:
   - repo: https://github.com/rhysd/actionlint
     rev: v1.7.6
     hooks:
-      - id: actionlint-docker
+      - id: actionlint
   - repo: https://github.com/pre-commit/mirrors-mypy
     rev: v1.14.1
     hooks:
@@ -129,7 +129,7 @@ repos:
   - repo: https://github.com/hadolint/hadolint
     rev: v2.13.1-beta
     hooks:
-      - id: hadolint-docker
+      - id: hadolint
         args:
           - --ignore=DL3008
   - repo: local

Dockerfile

@@ -2,7 +2,7 @@
 # SPDX-License-Identifier: Apache-2.0
 
 # Build frontend
-FROM node:20 as build-frontend
+FROM node:20 AS build-frontend
 WORKDIR /app
 COPY frontend/package*.json ./
 RUN npm install

Makefile

@@ -1,19 +1,24 @@
 # Copyright DB InfraGO AG and contributors
 # SPDX-License-Identifier: Apache-2.0
 
-CAPELLA_MODEL_EXPLORER_HOST_IP ?= 127.0.0.1
+CAPELLA_MODEL_EXPLORER_HOST_IP ?= 0.0.0.0
 CAPELLA_MODEL_EXPLORER_PORT ?= 8000
-MODEL ?= coffee-machine
+export MODEL ?= coffee-machine
+export TEMPLATES_DIR ?= templates
 
 # NOTE: Keep the 'help' target first, so that 'make' acts like 'make help'
 .PHONY: help
 help:
 	@echo 'Available make targets:'
 	@echo ''
+	@echo 'Note:  `UV_ENV_FILE=.env uv run make ...` or `dotenv run make ...`'
+	@echo 'can be used to run make with environment variables from a .env file'
+	@echo ''
 	@echo '    run MODEL=/some/model.aird'
-	@echo '                    -- Run the backend with a model'
+	@echo '                    -- Run the app in production mode with a model'
+	@echo '    dev-backend     -- Run the backend in development mode'
+	@echo '    dev-frontend    -- Run the frontend in development mode'
 	@echo '    build-frontend  -- (Re-)Build the prod frontend files'
-	@echo '    dev-frontend    -- Run the frontend in dev mode'
 	@echo '    storybook       -- Run storybook for frontend development'
 	@echo '    clean-frontend  -- Clean out all built/installed frontend files'
 
@@ -22,14 +27,30 @@ run: frontend/dist/static/env.js
 	sed -i "s|__ROUTE_PREFIX__||g" frontend/dist/static/env.js
 	MODE=production python frontend/fetch-version.py
 	python -c "from capellambse_context_diagrams import install_elk; install_elk()"
-	MODE=production python -m capella_model_explorer.backend "$$MODEL" ./templates
+	MODEL="$$MODEL" TEMPLATES_DIR="$$TEMPLATES_DIR" uvicorn \
+		--host=$(CAPELLA_MODEL_EXPLORER_HOST_IP) \
+		--port=$(CAPELLA_MODEL_EXPLORER_PORT) \
+		capella_model_explorer.backend.main:app
 
 .PHONY: build-frontend
 build-frontend: frontend/node_modules
 	cd frontend && npm run build
 
+.PHONY: dev-backend
+dev-backend:
+	sed -i "s|__ROUTE_PREFIX__||g" frontend/dist/static/env.js
+	MODE=production python frontend/fetch-version.py
+	python -c "from capellambse_context_diagrams import install_elk; install_elk()"
+	MODEL="$$MODEL" TEMPLATES_DIR="$$TEMPLATES_DIR" uvicorn \
+		--host=$(CAPELLA_MODEL_EXPLORER_HOST_IP) \
+		--port=$(CAPELLA_MODEL_EXPLORER_PORT) \
+		--reload \
+		capella_model_explorer.backend.main:app
+
 .PHONY: dev-frontend
 dev-frontend: frontend/node_modules
+	sed -i "s|__ROUTE_PREFIX__||g" frontend/dist/static/env.js
+	python frontend/fetch-version.py
 	cd frontend && npm run dev
 
 .PHONY: storybook

README.md

@@ -35,7 +35,9 @@ Clone, then build and run locally with Docker:
 
 ```bash
 docker build -t model-explorer:latest .
-docker run -e ROUTE_PREFIX="" -v /absolute/path/to/your/model/folder/on/host:/model -v $(pwd)/templates:/views -p 8000:8000 model-explorer
+docker run --name=cme -e ROUTE_PREFIX="" \
+    -v /absolute/path/to/your/model/folder/on/host:/model \
+    -v "$PWD/templates:/views" -p 8000:8000 model-explorer
 ```
 
 Then open your browser at `http://localhost:8000/views` and start exploring
@@ -46,16 +48,13 @@ and see the changes immediately in the browser.
 
 # Development (local)
 
-To run the app in dev mode you'll need to first run `npm run build` - this is
-needed by the backend to have some statics to serve. Then run `npm run dev` in
-a terminal and
-`python -m capella_model_explorer.backend path_to_model path_to_templates` in
-another terminal. The backend and statically built frontend will be served at
+To run the app in dev mode you'll need to first run `make build-frontend`. This
+is needed by the backend to have some statics to serve. Then run `make
+dev-backend` in one terminal and `make dev-frontend` in another terminal. The
+backend and statically built frontend will be served at
 `http://localhost:8000`. The live frontend will be served by vite at
-`http://localhost:5173`(or similar, it will be printed in the terminal where
-you ran `npm run dev`). If you wish to display the Frontend Software Version,
-it will initially show 'Fetch Failed'. To successfully fetch and display the
-version, you need to run the command `python frontend/fetch_version.py`.
+`http://localhost:5173` (or similar, it will be printed in the terminal where
+you ran `make dev-frontend`).
 
 # Installation