pleno-vue/vite.config.js

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import { viteSingleFile } from 'vite-plugin-singlefile'
import { VitePWA } from 'vite-plugin-pwa'
import VueJsx from '@vitejs/plugin-vue-jsx'
import { execSync } from 'node:child_process'

function getGitCommit() {
    try {
        return execSync('git rev-parse --short HEAD').toString().trim()
    } catch {
        return 'unknown'
    }
}

export default defineConfig(() => {
    // Set COMMIT_HASH env var for use in the app
    const version = process.env.npm_package_version || '0.0.0'
    const commit = getGitCommit()
    console.log(`Building version ${version} (commit: ${commit})`)
    process.env.COMMIT_HASH = commit
    process.env.APP_VERSION = version
    return {
        base: './',
        plugins: [
            vue(),
            VueJsx(),
            vueDevTools(),
            viteSingleFile(),
            VitePWA({
                registerType: 'autoUpdate',
                devOptions: {
                    enabled: true // keep for local dev; it's ok
                },
                workbox: {
                    maximumFileSizeToCacheInBytes: 12 * 1024 * 1024,
                    cleanupOutdatedCaches: true,
                    skipWaiting: true,
                    clientsClaim: true,
                    // Set the entire site to be precached (maximum for 24 hours).
                    globPatterns: ['**/*.{js,css,html,ico,svg,woff2}'],
                    globIgnores: ['**/registerSW.js', '**/sw.js'],
                    runtimeCaching: [
                        { // cache API responses
                            urlPattern: ({url}) => url.origin === 'https://api.truckwash.dk',
                            handler: 'NetworkFirst',
                            options: {
                                cacheName: 'pleno-api-cache',
                                expiration: {
                                    maxEntries: 50,
                                    maxAgeSeconds: 2, // 2 seconds
                                },
                                networkTimeoutSeconds: 10,
                                cacheableResponse: {
                                    statuses: [0, 200]
                                }
                            }
                        },
                        { // cache website assets
                            urlPattern: ({url}) => url.origin === 'https://truckwash.dk' || url.origin === 'https://www.truckwash.dk' || (origin.includes('http://localhost') || origin.includes('https://twdev.jeppeb.dk')),
                            handler: 'StaleWhileRevalidate',
                            options: {
                                cacheName: 'pleno-website-cache',
                                expiration: {
                                    maxEntries: 20,
                                    maxAgeSeconds: 24 * 60 * 60 // 24 hours
                                },
                                cacheableResponse: {
                                    statuses: [0, 200]
                                }
                            }
                        },
                        { // cache images
                            urlPattern: ({url}) => url.pathname.endsWith('.png') || url.pathname.endsWith('.jpg') || url.pathname.endsWith('.jpeg') || url.pathname.endsWith('.svg') || url.pathname.endsWith('.gif'),
                            handler: 'CacheFirst',
                            options: {
                                cacheName: 'pleno-image-cache',
                                expiration: {
                                    maxEntries: 50,
                                    maxAgeSeconds: 7 * 24 * 60 * 60 // 7 days
                                },
                                cacheableResponse: {
                                    statuses: [0, 200]
                                }
                            }
                        },
                        { // cache .html files
                            urlPattern: ({url}) => url.pathname.endsWith('.html'),
                            handler: 'NetworkFirst',
                            options: {
                                cacheName: 'pleno-html-cache',
                                expiration: {
                                    maxEntries: 10,
                                    maxAgeSeconds: 24 * 60 * 60 // 24 hours
                                },
                                networkTimeoutSeconds: 10,
                                cacheableResponse: {
                                    statuses: [0, 200]
                                }
                            }

                        }
                    ]
                },
                manifest: {
                    name: 'Pleno',
                    short_name: 'Pleno',
                    description: 'Access your Pleno accounts and transactions from anywhere.',
                    theme_color: '#063651',
                    background_color: '#0787bb',
                    // If you deploy at domain root, keep '/'.
                    // If you deploy under a subpath, change BOTH to '.' (relative scope).
                    start_url: '/',
                    scope: '/',
                    display: 'standalone',
                    orientation: 'portrait',
                    launch_handler: {client_mode: 'navigate-existing'},
                    icons: [
                        {src: '/icons/icon-192x192.png', sizes: '192x192', type: 'image/png'},
                        {src: '/icons/icon-512x512.png', sizes: '512x512', type: 'image/png'}
                    ],
                    id: 'pleno-pwa-test'
                }
            })
        ],
        resolve: {
            alias: {
                '@': fileURLToPath(new URL('./src', import.meta.url))
            }
        },
        define: {
            'import.meta.env.VITE_BUILD_DATE': JSON.stringify(new Date().toISOString()),
            'import.meta.env.VITE_APP_VERSION': JSON.stringify(process.env.APP_VERSION || '0.0.0'),
            'import.meta.env.VITE_COMMIT_HASH': JSON.stringify(process.env.COMMIT_HASH || 'dev'),
            'import.meta.env.VITE_IS_DEV': JSON.stringify(process.env.NODE_ENV !== 'production')
        },
    }
});