Fix Vue 3 Web Build with FastAPI (#1453)

* Fix Vue 3 Web Build with FastAPI

* yapf fixes

turbinia/api/routes/ui.py

@@ -44,22 +44,11 @@ async def web(request: Request):
  raise HTTPException(status_code=404, detail='Not found')
 
 
-@ui_router.get('/css/{catchall:path}', name='css', include_in_schema=False)
-async def serve_css(request: Request):
- """Serves CSS content."""
- static_content_path = pathlib.Path(_config.WEBUI_PATH).joinpath('dist/css')
- path = request.path_params['catchall']
- file = static_content_path.joinpath(path)
- if os.path.exists(file):
- return FileResponse(file)
-
- raise HTTPException(status_code=404, detail='Not found')
-
-
-@ui_router.get('/js/{catchall:path}', name='js', include_in_schema=False)
-async def serve_js(request: Request):
- """Serves JavaScript content."""
- static_content_path = pathlib.Path(_config.WEBUI_PATH).joinpath('dist/js')
+@ui_router.get(
+ '/assets/{catchall:path}', name='assets', include_in_schema=False)
+async def serve_assets(request: Request):
+ """Serves assets content."""
+ static_content_path = pathlib.Path(_config.WEBUI_PATH).joinpath('dist/assets')
  path = request.path_params['catchall']
  file = static_content_path.joinpath(path)
  if os.path.exists(file):

web/index.html

@@ -5,7 +5,6 @@
  <meta charset="UTF-8" />
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet" />
  <title>Turbinia</title>
 </head>
 

web/src/App.vue

@@ -16,7 +16,7 @@ limitations under the License.
  <nav class="navbar">
  <v-app-bar flat :elevation="1" >
  <template v-slot:prepend>
- <v-img src="./assets/turbinia-logo-mark.png" height="50" width="70"></v-img>
+ <v-img src="./turbinia-logo-mark.png" height="50" width="70"></v-img>
  </template>
  <v-app-bar-title>Turbinia</v-app-bar-title>
  <v-spacer></v-spacer>

web/vite.config.js

@@ -1,7 +1,6 @@
 // Plugins
 import vue from '@vitejs/plugin-vue'
 import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
-import ViteFonts from 'unplugin-fonts/vite'
 
 // Utilities
 import { defineConfig } from 'vite'
@@ -17,14 +16,6 @@ export default defineConfig({
  vuetify({
  autoImport: true,
  }),
- ViteFonts({
- google: {
- families: [{
- name: 'Roboto',
- styles: 'wght@100;300;400;500;700;900',
- }],
- },
- }),
  ],
  define: { 'process.env': {} },
  resolve: {
@@ -44,7 +35,7 @@ export default defineConfig({
  server: {
  port: 3000,
  proxy: {
- '/api': {
+ '/web': {
  target: 'http://localhost:8000',
  changeOrigin: true,
  },