Use .env mode files, and kirby in subfolder

README.md

@@ -194,6 +194,16 @@ 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
+```
+
+Kirby will only load the main .env file
+
 ### 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:

package.json

@@ -21,7 +21,6 @@
     "@types/node": "^18.7.18",
     "@vitejs/plugin-vue": "^3.1.0",
     "concurrently": "^7.4.0",
-    "dotenv": "^16.0.2",
     "env-cmd": "^10.1.0",
     "eslint": "^8.23.1",
     "eslint-config-prettier": "^8.5.0",

site/plugins/kirby-vue-kit/classes/VueKit.php

@@ -8,18 +8,23 @@
 use Kirby\Filesystem\F;
 use Kirby\Toolkit\Html;
 
-class VueKit
-{
+class VueKit {
     protected static \JohannSchopplich\VueKit\VueKit $instance;
     protected static array $site;
     protected static array $manifest;
 
+    /**
+      * If Kirby is in a subdirectory, return the subdirectory name
+    */
+    protected function subDirectory(): string {
+      return str_replace(Url::stripPath(), '', Url::index());
+    }
+
     /**
      * Checks for development mode by either `KIRBY_MODE` env var or
      * if a `.lock` file in `/src` exists
      */
-    protected function isDev(): bool
-    {
+    protected function isDev(): bool {
         if (env('KIRBY_MODE') === 'development') {
             return true;
         }
@@ -31,8 +36,7 @@ protected function isDev(): bool
     /**
      * Gets the site data
      */
-    public function getSite(): array
-    {
+    public function getSite(): array {
         return static::$site ??= require kirby()->root('config') . '/app-site.php';
     }
 
@@ -41,8 +45,7 @@ public function getSite(): array
      *
      * @throws Exception
      */
-    protected function getManifest(): array|null
-    {
+    protected function getManifest(): array|null {
         if (isset(static::$manifest)) {
             return static::$manifest;
         }
@@ -63,26 +66,23 @@ protected function getManifest(): array|null
     /**
      * Gets the URL for the specified file in development mode
      */
-    protected function assetDev(string $file): string
-    {
+    protected function assetDev(string $file): string {
         return option('johannschopplich.kirby-vue-kit.devServer') . '/' . $file;
     }
 
     /**
      * Gets the URL for the specified file in production mode
      */
-    protected function assetProd(string $file): string
-    {
-        return '/' . option('johannschopplich.kirby-vue-kit.outDir') . '/' . $file;
+    protected function assetProd(string $file): string {
+        return option('johannschopplich.kirby-vue-kit.outDir') . '/' . $file;
     }
 
     /**
      * Includes the CSS file for the specified entry in production mode
      *
      * @throws Exception
      */
-    public function css(string $entry = 'main.js')
-    {
+    public function css(string $entry = 'main.js') {
         if (!$this->isDev()) {
             return css($this->assetProd($this->getManifest()[$entry]['css'][0]));
         }
@@ -93,8 +93,7 @@ public function css(string $entry = 'main.js')
      *
      * @throws Exception
      */
-    public function js(string $entry = 'main.js'): string|null
-    {
+    public function js(string $entry = 'main.js'): string|null {
         $file = $this->isDev()
             ? $this->assetDev($entry)
             : $this->assetProd($this->getManifest()[$entry]['file']);
@@ -105,13 +104,12 @@ public function js(string $entry = 'main.js'): string|null
     /**
      * Preloads the JSON-encoded page data for a given page
      */
-    public function preloadJson(string $name): string
-    {
+    public function preloadJson(string $name): string {
         $base = kirby()->multilang() ? '/' . kirby()->languageCode() : '';
 
         return Html::tag('link', '', [
             'rel' => 'preload',
-            'href' => $base . '/' . Url::path(env('CONTENT_API_SLUG')) . '/' . $name . '.json',
+            'href' => $this->subDirectory() . $base . '/' . Url::path(env('CONTENT_API_SLUG')) . '/' . $name . '.json',
             'as' => 'fetch',
             'type' => 'application/json',
             'crossorigin' => 'anonymous'
@@ -121,8 +119,7 @@ public function preloadJson(string $name): string
     /**
      * Preloads the view module for a given page, e.g. `Home.e701bdef.js`
      */
-    public function preloadModule(string $name): string|null
-    {
+    public function preloadModule(string $name): string|null {
         if ($this->isDev()) {
             return null;
         }
@@ -132,20 +129,18 @@ public function preloadModule(string $name): string|null
             fn ($i) => str_ends_with($i, ucfirst($name) . '.vue'),
             ARRAY_FILTER_USE_KEY
         );
-
         return !empty($match)
             ? Html::tag('link', '', [
                 'rel' => 'modulepreload',
-                'href' => '/' . option('johannschopplich.kirby-vue-kit.outDir') . '/' . array_values($match)[0]['file']
+                'href' => $this->subDirectory() . '/' . option('johannschopplich.kirby-vue-kit.outDir') . '/' . array_values($match)[0]['file']
             ])
             : null;
     }
 
     /**
      * Gets the instance via lazy initialization
      */
-    public static function instance(): \JohannSchopplich\VueKit\VueKit
-    {
+    public static function instance(): \JohannSchopplich\VueKit\VueKit {
         return static::$instance ??= new static();
     }
 }

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 ({ 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,
-  },
-}));
+  });
+};