feat: .env mode (#51 by @Small-Systems)

Closes #50

README.md

@@ -194,6 +194,15 @@ cp .env.development.example .env
 
 Optionally, adapt it's values.
 
+Vite will load `.env` files according to the [docs](https://vitejs.dev/guide/env-and-mode.html#env-files):
+
+```
+.env                # loaded in all cases
+.env.local          # loaded in all cases, ignored by git
+.env.[mode]         # only loaded in specified mode
+.env.[mode].local   # only loaded in specified mode, ignored by git
+```
+
 ### Static assets
 
 _During development_ Kirby can't access static files located in the `src` folder. Therefore it's necessary to create a symbolic link inside of the public folder:

vite.config.js

@@ -1,46 +1,52 @@
-import "dotenv/config";
 import { resolve } from "path";
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 import Vue from "@vitejs/plugin-vue";
 import Components from "unplugin-vue-components/vite";
 
-process.env.VITE_BACKEND_URL = `${process.env.KIRBY_DEV_PROTOCOL}://${process.env.KIRBY_DEV_HOSTNAME}:${process.env.KIRBY_DEV_PORT}`;
-process.env.VITE_BACKEND_API_SLUG = process.env.CONTENT_API_SLUG;
-process.env.VITE_MULTILANG = process.env.KIRBY_MULTILANG;
-
 const root = "src";
 
-export default defineConfig(({ mode }) => ({
-  root,
-  base: mode === "development" ? "/" : "/dist/",
+export default defineConfig(({ mode }) => {
+  Object.assign(
+    process.env,
+    loadEnv(mode, process.cwd(), ["VITE_", "KIRBY_", "CONTENT_"])
+  );
+
+  process.env.VITE_BACKEND_URL = `${process.env.KIRBY_DEV_PROTOCOL}://${process.env.KIRBY_DEV_HOSTNAME}:${process.env.KIRBY_DEV_PORT}`;
+  process.env.VITE_BACKEND_API_SLUG = process.env.CONTENT_API_SLUG;
+  process.env.VITE_MULTILANG = process.env.KIRBY_MULTILANG;
+
+  return defineConfig({
+    root,
+    base: mode === "development" ? "/" : "/dist/",
+
+    resolve: {
+      alias: {
+        "~/": `${resolve(__dirname, root)}/`,
+      },
+    },
 
-  resolve: {
-    alias: {
-      "~/": `${resolve(__dirname, root)}/`,
+    build: {
+      outDir: resolve(__dirname, "public/dist"),
+      emptyOutDir: true,
+      manifest: true,
+      rollupOptions: {
+        input: resolve(root, "main.js"),
+      },
     },
-  },
-
-  build: {
-    outDir: resolve(__dirname, "public/dist"),
-    emptyOutDir: true,
-    manifest: true,
-    rollupOptions: {
-      input: resolve(root, "main.js"),
+
+    plugins: [
+      Vue(),
+
+      Components({
+        dirs: ["components"],
+      }),
+    ],
+
+    server: {
+      cors: true,
+      host: "0.0.0.0",
+      port: process.env.VITE_DEV_PORT,
+      strictPort: true,
     },
-  },
-
-  plugins: [
-    Vue(),
-
-    Components({
-      dirs: ["components"],
-    }),
-  ],
-
-  server: {
-    cors: true,
-    host: "0.0.0.0",
-    port: process.env.VITE_DEV_PORT,
-    strictPort: true,
-  },
-}));
+  });
+});