feat(config): Support Setting Base Path in .env

* This uses loadEnv to load an environment file at configuration
  time.
  * Documentation:
    * https://vitejs.dev/config/#environment-variables
  * More on environment files:
    * https://vitejs.dev/guide/env-and-mode.html
  * `VIKUNJA_FRONTEND_BASE` is the variable in the environment
     file that will be used to set Vite’s base option.
* This adds a commented example to .env.local.example

Signed-off-by: Jef Oliver <jef@eljef.me>

.env.local.example

@@ -1,8 +1,13 @@
-# Duplicate this file and remove the '.example' suffix.
-# Adjust the values as needed.
+# (1) Duplicate this file and remove the '.example' suffix.
+# Naming this file '.env.local' is a Vite convention to prevent accidentally
+# submitting to git.
+# For more info see: https://vitejs.dev/guide/env-and-mode.html#env-files
 
-VITE_IS_ONLINE=true
-VITE_WORKBOX_DEBUG=false
-SENTRY_AUTH_TOKEN=YOUR_TOKEN
-SENTRY_ORG=vikunja
-SENTRY_PROJECT=frontend-oss
+# (2) Comment in and adjust the values as needed.
+
+# VITE_IS_ONLINE=true
+# VITE_WORKBOX_DEBUG=false
+# SENTRY_AUTH_TOKEN=YOUR_TOKEN
+# SENTRY_ORG=vikunja
+# SENTRY_PROJECT=frontend-oss
+# VIKUNJA_FRONTEND_BASE=/custom-subpath

package.json

@@ -53,13 +53,13 @@
     "@infectoone/vue-ganttastic": "2.1.4",
     "@intlify/unplugin-vue-i18n": "0.8.1",
     "@kyvg/vue3-notification": "2.8.0",
-    "@sentry/tracing": "7.35.0",
-    "@sentry/vue": "7.35.0",
+    "@sentry/tracing": "7.36.0",
+    "@sentry/vue": "7.36.0",
     "@types/is-touch-device": "1.0.0",
     "@types/lodash.clonedeep": "4.5.7",
     "@types/sortablejs": "1.15.0",
     "@vueuse/core": "9.12.0",
-    "axios": "1.3.0",
+    "axios": "1.3.1",
     "blurhash": "2.0.4",
     "bulma-css-variables": "0.9.33",
     "camel-case": "4.1.2",
@@ -84,7 +84,7 @@
     "snake-case": "3.0.4",
     "sortablejs": "1.15.0",
     "ufo": "1.0.1",
-    "vue": "3.2.45",
+    "vue": "3.2.47",
     "vue-advanced-cropper": "2.8.8",
     "vue-flatpickr-component": "11.0.1",
     "vue-i18n": "9.2.2",
@@ -110,16 +110,16 @@
     "@types/postcss-preset-env": "7.7.0",
     "@typescript-eslint/eslint-plugin": "5.50.0",
     "@typescript-eslint/parser": "5.50.0",
-    "@vitejs/plugin-legacy": "3.0.2",
+    "@vitejs/plugin-legacy": "4.0.1",
     "@vitejs/plugin-vue": "4.0.0",
     "@vue/eslint-config-typescript": "11.0.2",
-    "@vue/test-utils": "2.2.8",
+    "@vue/test-utils": "2.2.9",
     "@vue/tsconfig": "0.1.3",
     "autoprefixer": "10.4.13",
     "browserslist": "4.21.4",
     "caniuse-lite": "1.0.30001449",
     "csstype": "3.1.1",
-    "cypress": "12.5.0",
+    "cypress": "12.5.1",
     "esbuild": "0.17.5",
     "eslint": "8.33.0",
     "eslint-plugin-vue": "9.9.0",
@@ -129,13 +129,13 @@
     "postcss": "8.4.21",
     "postcss-easing-gradients": "3.0.1",
     "postcss-easings": "3.0.1",
-    "postcss-preset-env": "7.8.3",
+    "postcss-preset-env": "8.0.1",
     "rollup": "3.12.1",
     "rollup-plugin-visualizer": "5.9.0",
     "sass": "1.58.0",
     "start-server-and-test": "1.15.3",
     "typescript": "4.9.5",
-    "vite": "4.0.4",
+    "vite": "4.1.1",
     "vite-plugin-inject-preload": "1.2.0",
     "vite-plugin-pwa": "0.14.1",
     "vite-svg-loader": "4.0.0",

src/helpers/getFullBaseUrl.ts

@@ -0,0 +1,14 @@
+/**
+ * Get full BASE_URL
+ * - including path
+ * - will always end with a trailing slash 
+ */
+export function getFullBaseUrl() {
+	// (1) The injected BASE_URL is declared from the `resolvedBase` that might miss a trailing slash...
+	// see: https://github.com/vitejs/vite/blob/b35fe883fdc699ac1450882562872095abe9959b/packages/vite/src/node/config.ts#LL614C25-L614C25
+	const rawBase = import.meta.env.BASE_URL
+	// (2) so we readd a slash like done here
+	// https://github.com/vitejs/vite/blob/b35fe883fdc699ac1450882562872095abe9959b/packages/vite/src/node/config.ts#L643
+	// See this comment: https://github.com/vitejs/vite/pull/10723#issuecomment-1303627478
+	return rawBase.endsWith('/') ? rawBase : rawBase + '/'
+}

src/registerServiceWorker.ts

@@ -2,8 +2,10 @@
 
 import {register} from 'register-service-worker'
 
+import {getFullBaseUrl} from './helpers/getFullBaseUrl'
+
 if (import.meta.env.PROD) {
-	register('/sw.js', {
+	register(getFullBaseUrl() + 'sw.js', {
 		ready() {
 			console.log('App is being served from cache by a service worker.')
 		},

src/router/index.ts

@@ -81,7 +81,7 @@ const EditTeamComponent = () => import('@/views/teams/EditTeam.vue')
 const NewTeamComponent = () =>  import('@/views/teams/NewTeam.vue')
 
 const router = createRouter({
-	history: createWebHistory(),
+	history: createWebHistory(import.meta.env.BASE_URL),
 	scrollBehavior(to, from, savedPosition) {
 		// If the user is using their forward/backward keys to navigate, we want to restore the scroll view
 		if (savedPosition) {

src/sw.ts

@@ -1,10 +1,16 @@
 /* eslint-disable no-console */
 /* eslint-disable no-undef */
 
+import {getFullBaseUrl} from './helpers/getFullBaseUrl'
+
+declare let self: ServiceWorkerGlobalScope
+
+const fullBaseUrl = getFullBaseUrl()
 const workboxVersion = 'v6.5.4'
-importScripts( `/workbox-${workboxVersion}/workbox-sw.js`)
+
+importScripts(`${fullBaseUrl}workbox-${workboxVersion}/workbox-sw.js`)
 workbox.setConfig({
-	modulePathPrefix: `/workbox-${workboxVersion}`,
+	modulePathPrefix: `${fullBaseUrl}workbox-${workboxVersion}`,
 	debug: Boolean(import.meta.env.VITE_WORKBOX_DEBUG),
 })
 
@@ -47,7 +53,7 @@ self.addEventListener('notificationclick', function (event) {
 
 	switch (event.action) {
 		case 'show-task':
-			clients.openWindow(`/tasks/${taskId}`)
+			clients.openWindow(`${fullBaseUrl}tasks/${taskId}`)
 			break
 	}
 })

tsconfig.app.json

@@ -5,7 +5,7 @@
   "compilerOptions": {
     "composite": true,
     "baseUrl": ".",
-    "lib": ["ESNext"],
+    "lib": ["ESNext", "DOM", "WebWorker"],
 
     "importHelpers": true,
     "sourceMap": true,

vite.config.ts

@@ -1,14 +1,14 @@
 /// <reference types="vitest" />
-import {defineConfig, type PluginOption} from 'vite'
+import {defineConfig, type PluginOption, loadEnv} from 'vite'
 import vue from '@vitejs/plugin-vue'
 import legacyFn from '@vitejs/plugin-legacy'
-import { URL, fileURLToPath } from 'node:url'
-import { dirname, resolve } from 'node:path'
+import {URL, fileURLToPath} from 'node:url'
+import {dirname, resolve} from 'node:path'
 
 import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
-import {VitePWA}  from 'vite-plugin-pwa'
+import {VitePWA} from 'vite-plugin-pwa'
 import VitePluginInjectPreload from 'vite-plugin-inject-preload'
-import {visualizer}  from 'rollup-plugin-visualizer'
+import {visualizer} from 'rollup-plugin-visualizer'
 import svgLoader from 'vite-svg-loader'
 import postcssPresetEnv from 'postcss-preset-env'
 import postcssEasings from 'postcss-easings'
@@ -41,7 +41,7 @@ function createFontMatcher(fontNames: string[]) {
 	// The `match` option for the files of VitePluginInjectPreload
 	// matches the _output_ files.
 	// Since we only want to mach variable fonts, we exploit here the fact
-	// that we added the `wght` term to indicate the variable weiht axis.
+	// that we added the `wght` term to indicate the variable weight axis.
 	// The format is something like:
 	// `/assets/OpenSans-Italic_wght__c9a8fe68-5f21f1e7.woff2`
 	// see: https://regex101.com/r/UgUWr1/1
@@ -49,146 +49,143 @@ function createFontMatcher(fontNames: string[]) {
 }
 
 // https://vitejs.dev/config/
-export default defineConfig({
-	// https://vitest.dev/config/
-	test: {
-		environment: 'happy-dom',
-	},
-	css: {
-		preprocessorOptions: {
-			scss: {
-				additionalData: PREFIXED_SCSS_STYLES,
-				charset: false, // fixes  "@charset" must be the first rule in the file" warnings
+export default defineConfig(({mode}) => {
+	// Load env file based on `mode` in the current working directory.
+	// Set the third parameter to '' to load all env regardless of the `VITE_` prefix.
+	// https://vitejs.dev/config/#environment-variables
+	const env = loadEnv(mode, process.cwd(), '')
+
+	return {
+		base: env.VIKUNJA_FRONTEND_BASE,
+		// https://vitest.dev/config/
+		test: {
+			environment: 'happy-dom',
+		},
+		css: {
+			preprocessorOptions: {
+				scss: {
+					additionalData: PREFIXED_SCSS_STYLES,
+					charset: false, // fixes  "@charset" must be the first rule in the file" warnings
+				},
 			},
-		},
-		postcss: {
-			plugins: [
-				postcssEasings(),
-				postcssEasingGradients(),
-				postcssPresetEnv({
-					// These plugins are enabled by default but require
-					// a polyfill that we don't include
-					// see also './src/polyfills.ts'
-					features: {
-						'blank-pseudo-class': false,
-						'focus-visible-pseudo-class': false,
-						'has-pseudo-class': false,
-						'prefers-color-scheme-query': false,
-					},
-				}),
-			],
-		},
-	},
-	plugins: [
-		vue({
-			reactivityTransform: true,
-		}),
-		legacy,
-		svgLoader({
-			// Since the svgs are already manually optimized via https://jakearchibald.github.io/svgomg/
-			// we don't need to optimize them again.
-			svgo: false,
-		}),
-		VueI18nPlugin({
-			// TODO: only install needed stuff
-			// Whether to install the full set of APIs, components, etc. provided by Vue I18n.
-			// By default, all of them will be installed.
-			fullInstall: true,
-			include: resolve(dirname(pathSrc), './src/i18n/lang/**'),
-		}),
-		// https://github.com/Applelo/vite-plugin-inject-preload
-		VitePluginInjectPreload({
-			files: [{
-				match: createFontMatcher(['Quicksand', 'OpenSans', 'OpenSans-Italic']),
-				attributes: {crossorigin: 'anonymous'},
-			}],
-			injectTo: 'custom',
-		}),
-		VitePWA({
-			srcDir: 'src',
-			filename: 'sw.ts',
-			base: '/',
-			strategies: 'injectManifest',
-			injectRegister: false,
-			manifest: {
-				name: 'Vikunja',
-				short_name: 'Vikunja',
-				theme_color: '#1973ff',
-				icons: [
-					{
-						src: './images/icons/android-chrome-192x192.png',
-						sizes: '192x192',
-						type: 'image/png',
-					},
-					{
-						src: './images/icons/android-chrome-512x512.png',
-						sizes: '512x512',
-						type: 'image/png',
-					},
-					{
-						src: './images/icons/icon-maskable.png',
-						sizes: '1024x1024',
-						type: 'image/png',
-						purpose: 'maskable',
-					},
-				],
-				start_url: '.',
-				display: 'standalone',
-				background_color: '#000000',
-				shortcuts: [
-					{
-						name: 'Overview',
-						url: '/',
-					},
-					{
-						name: 'Namespaces And Lists Overview',
-						short_name: 'Namespaces & Lists',
-						url: '/namespaces',
-					},
-					{
-						name: 'Tasks Next Week',
-						short_name: 'Next Week',
-						url: '/tasks/by/week',
-					},
-					{
-						name: 'Tasks Next Month',
-						short_name: 'Next Month',
-						url: '/tasks/by/month',
-					},
-					{
-						name: 'Teams Overview',
-						short_name: 'Teams',
-						url: '/teams',
-					},
+			postcss: {
+				plugins: [
+					postcssEasings(),
+					postcssEasingGradients(),
+					postcssPresetEnv(),
 				],
 			},
-		}),
-	],
-	resolve: {
-		alias: [
-			{
-				find: '@',
-				replacement: pathSrc,
-			},
+		},
+		plugins: [
+			vue({
+				reactivityTransform: true,
+			}),
+			legacy,
+			svgLoader({
+				// Since the svgs are already manually optimized via https://jakearchibald.github.io/svgomg/
+				// we don't need to optimize them again.
+				svgo: false,
+			}),
+			VueI18nPlugin({
+				// TODO: only install needed stuff
+				// Whether to install the full set of APIs, components, etc. provided by Vue I18n.
+				// By default, all of them will be installed.
+				fullInstall: true,
+				include: resolve(dirname(pathSrc), './src/i18n/lang/**'),
+			}),
+			// https://github.com/Applelo/vite-plugin-inject-preload
+			VitePluginInjectPreload({
+				files: [{
+					match: createFontMatcher(['Quicksand', 'OpenSans', 'OpenSans-Italic']),
+					attributes: {crossorigin: 'anonymous'},
+				}],
+				injectTo: 'custom',
+			}),
+			VitePWA({
+				srcDir: 'src',
+				filename: 'sw.ts',
+				strategies: 'injectManifest',
+				injectRegister: false,
+				manifest: {
+					name: 'Vikunja',
+					short_name: 'Vikunja',
+					theme_color: '#1973ff',
+					icons: [
+						{
+							src: './images/icons/android-chrome-192x192.png',
+							sizes: '192x192',
+							type: 'image/png',
+						},
+						{
+							src: './images/icons/android-chrome-512x512.png',
+							sizes: '512x512',
+							type: 'image/png',
+						},
+						{
+							src: './images/icons/icon-maskable.png',
+							sizes: '1024x1024',
+							type: 'image/png',
+							purpose: 'maskable',
+						},
+					],
+					start_url: '.',
+					display: 'standalone',
+					background_color: '#000000',
+					shortcuts: [
+						{
+							name: 'Overview',
+							url: '/',
+						},
+						{
+							name: 'Namespaces And Lists Overview',
+							short_name: 'Namespaces & Lists',
+							url: '/namespaces',
+						},
+						{
+							name: 'Tasks Next Week',
+							short_name: 'Next Week',
+							url: '/tasks/by/week',
+						},
+						{
+							name: 'Tasks Next Month',
+							short_name: 'Next Month',
+							url: '/tasks/by/month',
+						},
+						{
+							name: 'Teams Overview',
+							short_name: 'Teams',
+							url: '/teams',
+						},
+					],
+				},
+			}),
 		],
-		extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
-	},
-	server: {
-		host: '127.0.0.1', // see: https://github.com/vitejs/vite/pull/8543
-		port: 4173,
-		strictPort: true,
-	},
-	build: {
-		target: 'esnext',
-		rollupOptions: {
-			plugins: [
-				visualizer({
-					filename: 'stats.html',
-					gzipSize: true,
-					// template: 'sunburst',
-					// brotliSize: true,
-				}) as PluginOption,
+		resolve: {
+			alias: [
+				{
+					find: '@',
+					replacement: pathSrc,
+				},
 			],
+			extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
 		},
-	},
+		server: {
+			host: '127.0.0.1', // see: https://github.com/vitejs/vite/pull/8543
+			port: 4173,
+			strictPort: true,
+		},
+		build: {
+			target: 'esnext',
+			rollupOptions: {
+				plugins: [
+					visualizer({
+						filename: 'stats.html',
+						gzipSize: true,
+						// template: 'sunburst',
+						// brotliSize: true,
+					}) as PluginOption,
+				],
+			},
+		},
+	}
 })