insta-recipe/vite.config.ts

import tailwindcss from '@tailwindcss/vite';
import { defineConfig } from 'vitest/config';
import { playwright } from '@vitest/browser-playwright';
import { sveltekit } from '@sveltejs/kit/vite';
import { SvelteKitPWA } from '@vite-pwa/sveltekit';
import fs from 'fs';

export default defineConfig({
    define: {
        'process.env.NODE_ENV': process.env.NODE_ENV === 'production' ? '"production"' : '"development"'
    },
    server: {
        watch: {
            ignored: ['**/debug_page.txt', '**/.ssl/**', '**/docs/**', '**/secrets/**']
        },
        https: {
            key: fs.readFileSync('./.ssl/localhost.key'),
            cert: fs.readFileSync('./.ssl/localhost.crt')
        }        
    },
	plugins: [
        SvelteKitPWA({
            srcDir: './src',
            mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
            strategies: 'injectManifest',
            filename: 'service-worker.ts',
            scope: '/',
            base: '/',
            selfDestroying: process.env.SELF_DESTROYING_SW === 'true',
            injectManifest: {
                swSrc: 'src/service-worker.ts',
                swDest: 'service-worker.js',
                injectionPoint: 'self.__WB_MANIFEST',
                // Additional build configuration for better reliability
                globPatterns: ['**/*.{js,css,html,ico,png,svg,webp,woff,woff2}'],
                maximumFileSizeToCacheInBytes: 4 * 1024 * 1024, // 4MB
                mode: process.env.NODE_ENV === 'production' ? 'production' : 'development'
            },
            manifest: {
                short_name: 'InstaChef',
                name: 'InstaChef Recipe Saver',
                start_url: '/',
                scope: '/',
                display: 'standalone',
                theme_color: "#ffffff",
                background_color: "#ffffff",
                icons: [
                    { src: '/favicon.png', sizes: '192x192', type: 'image/png' },
                    { src: '/favicon.png', sizes: '512x512', type: 'image/png' }
                ],
                share_target: {
                    action: '/share',
                    method: 'GET',
                    enctype: 'application/x-www-form-urlencoded',
                    params: { title: 'title', text: 'text', url: 'url' }
                }
            },
            workbox: {
                globPatterns: ['client/**/*.{js,css,ico,png,svg,webp,woff,woff2}'],
                cleanupOutdatedCaches: true,
                skipWaiting: false,  // Let service worker control this
                clientsClaim: false,  // Let service worker control this
                maximumFileSizeToCacheInBytes: 4 * 1024 * 1024, // 4MB
                runtimeCaching: [
                    {
                        urlPattern: /^https:\/\/api\./,
                        handler: 'NetworkFirst',
                        options: {
                            cacheName: 'api-cache',
                            networkTimeoutSeconds: 10
                        }
                    }
                ]
            },
            devOptions: {
                enabled: true,
                suppressWarnings: true,
                navigateFallback: '/',
                type: 'module'  // Support module service workers in development
            },
        }),tailwindcss(), sveltekit()],
	test: {
		expect: { requireAssertions: true },
		projects: [
			{
				extends: './vite.config.ts',
				test: {
					name: 'client',
					browser: {
						enabled: true,
						provider: playwright(),
						instances: [{ browser: 'chromium', headless: true }]
					},
					include: ['src/**/*.svelte.{test,spec}.{js,ts}'],
					exclude: ['src/lib/server/**']
				}
			},
			{
				extends: './vite.config.ts',
				test: {
					name: 'server',
					environment: 'node',
					include: ['src/**/*.{test,spec}.{js,ts}'],
					exclude: ['src/**/*.svelte.{test,spec}.{js,ts}']
				}
			}
		]
	}
});