From af55992057fabe2d2a10f40684c0dbb1ae466d48 Mon Sep 17 00:00:00 2001 From: Jef Oliver Date: Tue, 24 Jan 2023 15:27:34 -0800 Subject: [PATCH] feat(config): Support Setting Base Path in .env MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 --- .env.local.example | 19 ++-- vite.config.ts | 261 +++++++++++++++++++++++---------------------- 2 files changed, 146 insertions(+), 134 deletions(-) diff --git a/.env.local.example b/.env.local.example index 1abd202a..9c738915 100644 --- a/.env.local.example +++ b/.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 \ No newline at end of file +# (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 \ No newline at end of file diff --git a/vite.config.ts b/vite.config.ts index b9963429..5308ee38 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,5 +1,5 @@ /// -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' @@ -49,136 +49,143 @@ function createFontMatcher(fontNames: string[]) { } // https://vitejs.dev/config/ -export default defineConfig({ - base: process.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 +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(), - ], - }, - }, - 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', - }, + 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, + ], + }, + }, + } })