src/frontend/vite.config.ts

import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
import tsconfigPaths from 'vite-tsconfig-paths'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd())
  return {
    plugins: [react(), tsconfigPaths()],
    build: {
      sourcemap: env.VITE_BUILD_SOURCEMAP === 'true',
    },
    server: {
      port: parseInt(env.VITE_PORT) || 3000,
      host: env.VITE_HOST ?? 'localhost',
      allowedHosts: ['.nip.io'],
    },
  }
})
🔧(frontend) pass host and port through environment vars Configured the frontend to use environment variables (prefixed with "VITE_") for frontend port and host configuration, which will be overridden in the Helm chart values to ensure correct values are used in different environments. Helm requires the frontend port to be 8081 and use the public host, not the default "localhost" value. 2024-07-02 17:07:17 +02:00			`import { defineConfig, loadEnv } from 'vite'`
✨(frontend) create Vite app using npm Run the command 'npm create vite@latest' to bootstrap a new frontend project. Please note, other elements of the project still use yarn, to avoid confusion let's use npm instead. Vite was chosen over Next.Js for its simplicity; Next.Js could be kind of a black box where a lot of magics happen. 2024-06-24 15:42:01 +02:00			`import react from '@vitejs/plugin-react'`
♻️(frontend) starting a bit more structured frontend app the idea is to use react aria, panda-css, react query and wouter as a base, in addition to livekit react components this is still mostly wip but it's usable: - homepage shows a login link to create a room - before joining a room you are asked to configure your audio/video/user name - note that if you directly go to a a conference url it creates it even if you are not logged in… very secured! 2024-07-02 20:05:46 +02:00			`import tsconfigPaths from 'vite-tsconfig-paths'`
✨(frontend) create Vite app using npm Run the command 'npm create vite@latest' to bootstrap a new frontend project. Please note, other elements of the project still use yarn, to avoid confusion let's use npm instead. Vite was chosen over Next.Js for its simplicity; Next.Js could be kind of a black box where a lot of magics happen. 2024-06-24 15:42:01 +02:00
			`// https://vitejs.dev/config/`
♻️(frontend) starting a bit more structured frontend app the idea is to use react aria, panda-css, react query and wouter as a base, in addition to livekit react components this is still mostly wip but it's usable: - homepage shows a login link to create a room - before joining a room you are asked to configure your audio/video/user name - note that if you directly go to a a conference url it creates it even if you are not logged in… very secured! 2024-07-02 20:05:46 +02:00			`export default defineConfig(({ mode }) => {`
			`const env = loadEnv(mode, process.cwd())`
🔧(frontend) pass host and port through environment vars Configured the frontend to use environment variables (prefixed with "VITE_") for frontend port and host configuration, which will be overridden in the Helm chart values to ensure correct values are used in different environments. Helm requires the frontend port to be 8081 and use the public host, not the default "localhost" value. 2024-07-02 17:07:17 +02:00			`return {`
♻️(frontend) starting a bit more structured frontend app the idea is to use react aria, panda-css, react query and wouter as a base, in addition to livekit react components this is still mostly wip but it's usable: - homepage shows a login link to create a room - before joining a room you are asked to configure your audio/video/user name - note that if you directly go to a a conference url it creates it even if you are not logged in… very secured! 2024-07-02 20:05:46 +02:00			`plugins: [react(), tsconfigPaths()],`
🔧(frontend) add conditional sourcemap generation for error tracking Enable sourcemaps via env variable to link Sentry/PostHog exceptions to source code. Enable by default for DINUM frontend image to improve debugging capabilities. 2025-07-08 14:37:23 +02:00			`build: {`
			`sourcemap: env.VITE_BUILD_SOURCEMAP === 'true',`
			`},`
🔧(frontend) pass host and port through environment vars Configured the frontend to use environment variables (prefixed with "VITE_") for frontend port and host configuration, which will be overridden in the Helm chart values to ensure correct values are used in different environments. Helm requires the frontend port to be 8081 and use the public host, not the default "localhost" value. 2024-07-02 17:07:17 +02:00			`server: {`
			`port: parseInt(env.VITE_PORT) \|\| 3000,`
🎨(frontend) replace logical OR with nullish coalescing operator Replace `\|\|` operators and conditional checks with `??` where appropriate for safer null/undefined handling. Nullish coalescing only triggers for null/undefined values, preventing unexpected behavior with falsy values like 0 or empty strings. 2025-06-30 18:02:45 +02:00			`host: env.VITE_HOST ?? 'localhost',`
🩹(frontend) fix allowed hosts by Vite using the Tilt stack When using nip.io for local development DNS mapping (which allows hostname-based access to localhost), we need to explicitly allow these domains in Vite's server configuration to prevent host security violations. This check should be ignored when using https. 2025-01-22 14:51:36 +01:00			`allowedHosts: ['.nip.io'],`
🔧(frontend) pass host and port through environment vars Configured the frontend to use environment variables (prefixed with "VITE_") for frontend port and host configuration, which will be overridden in the Helm chart values to ensure correct values are used in different environments. Helm requires the frontend port to be 8081 and use the public host, not the default "localhost" value. 2024-07-02 17:07:17 +02:00			`},`
			`}`
✨(frontend) create Vite app using npm Run the command 'npm create vite@latest' to bootstrap a new frontend project. Please note, other elements of the project still use yarn, to avoid confusion let's use npm instead. Vite was chosen over Next.Js for its simplicity; Next.Js could be kind of a black box where a lot of magics happen. 2024-06-24 15:42:01 +02:00			`})`