typelets-app/vite.config.ts at main · typelets/typelets-app · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
import path from 'path';
import tailwindcss from '@tailwindcss/vite';
import react from '@vitejs/plugin-react';
import { defineConfig, loadEnv } from 'vite';
import { sentryVitePlugin } from '@sentry/vite-plugin';

// https://vite.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '');

  // Build plugins array conditionally
  const plugins = [react(), tailwindcss()];

  // Add Sentry plugin in production builds when DSN is configured
  if (mode === 'production' && env.VITE_SENTRY_DSN) {
    plugins.push(
      sentryVitePlugin({
        org: env.SENTRY_ORG || 'bata-labs',
        project: env.SENTRY_PROJECT || 'typelets',
        authToken: env.SENTRY_AUTH_TOKEN,
        telemetry: false,
        sourcemaps: {
          assets: './dist/**',
          filesToDeleteAfterUpload: './dist/**/*.map',
        },
        release: {
          name: `typelets@${env.VITE_APP_VERSION || '0.0.0'}`,
          deploy: {
            env: mode,
          },
        },
      })
    );
  }

  return {
    plugins,
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src'),
      },
    },
    build: {
      sourcemap: true, // Generate source maps for production
      rollupOptions: {
        output: {
          manualChunks: {
            // Monaco Editor - large code editor bundle
            'monaco-editor': ['monaco-editor', '@monaco-editor/react'],

            // Clerk authentication
            'clerk': ['@clerk/clerk-react'],

            // Radix UI components
            'radix-ui': [
              '@radix-ui/react-alert-dialog',
              '@radix-ui/react-dialog',
              '@radix-ui/react-dropdown-menu',
              '@radix-ui/react-label',
              '@radix-ui/react-scroll-area',
              '@radix-ui/react-slot',
              '@radix-ui/react-tabs',
            ],

            // React Query
            'react-query': ['@tanstack/react-query'],

            // Syntax highlighting
            'syntax-highlight': ['highlight.js', 'lowlight'],
          },
        },
      },
    },
    server: {
      proxy: {
        '/api': {
          target: env.VITE_PROXY_TARGET,
          changeOrigin: true,
          secure: false,
        },
      },
    },
  };
});