use vite env

example.env

@@ -1,3 +1,4 @@
 # make sure the cors proxy url does NOT have a slash at the end
 VITE_CORS_PROXY_URL=...
 VITE_TMDB_READ_API_KEY=...
+VITE_APP_DOMAIN="http://localhost:5173"

package.json

@@ -13,7 +13,6 @@
     "core-js": "^3.29.1",
     "crypto-js": "^4.1.1",
     "dompurify": "^3.0.1",
-    "dotenv": "^16.3.1",
     "fscreen": "^1.2.0",
     "fuse.js": "^6.4.6",
     "hls.js": "^1.0.7",

vite.config.ts

@@ -5,98 +5,99 @@ import { VitePWA } from "vite-plugin-pwa";
 import checker from "vite-plugin-checker";
 import path from "path";
 import { handlebars } from "./plugins/handlebars";
-import dotenv from 'dotenv';
-dotenv.config();
+import { loadEnv } from "vite"
 
-export default defineConfig({
-  plugins:[
-    handlebars({
-      vars: {
-        appdomain: process.env.APP_DOMAIN,
-      },
-    }),
-    react({
-      babel: {
-        presets: [
-          "@babel/preset-typescript",
-          [
-            "@babel/preset-env",
-            {
-              modules: false,
-              useBuiltIns: "entry",
-              corejs: {
-                version: "3.29",
-              },
-            },
-          ],
-        ],
-      },
-    }),
-    VitePWA({
-      registerType: "autoUpdate",
-      workbox: {
-        globIgnores: ["**ping.txt**"],
-      },
-      includeAssets: [
-        "favicon.ico",
-        "apple-touch-icon.png",
-        "safari-pinned-tab.svg",
-      ],
-      manifest: {
-        name: "movie-web",
-        short_name: "movie-web",
-        description: "The place for your favourite movies & shows",
-        theme_color: "#120f1d",
-        background_color: "#120f1d",
-        display: "standalone",
-        start_url: "/",
-        icons: [
-          {
-            src: "android-chrome-192x192.png",
-            sizes: "192x192",
-            type: "image/png",
-            purpose: "any",
-          },
-          {
-            src: "android-chrome-512x512.png",
-            sizes: "512x512",
-            type: "image/png",
-            purpose: "any",
-          },
-          {
-            src: "android-chrome-192x192.png",
-            sizes: "192x192",
-            type: "image/png",
-            purpose: "maskable",
-          },
-          {
-            src: "android-chrome-512x512.png",
-            sizes: "512x512",
-            type: "image/png",
-            purpose: "maskable",
-          },
-        ],
-      },
-    }),
-    loadVersion(),
-    checker({
-      typescript: true, // check typescript build errors in dev server
-      eslint: {
-        // check lint errors in dev server
-        lintCommand: "eslint --ext .tsx,.ts src",
-        dev: {
-          logLevel: ["error"],
-        },
-      },
-    }),
-  ],
-  resolve: {
-    alias: {
-      "@": path.resolve(__dirname, "./src"),
-    },
-  },
+export default defineConfig(({ mode }) => {
+	return {
+	  plugins:[
+		handlebars({
+		vars: {
+			appdomain: loadEnv(mode, process.cwd()).VITE_APP_DOMAIN,
+		},
+		}),
+		react({
+		babel: {
+			presets: [
+			"@babel/preset-typescript",
+			[
+				"@babel/preset-env",
+				{
+				modules: false,
+				useBuiltIns: "entry",
+				corejs: {
+					version: "3.29",
+				},
+				},
+			],
+			],
+		},
+		}),
+		VitePWA({
+		registerType: "autoUpdate",
+		workbox: {
+			globIgnores: ["**ping.txt**"],
+		},
+		includeAssets: [
+			"favicon.ico",
+			"apple-touch-icon.png",
+			"safari-pinned-tab.svg",
+		],
+		manifest: {
+			name: "movie-web",
+			short_name: "movie-web",
+			description: "The place for your favourite movies & shows",
+			theme_color: "#120f1d",
+			background_color: "#120f1d",
+			display: "standalone",
+			start_url: "/",
+			icons: [
+			{
+				src: "android-chrome-192x192.png",
+				sizes: "192x192",
+				type: "image/png",
+				purpose: "any",
+			},
+			{
+				src: "android-chrome-512x512.png",
+				sizes: "512x512",
+				type: "image/png",
+				purpose: "any",
+			},
+			{
+				src: "android-chrome-192x192.png",
+				sizes: "192x192",
+				type: "image/png",
+				purpose: "maskable",
+			},
+			{
+				src: "android-chrome-512x512.png",
+				sizes: "512x512",
+				type: "image/png",
+				purpose: "maskable",
+			},
+			],
+		},
+		}),
+		loadVersion(),
+		checker({
+		typescript: true, // check typescript build errors in dev server
+		eslint: {
+			// check lint errors in dev server
+			lintCommand: "eslint --ext .tsx,.ts src",
+			dev: {
+			logLevel: ["error"],
+			},
+		},
+		}),
+	],
+	resolve: {
+		alias: {
+		"@": path.resolve(__dirname, "./src"),
+		},
+	},
 
-  test: {
-    environment: "jsdom",
-  },
+	test: {
+		environment: "jsdom",
+	},
+	};
 });

yarn.lock

@@ -2448,11 +2448,6 @@ dompurify@^3.0.1:
   resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.0.2.tgz#bc4c7c011c825e7704341a285461d8d407d9429a"
   integrity sha512-B8c6JdiEpxAKnd8Dm++QQxJL4lfuc757scZtcapj6qjTjrQzyq5iAyznLKVvK+77eYNiFblHBlt7MM0fOeqoKw==
 
-dotenv@^16.3.1:
-  version "16.3.1"
-  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.3.1.tgz#369034de7d7e5b120972693352a3bf112172cc3e"
-  integrity sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==
-
 eastasianwidth@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"