From 8c60137fe4275eb61b42603ed45410512ce62c01 Mon Sep 17 00:00:00 2001 From: Kloon ImKloon Date: Fri, 18 Aug 2023 18:25:24 +0200 Subject: [PATCH] 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 --- frontend/index.html | 73 +++++---- frontend/public/index.html | 303 ++++++++++++++++++++--------------- frontend/src/router/index.js | 2 +- frontend/src/utils/auth.js | 38 +++-- frontend/vite.config.js | 77 +++++---- http/data.go | 4 +- http/headers.go | 9 ++ http/headers_dev.go | 15 ++ http/http.go | 2 +- http/static.go | 2 +- 10 files changed, 315 insertions(+), 210 deletions(-) create mode 100644 http/headers.go create mode 100644 http/headers_dev.go diff --git a/frontend/index.html b/frontend/index.html index a201a6c9..c82cfcf7 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -8,25 +8,19 @@ content="width=device-width, initial-scale=1, user-scalable=no" /> - [{[ if .ReCaptcha -]}] - - [{[ end ]}] - - - [{[ if .Name -]}][{[ .Name ]}][{[ else ]}]File Browser[{[ end ]}] - + File Browser @@ -35,49 +29,63 @@ id="manifestPlaceholder" crossorigin="use-credentials" /> - + - + - + - - [{[ if .Theme -]}] - - [{[ end ]}] [{[ if .CSS -]}] - - [{[ end ]}] diff --git a/frontend/public/index.html b/frontend/public/index.html index d6986bf1..39d926d8 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -1,144 +1,193 @@ - + - - - - + + + + - [{[ if .ReCaptcha -]}] + [{[ if .ReCaptcha -]}] - [{[ end ]}] + [{[ end ]}] - [{[ if .Name -]}][{[ .Name ]}][{[ else ]}]File Browser[{[ end ]}] + + [{[ if .Name -]}][{[ .Name ]}][{[ else ]}]File Browser[{[ end ]}] + - - + + - - - + + + - - - - - + + + + + - - - + + + - - + + + + +
- - - -
- -
- - [{[ if .Theme -]}] - - [{[ end ]}] - [{[ if .CSS -]}] + + + [{[ if .Theme -]}] + + [{[ end ]}] [{[ if .CSS -]}] - [{[ end ]}] - + [{[ end ]}] + diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js index abeae705..be30026a 100644 --- 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: [ { diff --git a/frontend/src/utils/auth.js b/frontend/src/utils/auth.js index 31cb57c4..d29890cd 100644 --- 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`, { - method: "POST", - headers: { - "Content-Type": "application/json", + const res = await fetchURL( + `/api/login`, + { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(data), }, - 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`, { - method: "POST", - headers: { - "Content-Type": "application/json", + const res = await fetchURL( + `/api/signup`, + { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(data), }, - body: JSON.stringify(data), - }); + false + ); if (res.status !== 200) { throw new Error(res.status); diff --git a/frontend/vite.config.js b/frontend/vite.config.js index 7c2e0f76..301e293c 100644 --- a/frontend/vite.config.js +++ b/frontend/vite.config.js @@ -5,32 +5,55 @@ import legacy from "@vitejs/plugin-legacy"; import vue2 from "@vitejs/plugin-vue2"; import { compression } from "vite-plugin-compression2"; +const plugins = [ + vue2(), + legacy({ + targets: ["ie >= 11"], + additionalLegacyPolyfills: ["regenerator-runtime/runtime"], + }), + compression({ include: /\.js$/i, deleteOriginalAssets: true }), +]; + +const resolve = { + alias: { + vue: "vue/dist/vue.esm.js", + "@/": fileURLToPath(new URL("./src/", import.meta.url)), + }, +}; + // https://vitejs.dev/config/ -export default defineConfig({ - plugins: [ - vue2(), - legacy({ - targets: ["ie >= 11"], - additionalLegacyPolyfills: ["regenerator-runtime/runtime"], - }), - compression({ include: /\.js$/i, deleteOriginalAssets: true }), - ], - resolve: { - alias: { - vue: "vue/dist/vue.esm.js", - "@/": fileURLToPath(new URL("./src/", import.meta.url)), - }, - }, - base: "", - experimental: { - renderBuiltUrl(filename, { hostType }) { - if (hostType === "js") { - return { runtime: `window.__prependStaticUrl("${filename}")` }; - } else if (hostType === "html") { - return `[{[ .StaticURL ]}]/${filename}`; - } else { - return { relative: true }; - } - }, - }, +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") { + return { runtime: `window.__prependStaticUrl("${filename}")` }; + } else if (hostType === "html") { + return `[{[ .StaticURL ]}]/${filename}`; + } else { + return { relative: true }; + } + }, + }, + }; + } }); diff --git a/http/data.go b/http/data.go index 37345d3c..5a72ef8a 100644 --- 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 { diff --git a/http/headers.go b/http/headers.go new file mode 100644 index 00000000..b1e56308 --- /dev/null +++ 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", +} diff --git a/http/headers_dev.go b/http/headers_dev.go new file mode 100644 index 00000000..bdd93f35 --- /dev/null +++ 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", +} diff --git a/http/http.go b/http/http.go index 70d7d9d1..ae0b7bb6 100644 --- 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) }) }) diff --git a/http/static.go b/http/static.go index 75c6a4fe..9d1a0d35 100644 --- 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) {