FE: Add tsc & gen:sources for the build phase (#177)

frontend/.prettierrc

@@ -6,5 +6,6 @@
   "jsxSingleQuote": false,
   "bracketSpacing": true,
   "bracketSameLine": false,
-  "arrowParens": "always"
+  "arrowParens": "always",
+  "endOfLine": "lf"
 }

frontend/package.json

@@ -50,8 +50,9 @@
   "scripts": {
     "start": "vite",
     "dev": "vite",
-    "gen:sources": "rimraf src/generated-sources && openapi-generator-cli generate",
-    "build": "vite build",
+    "clean": "rimraf ./src/generated-sources",
+    "gen:sources": "pnpm clean && openapi-generator-cli generate",
+    "build": "pnpm gen:sources && tsc --noEmit && vite build",
     "preview": "vite preview",
     "lint": "eslint --ext .tsx,.ts src/",
     "lint:fix": "eslint --ext .tsx,.ts src/ --fix",
@@ -103,6 +104,7 @@
     "ts-node": "^10.9.1",
     "ts-prune": "^0.10.3",
     "typescript": "^4.7.4",
+    "vite-plugin-checker": "^0.6.4",
     "vite-plugin-ejs": "^1.6.4"
   },
   "engines": {

frontend/src/components/common/NewTable/__test__/Table.spec.tsx

@@ -94,7 +94,7 @@ const columns: ColumnDef<Datum>[] = [
 
 const ExpandedRow: React.FC = () => <div>I am expanded row</div>;
 
-interface Props extends TableProps<Datum> {
+interface Props extends TableProps<Datum, Datum> {
   path?: string;
 }
 

frontend/vite.config.ts

@@ -7,19 +7,34 @@ import {
 import react from '@vitejs/plugin-react-swc';
 import tsconfigPaths from 'vite-tsconfig-paths';
 import { ViteEjsPlugin } from 'vite-plugin-ejs';
+import checker from 'vite-plugin-checker';
 
 export default defineConfig(({ mode }) => {
   process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };
+  const isDevMode = mode === 'development';
+  const isProxy = process.env.VITE_DEV_PROXY;
+
+  const defaultPlugins = [
+    react(),
+    tsconfigPaths(),
+    ViteEjsPlugin({
+      PUBLIC_PATH: !isDevMode ? 'PUBLIC-PATH-VARIABLE' : '',
+    }),
+  ];
+
+  const prodPlugins = [...defaultPlugins, splitVendorChunkPlugin()];
+
+  const devPlugins = [
+    ...defaultPlugins,
+    checker({
+      overlay: { initialIsOpen: false },
+      typescript: true,
+      eslint: { lintCommand: 'eslint --ext .tsx,.ts src/' },
+    }),
+  ];
 
   const defaultConfig: UserConfigExport = {
-    plugins: [
-      react(),
-      tsconfigPaths(),
-      splitVendorChunkPlugin(),
-      ViteEjsPlugin({
-        PUBLIC_PATH: mode !== 'development' ? 'PUBLIC-PATH-VARIABLE' : '',
-      }),
-    ],
+    plugins: isDevMode ? devPlugins : prodPlugins,
     server: {
       port: 3000,
     },
@@ -59,25 +74,29 @@ export default defineConfig(({ mode }) => {
       'process.env.VITE_COMMIT': `"${process.env.VITE_COMMIT}"`,
     },
   };
-  const proxy = process.env.VITE_DEV_PROXY;
-  if (mode === 'development' && proxy) {
+
+  const proxyDevServerConfig = {
+    ...defaultConfig.server,
+    open: true,
+    proxy: {
+      '/api': {
+        target: isProxy,
+        changeOrigin: true,
+        secure: false,
+      },
+      '/actuator/info': {
+        target: isProxy,
+        changeOrigin: true,
+        secure: false,
+      },
+    },
+  };
+
+  if (isDevMode && isProxy) {
     return {
       ...defaultConfig,
       server: {
-        ...defaultConfig.server,
-        open: true,
-        proxy: {
-          '/api': {
-            target: proxy,
-            changeOrigin: true,
-            secure: false,
-          },
-          '/actuator/info': {
-            target: proxy,
-            changeOrigin: true,
-            secure: false,
-          },
-        },
+        ...proxyDevServerConfig,
       },
     };
   }