build(ui): migrate from CRA/Jest to Vite/Vitest (#3311)

* feat: create vite project * feat: it's alive! * feat: `make dev` working! * feat: replace custom serviceWorker with vite plugin * test: replace Jest with Vitest * fix: run prettier * fix: skip eslint for now. * chore: remove ui.old folder * refactor: replace lodash.pick with simple destructuring * fix: eslint errors (wip) * fix: eslint errors (wip) * fix: display-name eslint errors (wip) * fix: no-console eslint errors (wip) * fix: react-refresh/only-export-components eslint errors (wip) * fix: react-refresh/only-export-components eslint errors (wip) * fix: react-refresh/only-export-components eslint errors (wip) * fix: react-refresh/only-export-components eslint errors (wip) * fix: build * fix: pwa manifest * refactor: pwa manifest * refactor: simplify PORT configuration * refactor: rename simple JS files * test: cover playlistUtils * fix: react-image-lightbox * feat(ui): add sourcemaps to help debug issues
2024-09-28 11:54:36 -04:00
parent dd48a23f92
commit fcdd30ba8f
212 changed files with 6231 additions and 31060 deletions
@@ -0,0 +1,73 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+import { VitePWA } from 'vite-plugin-pwa'
+import eslintPlugin from '@nabla/vite-plugin-eslint'
+
+const frontendPort = parseInt(process.env.PORT) || 4533
+const backendPort = frontendPort + 100
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    react(),
+    eslintPlugin({ formatter: 'stylish' }),
+    VitePWA({
+      registerType: 'autoUpdate',
+      manifest: manifest(),
+      workbox: {
+        // Workbox options
+      },
+    }),
+  ],
+  server: {
+    host: true,
+    port: frontendPort,
+    proxy: {
+      '^/(auth|api|rest|backgrounds)/.*': 'http://localhost:' + backendPort,
+    },
+  },
+  base: './',
+  build: {
+    outDir: 'build',
+    sourcemap: true,
+  },
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './src/setupTests.js',
+    css: true,
+    reporters: ['verbose'],
+    coverage: {
+      reporter: ['text', 'json', 'html'],
+      include: ['src/**/*'],
+      exclude: [],
+    },
+  },
+})
+
+// PWA manifest
+function manifest() {
+  return {
+    name: 'Navidrome',
+    short_name: 'Navidrome',
+    description:
+      'Navidrome, an open source web-based music collection server and streamer',
+    categories: ['music', 'entertainment'],
+    display: 'standalone',
+    start_url: './',
+    background_color: 'white',
+    theme_color: 'blue',
+    icons: [
+      {
+        src: './android-chrome-192x192.png',
+        sizes: '192x192',
+        type: 'image/png',
+      },
+      {
+        src: './android-chrome-512x512.png',
+        sizes: '512x512',
+        type: 'image/png',
+      },
+    ],
+  }
+}