forked from vikunja/frontend
fix(base): Use Build Time Base Path
* If a base path is provided at build time, use it. * Base path can be set with `VIKUNJA_FRONTEND_BASE` at build time * `VIKUNJA_FRONTEND_BASE` sets `import.meta.env.BASE_URL` after Vite resolves it. * Usages of `import.meta.env.BASE_URL` are statically replaced at build time. * If base path is not provided, `import.meta.env.BASE_URL` defaults to '/'. * Documentation: https://vitejs.dev/guide/env-and-mode.html * Fixes: * Manifest not loading because of incorrect path. * Service Worker not loading because path is incorrect in manifest. * Service Worker crashing because import of workbox is from wrong path. * Service Worker not loading a task because path is incorrect in event listener. * Incorrect URLs being set on window because base path is incorrect. * ex: `/login` vs `/base/login` Signed-off-by: Jef Oliver <jef@eljef.me>
This commit is contained in:
parent
81a4f2d977
commit
e92559dc00
14
src/helpers/getFullBaseUrl.ts
Normal file
14
src/helpers/getFullBaseUrl.ts
Normal file
|
@ -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 + '/'
|
||||||
|
}
|
|
@ -2,8 +2,10 @@
|
||||||
|
|
||||||
import {register} from 'register-service-worker'
|
import {register} from 'register-service-worker'
|
||||||
|
|
||||||
|
import {getFullBaseUrl} from './helpers/getFullBaseUrl'
|
||||||
|
|
||||||
if (import.meta.env.PROD) {
|
if (import.meta.env.PROD) {
|
||||||
register('/sw.js', {
|
register(getFullBaseUrl() + 'sw.js', {
|
||||||
ready() {
|
ready() {
|
||||||
console.log('App is being served from cache by a service worker.')
|
console.log('App is being served from cache by a service worker.')
|
||||||
},
|
},
|
||||||
|
|
|
@ -81,7 +81,7 @@ const EditTeamComponent = () => import('@/views/teams/EditTeam.vue')
|
||||||
const NewTeamComponent = () => import('@/views/teams/NewTeam.vue')
|
const NewTeamComponent = () => import('@/views/teams/NewTeam.vue')
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
history: createWebHistory(),
|
history: createWebHistory(import.meta.env.BASE_URL),
|
||||||
scrollBehavior(to, from, savedPosition) {
|
scrollBehavior(to, from, savedPosition) {
|
||||||
// If the user is using their forward/backward keys to navigate, we want to restore the scroll view
|
// If the user is using their forward/backward keys to navigate, we want to restore the scroll view
|
||||||
if (savedPosition) {
|
if (savedPosition) {
|
||||||
|
|
12
src/sw.ts
12
src/sw.ts
|
@ -1,10 +1,16 @@
|
||||||
/* eslint-disable no-console */
|
/* eslint-disable no-console */
|
||||||
/* eslint-disable no-undef */
|
/* eslint-disable no-undef */
|
||||||
|
|
||||||
|
import {getFullBaseUrl} from './helpers/getFullBaseUrl'
|
||||||
|
|
||||||
|
declare let self: ServiceWorkerGlobalScope
|
||||||
|
|
||||||
|
const fullBaseUrl = getFullBaseUrl()
|
||||||
const workboxVersion = 'v6.5.4'
|
const workboxVersion = 'v6.5.4'
|
||||||
importScripts( `/workbox-${workboxVersion}/workbox-sw.js`)
|
|
||||||
|
importScripts(`${fullBaseUrl}workbox-${workboxVersion}/workbox-sw.js`)
|
||||||
workbox.setConfig({
|
workbox.setConfig({
|
||||||
modulePathPrefix: `/workbox-${workboxVersion}`,
|
modulePathPrefix: `${fullBaseUrl}workbox-${workboxVersion}`,
|
||||||
debug: Boolean(import.meta.env.VITE_WORKBOX_DEBUG),
|
debug: Boolean(import.meta.env.VITE_WORKBOX_DEBUG),
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -47,7 +53,7 @@ self.addEventListener('notificationclick', function (event) {
|
||||||
|
|
||||||
switch (event.action) {
|
switch (event.action) {
|
||||||
case 'show-task':
|
case 'show-task':
|
||||||
clients.openWindow(`/tasks/${taskId}`)
|
clients.openWindow(`${fullBaseUrl}tasks/${taskId}`)
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"composite": true,
|
"composite": true,
|
||||||
"baseUrl": ".",
|
"baseUrl": ".",
|
||||||
"lib": ["ESNext"],
|
"lib": ["ESNext", "DOM", "WebWorker"],
|
||||||
|
|
||||||
"importHelpers": true,
|
"importHelpers": true,
|
||||||
"sourceMap": true,
|
"sourceMap": true,
|
||||||
|
|
|
@ -2,8 +2,8 @@
|
||||||
import {defineConfig, type PluginOption} from 'vite'
|
import {defineConfig, type PluginOption} from 'vite'
|
||||||
import vue from '@vitejs/plugin-vue'
|
import vue from '@vitejs/plugin-vue'
|
||||||
import legacyFn from '@vitejs/plugin-legacy'
|
import legacyFn from '@vitejs/plugin-legacy'
|
||||||
import { URL, fileURLToPath } from 'node:url'
|
import {URL, fileURLToPath} from 'node:url'
|
||||||
import { dirname, resolve } from 'node:path'
|
import {dirname, resolve} from 'node:path'
|
||||||
|
|
||||||
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
|
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
|
||||||
import {VitePWA} from 'vite-plugin-pwa'
|
import {VitePWA} from 'vite-plugin-pwa'
|
||||||
|
@ -50,6 +50,7 @@ function createFontMatcher(fontNames: string[]) {
|
||||||
|
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
|
base: process.env.VIKUNJA_FRONTEND_BASE,
|
||||||
// https://vitest.dev/config/
|
// https://vitest.dev/config/
|
||||||
test: {
|
test: {
|
||||||
environment: 'happy-dom',
|
environment: 'happy-dom',
|
||||||
|
@ -97,7 +98,6 @@ export default defineConfig({
|
||||||
VitePWA({
|
VitePWA({
|
||||||
srcDir: 'src',
|
srcDir: 'src',
|
||||||
filename: 'sw.ts',
|
filename: 'sw.ts',
|
||||||
base: '/',
|
|
||||||
strategies: 'injectManifest',
|
strategies: 'injectManifest',
|
||||||
injectRegister: false,
|
injectRegister: false,
|
||||||
manifest: {
|
manifest: {
|
||||||
|
|
Loading…
Reference in New Issue
Block a user