feat[wip]: Serve frontend and backend with prefix

DSD-DBS · Apr 9, 2024 · 5f54624 · 5f54624
1 parent 4dff213
commit 5f54624
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 18 deletions.
diff --git a/capella_model_explorer/backend/explorer.py b/capella_model_explorer/backend/explorer.py
@@ -9,6 +9,7 @@
 from pathlib import Path
 
 import capellambse
+import fastapi
 import yaml
 from fastapi import FastAPI, Request
 from fastapi.middleware.cors import CORSMiddleware
@@ -23,6 +24,7 @@
 @dataclasses.dataclass
 class CapellaModelExplorerBackend:
     app: FastAPI = dataclasses.field(init=False)
+    router: fastapi.APIRouter = dataclasses.field(init=False)
     env: Environment = dataclasses.field(init=False)
     templates: dict[str, t.Any] = dataclasses.field(
         init=False, default_factory=dict
@@ -33,6 +35,8 @@ class CapellaModelExplorerBackend:
 
     def __post_init__(self):
         self.app = FastAPI()
+        self.router = fastapi.APIRouter()
+        self.app.include_router(router=self.router, prefix="/test")
         self.app.add_middleware(
             CORSMiddleware,
             allow_origins=["*"],
@@ -49,27 +53,27 @@ def __post_init__(self):
         self.configure_routes()
 
     def configure_routes(self):
-        self.app.mount(
+        self.router.mount(
             "/assets",
             StaticFiles(
                 directory=PATH_TO_FRONTEND.joinpath("assets"), html=True
             ),
         )
 
-        @self.app.get("/api/views")
+        @self.router.get("/api/views")
         def read_templates():
             # list all templates in the templates folder from .yaml
             self.grouped_templates, self.templates = index_templates(
                 self.templates_path
             )
             return self.grouped_templates
 
-        @self.app.get("/api/objects/{uuid}")
+        @self.router.get("/api/objects/{uuid}")
         def read_object(uuid: str):
             obj = self.model.by_uuid(uuid)
             return {"idx": obj.uuid, "name": obj.name, "type": obj.xtype}
 
-        @self.app.get("/api/views/{template_name}")
+        @self.router.get("/api/views/{template_name}")
         def read_template(template_name: str):
             template_name = urlparse.unquote(template_name)
             if not template_name in self.templates:
@@ -96,7 +100,7 @@ def read_template(template_name: str):
                 base["error"] = str(e)
             return base
 
-        @self.app.get("/api/views/{template_name}/{object_id}")
+        @self.router.get("/api/views/{template_name}/{object_id}")
         def render_template(template_name: str, object_id: str):
             content = None
             object = None
@@ -137,7 +141,7 @@ def render_template(template_name: str, object_id: str):
                 )
                 return HTMLResponse(content=error_message)
 
-        @self.app.get("/api/model-info")
+        @self.router.get("/api/model-info")
         def model_info():
             info = self.model.info
             return {

diff --git a/frontend/index.html b/frontend/index.html
@@ -3,7 +3,7 @@
  ~ SPDX-License-Identifier: Apache-2.0
  -->
 
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -14,5 +14,6 @@
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
+    <script src="./env.js"></script>
   </body>
 </html>
diff --git a/frontend/public/env.js b/frontend/public/env.js
@@ -0,0 +1,4 @@
+window.env = {
+  ROUTE_PREFIX: '/test',
+  API_BASE_URL: 'http://localhost:8000/api',
+}
diff --git a/frontend/src/APIConfig.js b/frontend/src/APIConfig.js
@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-const API_BASE_URL = 'http://localhost:8000/api';
+const API_BASE_URL = window.env.API_BASE_URL || '/api'
+const ROUTE_PREFIX = window.env.ROUTE_PREFIX || ''
 
-export { API_BASE_URL };
+export { API_BASE_URL, ROUTE_PREFIX }
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -2,25 +2,27 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
 import './App.css'
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
-import { WiredTemplatesList } from './components/WiredTemplatesList'
 import { TemplateView } from './views/TemplateView'
 import { HomeView } from './views/HomeView'
-
+import { API_BASE_URL, ROUTE_PREFIX } from './APIConfig'
 
 function App() {
   const [count, setCount] = useState(0)
 
   return (
-    <Router>
+    <Router basename={ROUTE_PREFIX}>
       <Routes>
-        <Route path="/" element={<HomeView/>} />
-        {/* <Route path="/views" element={<WiredTemplatesList endpoint="http://localhost:8000/api/views" />} /> */}
-        <Route path="/:templateName" element={<TemplateView endpoint="http://localhost:8000/api/views/" />} />
-        <Route path="/:templateName/:objectID" element={<TemplateView endpoint="http://localhost:8000/api/views/" />} />
+        <Route path="/" element={<HomeView />} />
+        <Route
+          path="/:templateName"
+          element={<TemplateView endpoint={`${API_BASE_URL}/views/`} />}
+        />
+        <Route
+          path="/:templateName/:objectID"
+          element={<TemplateView endpoint={`${API_BASE_URL}/views/`} />}
+        />
       </Routes>
     </Router>
   )