Fix up Vite env port handling

Author: sfc-gh-bnisco

cookiecutter/{{ cookiecutter.package_name }}/{{ cookiecutter.import_name }}/frontend-react/.env

@@ -1,3 +1,3 @@
 # Run the component's dev server on :3001
 # (The Streamlit dev server already runs on :3000)
-PORT=3001
+VITE_PORT=3001

cookiecutter/{{ cookiecutter.package_name }}/{{ cookiecutter.import_name }}/frontend-react/vite.config.ts

@@ -1,18 +1,24 @@
-import { defineConfig, UserConfig } from "vite"
+import { defineConfig, loadEnv, UserConfig } from "vite"
 import react from "@vitejs/plugin-react-swc"
 
 /**
  * Vite configuration for Streamlit React Component development
  *
  * @see https://vitejs.dev/config/ for complete Vite configuration options
  */
-export default defineConfig({
-  base: "./",
-  plugins: [react()],
-  server: {
-    port: process.env.PORT ? parseInt(process.env.PORT) : 3001,
-  },
-  build: {
-    outDir: "build",
-  },
-}) satisfies UserConfig
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd())
+
+  const port = env.VITE_PORT ? parseInt(env.VITE_PORT) : 3001
+
+  return {
+    base: "./",
+    plugins: [react()],
+    server: {
+      port,
+    },
+    build: {
+      outDir: "build",
+    },
+  } satisfies UserConfig
+})

cookiecutter/{{ cookiecutter.package_name }}/{{ cookiecutter.import_name }}/frontend-reactless/.env

@@ -1,3 +1,3 @@
 # Run the component's dev server on :3001
 # (The Streamlit dev server already runs on :3000)
-PORT=3001
+VITE_PORT=3001

cookiecutter/{{ cookiecutter.package_name }}/{{ cookiecutter.import_name }}/frontend-reactless/vite.config.ts

@@ -1,16 +1,24 @@
-import { defineConfig, UserConfig } from "vite"
+import { defineConfig, loadEnv, UserConfig } from "vite"
+import react from "@vitejs/plugin-react-swc"
 
 /**
- * Vite configuration for Streamlit Component development
+ * Vite configuration for Streamlit React Component development
  *
  * @see https://vitejs.dev/config/ for complete Vite configuration options
  */
-export default defineConfig({
-  base: "./",
-  server: {
-    port: process.env.PORT ? parseInt(process.env.PORT) : 3001,
-  },
-  build: {
-    outDir: "build",
-  },
-}) satisfies UserConfig
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd())
+
+  const port = env.VITE_PORT ? parseInt(env.VITE_PORT) : 3001
+
+  return {
+    base: "./",
+    plugins: [react()],
+    server: {
+      port,
+    },
+    build: {
+      outDir: "build",
+    },
+  } satisfies UserConfig
+})

examples/CustomDataframe/custom_dataframe/frontend/.env

@@ -1,3 +1,3 @@
 # Run the component's dev server on :3001
 # (The Streamlit dev server already runs on :3000)
-PORT=3001
+VITE_PORT=3001

examples/CustomDataframe/custom_dataframe/frontend/vite.config.ts

@@ -1,18 +1,24 @@
-import { defineConfig, UserConfig } from "vite"
+import { defineConfig, loadEnv, UserConfig } from "vite"
 import react from "@vitejs/plugin-react-swc"
 
 /**
  * Vite configuration for Streamlit React Component development
  *
  * @see https://vitejs.dev/config/ for complete Vite configuration options
  */
-export default defineConfig({
-  base: "./",
-  plugins: [react()],
-  server: {
-    port: process.env.PORT ? parseInt(process.env.PORT) : 3001,
-  },
-  build: {
-    outDir: "build",
-  },
-}) satisfies UserConfig
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd())
+
+  const port = env.VITE_PORT ? parseInt(env.VITE_PORT) : 3001
+
+  return {
+    base: "./",
+    plugins: [react()],
+    server: {
+      port,
+    },
+    build: {
+      outDir: "build",
+    },
+  } satisfies UserConfig
+})

examples/MaterialLogin/material_login/frontend/.env

@@ -1,3 +1,3 @@
 # Run the component's dev server on :3001
 # (The Streamlit dev server already runs on :3000)
-PORT=3001
+VITE_PORT=3001

examples/MaterialLogin/material_login/frontend/vite.config.ts

@@ -1,18 +1,24 @@
-import { defineConfig, UserConfig } from "vite"
+import { defineConfig, loadEnv, UserConfig } from "vite"
 import react from "@vitejs/plugin-react-swc"
 
 /**
  * Vite configuration for Streamlit React Component development
  *
  * @see https://vitejs.dev/config/ for complete Vite configuration options
  */
-export default defineConfig({
-  base: "./",
-  plugins: [react()],
-  server: {
-    port: process.env.PORT ? parseInt(process.env.PORT) : 3001,
-  },
-  build: {
-    outDir: "build",
-  },
-}) satisfies UserConfig
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd())
+
+  const port = env.VITE_PORT ? parseInt(env.VITE_PORT) : 3001
+
+  return {
+    base: "./",
+    plugins: [react()],
+    server: {
+      port,
+    },
+    build: {
+      outDir: "build",
+    },
+  } satisfies UserConfig
+})

examples/RadioButton/radio_button/frontend/.env

@@ -1,3 +1,3 @@
 # Run the component's dev server on :3001
 # (The Streamlit dev server already runs on :3000)
-PORT=3001
+VITE_PORT=3001

examples/RadioButton/radio_button/frontend/vite.config.ts

@@ -1,18 +1,24 @@
-import { defineConfig, UserConfig } from "vite"
+import { defineConfig, loadEnv, UserConfig } from "vite"
 import react from "@vitejs/plugin-react-swc"
 
 /**
  * Vite configuration for Streamlit React Component development
  *
  * @see https://vitejs.dev/config/ for complete Vite configuration options
  */
-export default defineConfig({
-  base: "./",
-  plugins: [react()],
-  server: {
-    port: process.env.PORT ? parseInt(process.env.PORT) : 3001,
-  },
-  build: {
-    outDir: "build",
-  },
-}) satisfies UserConfig
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd())
+
+  const port = env.VITE_PORT ? parseInt(env.VITE_PORT) : 3001
+
+  return {
+    base: "./",
+    plugins: [react()],
+    server: {
+      port,
+    },
+    build: {
+      outDir: "build",
+    },
+  } satisfies UserConfig
+})