fix: properly setup vite build & backend server (#21)

bihealth · Sep 1, 2023 · 96d4151 · 96d4151
1 parent 644a2d4
commit 96d4151
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 14 deletions.
diff --git a/backend/app/main.py b/backend/app/main.py
@@ -1,4 +1,5 @@
 import os
+import pathlib
 import sys
 
 import httpx
@@ -8,7 +9,7 @@
 from fastapi.staticfiles import StaticFiles
 from starlette.background import BackgroundTask
 from starlette.requests import Request
-from starlette.responses import RedirectResponse, Response, StreamingResponse
+from starlette.responses import FileResponse, RedirectResponse, Response, StreamingResponse
 
 # Load environment
 env = os.environ
@@ -80,13 +81,16 @@ async def reverse_proxy(request: Request) -> Response:
 # Register reverse proxy route
 app.add_route("/proxy/{path:path}", reverse_proxy, methods=["GET", "POST"])
 
+# Register route for favicon.
+@app.get("/favicon.ico")
+async def favicon():
+    return FileResponse(pathlib.Path(__file__).parent.parent.parent / "frontend/public/favicon.ico")
 
 # Routes
 if SERVE_FRONTEND:  # pragma: no cover
     print(f"SERVE_FRONTEND = {SERVE_FRONTEND}", file=sys.stderr)
-    app.mount("/ui", StaticFiles(directory=SERVE_FRONTEND), name="app")
+    app.mount("/assets", StaticFiles(directory=f"{SERVE_FRONTEND}/assets"), name="ui")
 
     @app.get("/")
-    async def redirect():
-        response = RedirectResponse(url="/ui/index.html")
-        return response
+    async def index():
+        return FileResponse(f"{SERVE_FRONTEND}/index.html")
diff --git a/frontend/index.html b/frontend/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
+    <title>Loading REEV...</title>
   </head>
   <body>
     <div id="app"></div>
@@ -22,22 +22,22 @@
     min-height: 100vh; /* Ensure the content takes up at least the full viewport height */
     font-weight: normal;
   }
-  
+
   a,
   .green {
     text-decoration: none;
     color: rgb(111, 100, 210);
     transition: 0.4s;
   }
-  
+
   @media (min-width: 1024px) {
     body {
       display: flex;
       justify-content: center; /* Center horizontally */
       align-items: center; /* Center vertically */
       min-height: 100vh; /* Ensure the body takes up at least the full viewport height */
     }
-  
+
     #app {
       display: grid;
       grid-template-columns: 1fr;
@@ -46,4 +46,4 @@
       align-items: center; /* Center horizontally */
     }
   }
-  </style>
+  </style>
diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico
diff --git a/frontend/src/api/annonars.ts b/frontend/src/api/annonars.ts
@@ -12,7 +12,7 @@ export class AnnonarsClient {
   }
 
   async fetchGeneInfo(hgncId: string): Promise<any> {
-    const response = await fetch(`${this.apiBaseUrl}genes/info?hgnc-id=${hgncId}`, {
+    const response = await fetch(`${this.apiBaseUrl}genes/info?hgnc_id=${hgncId}`, {
       method: 'GET'
     })
     return await response.json()

diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
@@ -1,3 +1,4 @@
+import { nextTick } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
 
 import HomeView from '@/views/HomeView.vue'
@@ -37,6 +38,17 @@ const router = createRouter({
   routes
 })
 
+/** The default page title */
+const DEFAULT_TITLE = 'REEV Explains and Evaluates Variants'
+
+router.afterEach((to, _from) => {
+    // Use next tick to handle router history correctly
+    // see: https://github.com/vuejs/vue-router/issues/914#issuecomment-384477609
+    nextTick(() => {
+        document.title = to.meta.title as string ?? DEFAULT_TITLE
+    })
+});
+
 export { routes }
 
 export default router
diff --git a/frontend/src/views/GeneDetailView.vue b/frontend/src/views/GeneDetailView.vue
@@ -22,8 +22,10 @@ const geneInfoStore = useGeneInfoStore()
 
 const scrollToSection = async () => {
   const sectionId = route.hash.slice(1)
-  const elem = document.getElementById(sectionId)
-  elem?.scrollIntoView()
+  if (sectionId) {
+    const elem = document.getElementById(sectionId)
+    elem?.scrollIntoView()
+  }
 }
 
 const loadDataToStore = async () => {

diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
@@ -14,7 +14,6 @@ export default defineConfig({
     vueJsx(),
     vuetify()
   ],
-  base: './',
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))