chore: setup twenty-ui absolute path alias (#4732)

Split from https://github.com/twentyhq/twenty/pull/4518

- Setup `@ui/*` as an internal alias to reference `twenty-ui/src`.
- Configures twenty-front to understand the `@ui/*` alias on development
mode, so twenty-ui can be hot reloaded.
- When building on production mode, twenty-front needs twenty-ui to be
built beforehand (which is automatic with the `dependsOn` option).
- Configures twenty-front to understand the `@ui/*` alias when launching
tests, so there is no need to re-build twenty-ui for tests.

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-front/vite.config.ts

@@ -31,24 +31,34 @@ export default defineConfig(({ command, mode }) => {
     };
   }
 
-  const plugins = [
-    react({ jsxImportSource: '@emotion/react' }),
-    tsconfigPaths(),
-    svgr(),
-    checker(checkers),
-  ];
-
   return {
-    // base: ,
-    envPrefix: 'REACT_APP_',
+    root: __dirname,
+    cacheDir: '../../node_modules/.vite/packages/twenty-front',
+
+    server: {
+      port: 3001,
+      host: 'localhost',
+    },
+
+    plugins: [
+      react({ jsxImportSource: '@emotion/react' }),
+      tsconfigPaths({
+        projects: [
+          'tsconfig.json',
+          // Include internal library aliases in development mode, so hot reload is enabled for libraries.
+          mode === 'development' ? '../twenty-ui/tsconfig.json' : undefined,
+        ].filter(Boolean) as string[],
+      }),
+      svgr(),
+      checker(checkers),
+    ],
+
     build: {
       outDir: 'build',
     },
-    plugins,
-    server: {
-      // open: true,
-      port: 3001,
-    },
+
+    envPrefix: 'REACT_APP_',
+
     define: {
       'process.env': {
         REACT_APP_SERVER_BASE_URL,