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()],
    server: {
      port: parseInt(env.VITE_PORT) || 3000,
      host: env.VITE_HOST || 'localhost',
    },
  }
})
🔧(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) 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,`
			`host: env.VITE_HOST \|\| 'localhost',`
			`},`
			`}`
✨(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			`})`