Add ability to use vite dev alongside the go backend

The point is to not have to rebuild every time to test a change, but make use of Vite's HMR and other goodies. Some things are not yet working in dev mode: - Upload is stuck and fails - Reloading page while on a file will give 404 error - Prob more that i didnt catch
2023-08-18 18:25:24 +02:00 · 2023-08-18 18:25:24 +02:00 · 8c60137fe4
commit 8c60137fe4
parent 74d15d08ad
10 changed files with 315 additions and 210 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@ -8,25 +8,19 @@
      content="width=device-width, initial-scale=1, user-scalable=no"
    />

-    [{[ if .ReCaptcha -]}]
-    <script src="[{[ .ReCaptchaHost ]}]/recaptcha/api.js?render=explicit"></script>
-    [{[ end ]}]
-
-    <title>
-      [{[ if .Name -]}][{[ .Name ]}][{[ else ]}]File Browser[{[ end ]}]
-    </title>
+    <title>File Browser</title>

    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
-      href="[{[ .StaticURL ]}]/img/icons/favicon-32x32.png"
+      href="/img/icons/favicon-32x32.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="16x16"
-      href="[{[ .StaticURL ]}]/img/icons/favicon-16x16.png"
+      href="/img/icons/favicon-16x16.png"
    />

    <!-- Add to home screen for Android and modern mobile browsers -->
@ -35,49 +29,63 @@
      id="manifestPlaceholder"
      crossorigin="use-credentials"
    />
-    <meta
-      name="theme-color"
-      content="[{[ if .Color -]}][{[ .Color ]}][{[ else ]}]#2979ff[{[ end ]}]"
-    />
+    <meta name="theme-color" content="#2979ff" />

    <!-- Add to home screen for Safari on iOS/iPadOS -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-mobile-web-app-title" content="assets" />
-    <link
-      rel="apple-touch-icon"
-      href="[{[ .StaticURL ]}]/img/icons/apple-touch-icon.png"
-    />
+    <link rel="apple-touch-icon" href="/img/icons/apple-touch-icon.png" />

    <!-- Add to home screen for Windows -->
    <meta
      name="msapplication-TileImage"
-      content="[{[ .StaticURL ]}]/img/icons/mstile-144x144.png"
-    />
-    <meta
-      name="msapplication-TileColor"
-      content="[{[ if .Color -]}][{[ .Color ]}][{[ else ]}]#2979ff[{[ end ]}]"
+      content="/img/icons/mstile-144x144.png"
    />
+    <meta name="msapplication-TileColor" content="#2979ff" />

    <!-- Inject Some Variables and generate the manifest json -->
    <script>
-      <!-- Json is actually a JS object, assign it directly -->
-      window.FileBrowser = [{[ .Json ]}];
-      <!-- Global function to prepend static url -->
+      // We can assign JSON directly
+      window.FileBrowser = {
+        AuthMethod: "json",
+        BaseURL: "http://localhost:8080",
+        CSS: false,
+        Color: "",
+        DisableExternal: false,
+        DisableUsedPercentage: false,
+        EnableExec: true,
+        EnableThumbs: true,
+        LoginPage: true,
+        Name: "",
+        NoAuth: false,
+        ReCaptcha: false,
+        ResizePreview: true,
+        Signup: false,
+        StaticURL: "",
+        Theme: "",
+        TusSettings: { chunkSize: 10485760, retryCount: 5 },
+        Version: "(untracked)",
+      };
+      // Global function to prepend static url
      window.__prependStaticUrl = (url) => {
-        return `${window.FileBrowser.StaticURL}/${url.replace(/^\/+/, '')}`;
+        return `${window.FileBrowser.StaticURL}/${url.replace(/^\/+/, "")}`;
      };
      var dynamicManifest = {
        name: window.FileBrowser.Name || "File Browser",
        short_name: window.FileBrowser.Name || "File Browser",
        icons: [
          {
-            src: window.__prependStaticUrl("/img/icons/android-chrome-192x192.png"),
+            src: window.__prependStaticUrl(
+              "/img/icons/android-chrome-192x192.png"
+            ),
            sizes: "192x192",
            type: "image/png",
          },
          {
-            src: window.__prependStaticUrl("/img/icons/android-chrome-512x512.png"),
+            src: window.__prependStaticUrl(
+              "/img/icons/android-chrome-512x512.png"
+            ),
            sizes: "512x512",
            type: "image/png",
          },
@ -180,14 +188,5 @@
    </div>

    <script type="module" src="/src/main.js"></script>
-
-    [{[ if .Theme -]}]
-    <link
-      rel="stylesheet"
-      href="[{[ .StaticURL ]}]/themes/[{[ .Theme ]}].css"
-    />
-    [{[ end ]}] [{[ if .CSS -]}]
-    <link rel="stylesheet" href="[{[ .StaticURL ]}]/custom.css" />
-    [{[ end ]}]
  </body>
 </html>
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@ -1,63 +1,99 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, user-scalable=no"
+    />

    [{[ if .ReCaptcha -]}]
    <script src="[{[ .ReCaptchaHost ]}]/recaptcha/api.js?render=explicit"></script>
    [{[ end ]}]

-  <title>[{[ if .Name -]}][{[ .Name ]}][{[ else ]}]File Browser[{[ end ]}]</title>
+    <title>
+      [{[ if .Name -]}][{[ .Name ]}][{[ else ]}]File Browser[{[ end ]}]
+    </title>

-  <link rel="icon" type="image/png" sizes="32x32" href="[{[ .StaticURL ]}]/img/icons/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="[{[ .StaticURL ]}]/img/icons/favicon-16x16.png">
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="[{[ .StaticURL ]}]/img/icons/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="[{[ .StaticURL ]}]/img/icons/favicon-16x16.png"
+    />

    <!-- Add to home screen for Android and modern mobile browsers -->
-  <link rel="manifest" id="manifestPlaceholder" crossorigin="use-credentials">
-  <meta name="theme-color" content="[{[ if .Color -]}][{[ .Color ]}][{[ else ]}]#2979ff[{[ end ]}]">
+    <link
+      rel="manifest"
+      id="manifestPlaceholder"
+      crossorigin="use-credentials"
+    />
+    <meta
+      name="theme-color"
+      content="[{[ if .Color -]}][{[ .Color ]}][{[ else ]}]#2979ff[{[ end ]}]"
+    />

    <!-- Add to home screen for Safari on iOS/iPadOS -->
-  <meta name="apple-mobile-web-app-capable" content="yes">
-  <meta name="apple-mobile-web-app-status-bar-style" content="black">
-  <meta name="apple-mobile-web-app-title" content="assets">
-  <link rel="apple-touch-icon" href="[{[ .StaticURL ]}]/img/icons/apple-touch-icon.png">
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+    <meta name="apple-mobile-web-app-title" content="assets" />
+    <link
+      rel="apple-touch-icon"
+      href="[{[ .StaticURL ]}]/img/icons/apple-touch-icon.png"
+    />

    <!-- Add to home screen for Windows -->
-  <meta name="msapplication-TileImage" content="[{[ .StaticURL ]}]/img/icons/mstile-144x144.png">
-  <meta name="msapplication-TileColor" content="[{[ if .Color -]}][{[ .Color ]}][{[ else ]}]#2979ff[{[ end ]}]">
+    <meta
+      name="msapplication-TileImage"
+      content="[{[ .StaticURL ]}]/img/icons/mstile-144x144.png"
+    />
+    <meta
+      name="msapplication-TileColor"
+      content="[{[ if .Color -]}][{[ .Color ]}][{[ else ]}]#2979ff[{[ end ]}]"
+    />

    <!-- Inject Some Variables and generate the manifest json -->
    <script>
-    window.FileBrowser = JSON.parse('[{[ .Json ]}]');
-
-    var fullStaticURL = window.location.origin + window.FileBrowser.StaticURL;
+      // We can assign JSON directly
+      window.FileBrowser = [{[ .Json ]}];
+      // Global function to prepend static url
+      window.__prependStaticUrl = (url) => {
+        return `${window.FileBrowser.StaticURL}/${url.replace(/^\/+/, "")}`;
+      };
      var dynamicManifest = {
-      "name": window.FileBrowser.Name || 'File Browser',
-      "short_name": window.FileBrowser.Name || 'File Browser',
-      "icons": [
+        name: window.FileBrowser.Name || "File Browser",
+        short_name: window.FileBrowser.Name || "File Browser",
+        icons: [
          {
-          "src": fullStaticURL + "/img/icons/android-chrome-192x192.png",
-          "sizes": "192x192",
-          "type": "image/png"
+            src: window.__prependStaticUrl("/img/icons/android-chrome-192x192.png"),
+            sizes: "192x192",
+            type: "image/png",
          },
          {
-          "src": fullStaticURL + "/img/icons/android-chrome-512x512.png",
-          "sizes": "512x512",
-          "type": "image/png"
-        }
+            src: window.__prependStaticUrl("/img/icons/android-chrome-512x512.png"),
+            sizes: "512x512",
+            type: "image/png",
+          },
        ],
-      "start_url": window.location.origin + window.FileBrowser.BaseURL,
-      "display": "standalone",
-      "background_color": "#ffffff",
-      "theme_color": window.FileBrowser.Color || "#455a64"
-    }
+        start_url: window.location.origin + window.FileBrowser.BaseURL,
+        display: "standalone",
+        background_color: "#ffffff",
+        theme_color: window.FileBrowser.Color || "#455a64",
+      };

      const stringManifest = JSON.stringify(dynamicManifest);
-    const blob = new Blob([stringManifest], {type: 'application/json'});
+      const blob = new Blob([stringManifest], { type: "application/json" });
      const manifestURL = URL.createObjectURL(blob);
-    document.querySelector('#manifestPlaceholder').setAttribute('href', manifestURL);
+      document
+        .querySelector("#manifestPlaceholder")
+        .setAttribute("href", manifestURL);
    </script>

    <style>
@ -69,8 +105,8 @@
        height: 100%;
        background: #fff;
        z-index: 9999;
-    transition: .1s ease opacity;
-    -webkit-transition: .1s ease opacity;
+        transition: 0.1s ease opacity;
+        -webkit-transition: 0.1s ease opacity;
      }

      #loading.done {
@ -108,22 +144,31 @@
      }

      @-webkit-keyframes sk-bouncedelay {
-    0%, 80%, 100% { -webkit-transform: scale(0) }
-    40% { -webkit-transform: scale(1.0) }
+        0%,
+        80%,
+        100% {
+          -webkit-transform: scale(0);
+        }
+        40% {
+          -webkit-transform: scale(1);
+        }
      }

      @keyframes sk-bouncedelay {
-    0%, 80%, 100% {
+        0%,
+        80%,
+        100% {
          -webkit-transform: scale(0);
          transform: scale(0);
-    } 40% {
-      -webkit-transform: scale(1.0);
-      transform: scale(1.0);
+        }
+        40% {
+          -webkit-transform: scale(1);
+          transform: scale(1);
        }
      }
    </style>
-</head>
-<body>
+  </head>
+  <body>
    <div id="app"></div>

    <div id="loading">
@ -134,11 +179,15 @@
      </div>
    </div>

+    <script type="module" src="/src/main.js"></script>
+
    [{[ if .Theme -]}]
-    <link rel="stylesheet" href="[{[ .StaticURL ]}]/themes/[{[ .Theme ]}].css" />
-  [{[ end ]}]
-  [{[ if .CSS -]}]
+    <link
+      rel="stylesheet"
+      href="[{[ .StaticURL ]}]/themes/[{[ .Theme ]}].css"
+    />
+    [{[ end ]}] [{[ if .CSS -]}]
    <link rel="stylesheet" href="[{[ .StaticURL ]}]/custom.css" />
    [{[ end ]}]
-</body>
+  </body>
 </html>
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@ -33,7 +33,7 @@ const titles = {
 };

 const router = new Router({
-  base: baseURL,
+  base: import.meta.env.PROD ? baseURL : "",
  mode: "history",
  routes: [
    {
--- a/frontend/src/utils/auth.js
+++ b/frontend/src/utils/auth.js
@ -1,7 +1,7 @@
 import store from "@/store";
 import router from "@/router";
 import { Base64 } from "js-base64";
-import { baseURL } from "@/utils/constants";
+import { fetchURL } from "@/api/utils";

 export function parseToken(token) {
  const parts = token.split(".");
@ -25,20 +25,24 @@ export async function validateLogin() {
      await renew(localStorage.getItem("jwt"));
    }
  } catch (_) {
-    console.warn('Invalid JWT token in storage') // eslint-disable-line
+    console.warn("Invalid JWT token in storage"); // eslint-disable-line
  }
 }

 export async function login(username, password, recaptcha) {
  const data = { username, password, recaptcha };

-  const res = await fetch(`${baseURL}/api/login`, {
+  const res = await fetchURL(
+    `/api/login`,
+    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
-  });
+    },
+    false
+  );

  const body = await res.text();

@ -50,7 +54,7 @@ export async function login(username, password, recaptcha) {
 }

 export async function renew(jwt) {
-  const res = await fetch(`${baseURL}/api/renew`, {
+  const res = await fetchURL(`/api/renew`, {
    method: "POST",
    headers: {
      "X-Auth": jwt,
@ -69,13 +73,17 @@ export async function renew(jwt) {
 export async function signup(username, password) {
  const data = { username, password };

-  const res = await fetch(`${baseURL}/api/signup`, {
+  const res = await fetchURL(
+    `/api/signup`,
+    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
-  });
+    },
+    false
+  );

  if (res.status !== 200) {
    throw new Error(res.status);
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@ -5,23 +5,44 @@ import legacy from "@vitejs/plugin-legacy";
 import vue2 from "@vitejs/plugin-vue2";
 import { compression } from "vite-plugin-compression2";

-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
+const plugins = [
  vue2(),
  legacy({
    targets: ["ie >= 11"],
    additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
  }),
  compression({ include: /\.js$/i, deleteOriginalAssets: true }),
-  ],
-  resolve: {
+];
+
+const resolve = {
  alias: {
    vue: "vue/dist/vue.esm.js",
    "@/": fileURLToPath(new URL("./src/", import.meta.url)),
  },
-  },
+};
+
+// https://vitejs.dev/config/
+export default defineConfig(({ command }) => {
+  if (command === "serve") {
+    return {
+      plugins,
+      resolve,
+    };
+  } else {
+    // command === 'build'
+    return {
+      plugins,
+      resolve,
      base: "",
+      build: {
+        rollupOptions: {
+          input: {
+            index: fileURLToPath(
+              new URL(`./public/index.html`, import.meta.url)
+            ),
+          },
+        },
+      },
      experimental: {
        renderBuiltUrl(filename, { hostType }) {
          if (hostType === "js") {
@ -33,4 +54,6 @@ export default defineConfig({
          }
        },
      },
+    };
+  }
 });
--- a/http/data.go
+++ b/http/data.go
@ -49,7 +49,9 @@ func (d *data) Check(path string) bool {

 func handle(fn handleFunc, prefix string, store *storage.Storage, server *settings.Server) http.Handler {
 	handler := http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
-		w.Header().Set("Cache-Control", "no-cache, no-store, must-revalidate")
+		for k, v := range global_headers {
+			w.Header().Set(k, v)
+		}

 		settings, err := store.Settings.Get()
 		if err != nil {
--- a/http/headers.go
+++ b/http/headers.go
@ -0,0 +1,9 @@
+//go:build !dev
+// +build !dev
+
+package http
+
+// global headers to append to every response
+var global_headers = map[string]string{
+	"Cache-Control": "no-cache, no-store, must-revalidate",
+}
--- a/http/headers_dev.go
+++ b/http/headers_dev.go
@ -0,0 +1,15 @@
+//go:build dev
+// +build dev
+
+package http
+
+// global headers to append to every response
+// cross-origin headers are necessary to be able to
+// access them from a different URL during development
+var global_headers = map[string]string{
+	"Cache-Control":                    "no-cache, no-store, must-revalidate",
+	"Access-Control-Allow-Origin":      "*",
+	"Access-Control-Allow-Headers":     "*",
+	"Access-Control-Allow-Methods":     "*",
+	"Access-Control-Allow-Credentials": "true",
+}
--- a/http/http.go
+++ b/http/http.go
@ -27,7 +27,7 @@ func NewHandler(
 	r := mux.NewRouter()
 	r.Use(func(next http.Handler) http.Handler {
 		return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
-			w.Header().Set("Content-Security-Policy", `default-src 'self'; style-src 'unsafe-inline';`)
+			// w.Header().Set("Content-Security-Policy", `default-src 'self'; style-src 'unsafe-inline';`)
 			next.ServeHTTP(w, r)
 		})
 	})
--- a/http/static.go
+++ b/http/static.go
@ -105,7 +105,7 @@ func getStaticHandlers(store *storage.Storage, server *settings.Server, assetsFs
 		}

 		w.Header().Set("x-xss-protection", "1; mode=block")
-		return handleWithStaticData(w, r, d, assetsFs, "index.html", "text/html; charset=utf-8")
+		return handleWithStaticData(w, r, d, assetsFs, "public/index.html", "text/html; charset=utf-8")
 	}, "", store, server)

 	static = handle(func(w http.ResponseWriter, r *http.Request, d *data) (int, error) {