fix env transformation during runtime

picture-gallery-client/.env

@@ -1,3 +1,4 @@
 # Set user specific variables
 VITE_TITLE=Simple Picture Gallery
 VITE_APPBAR_COLOR=#1976D2
+VITE_FAVICON_HREF=/favicon.ico

picture-gallery-client/.env.example

@@ -0,0 +1,4 @@
+# Set user specific variables
+VITE_TITLE=
+VITE_APPBAR_COLOR=
+VITE_FAVICON_HREF=

picture-gallery-client/index.html

@@ -30,7 +30,9 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-    <script src='/env.js'></script>
+    <script>
+      globalThis.import_meta_env = JSON.parse('"import_meta_env_placeholder"');
+    </script>
     <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>

picture-gallery-client/package.json

@@ -9,16 +9,18 @@
     "format:check": "prettier --check \"**/*.+(ts|tsx)\"",
     "lint": "eslint src/**",
     "lint:fix": "eslint --fix src/**",
-    "client:build": "vite build && npm run set-environment",
+    "client:build": "vite build",
     "client:run": "npm run client:build && npm run client:start",
     "client:start": "vite",
+    "preview": "vite preview",
     "client:test": "TODO",
-    "set-environment": "npx react-inject-env set",
     "test": "jest"
   },
   "dependencies": {
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
+    "@import-meta-env/unplugin": "^0.5.2",
+    "@import-meta-env/cli": "^0.6.9",
     "@mui/icons-material": "^5.16.7",
     "@mui/x-tree-view": "^7.12.1",
     "@mui/material": "^5.16.7",
@@ -26,6 +28,8 @@
     "@types/node": "^22.2.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "cross-env": "^7.0.3",
+    "dotenv": "^16.4.5",
     "eslint": "8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
@@ -38,7 +42,6 @@
     "react-dom": "^18.3.1",
     "react-photo-album": "^3.0.1",
     "react-router-dom": "^6.26.0",
-    "react-inject-env": "^2.1.0",
     "typescript": "^5.5.4",
     "web-vitals": "^4.2.3",
     "yet-another-react-lightbox": "^3.21.3"

picture-gallery-client/src/vite-env.d.ts

@@ -6,7 +6,6 @@ interface ImportMetaEnv {
   readonly VITE_FAVICON_HREF: string | undefined;
 }
 
-// eslint-disable-next-line no-unused-vars
 interface ImportMeta {
   readonly env: ImportMetaEnv;
 }

picture-gallery-client/vite.config.ts

@@ -2,6 +2,8 @@ import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import eslint from "vite-plugin-eslint";
 import viteTsconfigPaths from "vite-tsconfig-paths";
+// @ts-ignore
+import importMetaEnv from "@import-meta-env/unplugin";
 
 export default defineConfig(() => {
   return {
@@ -9,7 +11,12 @@ export default defineConfig(() => {
       outDir: "build",
       sourcemap: true,
     },
-    plugins: [react(), eslint(), viteTsconfigPaths()],
+    plugins: [
+      react(),
+      eslint(),
+      viteTsconfigPaths(),
+      importMetaEnv.vite({ example: ".env.example" }),
+    ],
     server: {
       proxy: {
         "/images": {