webapp/vite.events.config.ts

import { fileURLToPath, URL } from 'node:url'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'
import { defineConfig, type Plugin } from 'vite'
import { VitePWA } from 'vite-plugin-pwa'
import { ViteImageOptimizer } from 'vite-plugin-image-optimizer'
import { visualizer } from 'rollup-plugin-visualizer'
import {
  brand,
  brandAlias,
  brandAppBannerAliasEntry,
  brandAppLogoAliasEntry,
  brandAssetsPlugin,
  brandHubLogoAliasEntry,
  brandManifestName,
  resolveAppBanner,
} from './vite-branding'

/**
 * Plugin to rewrite dev server requests to events.html
 * (SPA fallback for the standalone events app entry point)
 */
function eventsHtmlPlugin(): Plugin {
  return {
    name: 'events-html-rewrite',
    configureServer(server) {
      server.middlewares.use((req, _res, next) => {
        // Rewrite all non-asset requests to events.html.
        // Strip query before checking for an extension — JWTs (e.g. ?token=...)
        // contain dots and would otherwise get mistaken for an asset request.
        const path = req.url ? req.url.split('?')[0] : ''
        if (
          req.url &&
          !req.url.startsWith('/@') &&
          !req.url.startsWith('/src/') &&
          !req.url.startsWith('/node_modules/') &&
          !path.includes('.')
        ) {
          req.url = '/events.html'
        }
        next()
      })
    },
  }
}

/**
 * Vite config for the standalone events app.
 *
 * Set VITE_BASE_PATH to deploy under a path prefix:
 *   VITE_BASE_PATH=/events/ → app.ariege.io/events/ (shared auth)
 *   (default: /)            → bouge.ariege.io (standalone subdomain)
 *
 * Brand name resolves from brand.json under $BRAND_DIR (see
 * vite-branding.ts and aiolabs/webapp#95). Surfaced into Vite's HTML
 * env-var substitution as VITE_APP_NAME for templated titles.
 */
const APP_NAME = brandManifestName()
process.env.VITE_APP_NAME = APP_NAME

// When the active brand ships a banner (wide logo+wordmark lockup), the
// events header renders it in place of the logo + name pair. Surfaced as
// a '1'/'' flag the component reads; the actual file comes through the
// @brand-app-banner alias below. See branding/README.md.
process.env.VITE_APP_BANNER = resolveAppBanner('events') ? '1' : ''

export default defineConfig(({ mode }) => ({
  base: process.env.VITE_BASE_PATH || '/',
  // Per-app dep cache so concurrent dev servers don't race on .vite/deps
  cacheDir: 'node_modules/.vite-events',
  server: {
    port: 5181,
    strictPort: true,
  },
  plugins: [
    brandAssetsPlugin(),
    eventsHtmlPlugin(),
    vue(),
    tailwindcss(),
    VitePWA({
      registerType: 'autoUpdate',
      devOptions: {
        enabled: false,
      },
      workbox: {
        globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
        // Scope the service worker to only handle requests within this app's path
        navigateFallback: 'events.html',
        navigateFallbackAllowlist: [
          new RegExp(`^${(process.env.VITE_BASE_PATH || '/').replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}`),
        ],
      },
      includeAssets: [
        'icons/favicon.ico',
        'icons/apple-touch-icon.png',
        'icons/icon-192.png',
        'icons/icon-512.png',
        'icons/icon-maskable-192.png',
        'icons/icon-maskable-512.png',
      ],
      manifest: {
        name: APP_NAME,
        short_name: brand.shortName ?? APP_NAME,
        description: 'Discover events near you',
        theme_color: brand.themeColor ?? '#1f2937',
        background_color: brand.backgroundColor ?? '#ffffff',
        display: 'standalone',
        orientation: 'portrait-primary',
        start_url: process.env.VITE_BASE_PATH || '/',
        scope: process.env.VITE_BASE_PATH || '/',
        id: 'aiolabs-events',
        categories: ['social', 'entertainment', 'lifestyle'],
        icons: [
          { src: 'icons/icon-192.png', sizes: '192x192', type: 'image/png', purpose: 'any' },
          { src: 'icons/icon-512.png', sizes: '512x512', type: 'image/png', purpose: 'any' },
          { src: 'icons/icon-maskable-192.png', sizes: '192x192', type: 'image/png', purpose: 'maskable' },
          { src: 'icons/icon-maskable-512.png', sizes: '512x512', type: 'image/png', purpose: 'maskable' },
        ],
      },
    }),
    ViteImageOptimizer({
      jpg: { quality: 80 },
      png: { quality: 80 },
      webp: { lossless: true },
    }),
    mode === 'analyze' &&
      visualizer({
        open: true,
        filename: 'dist-events/stats.html',
        gzipSize: true,
        brotliSize: true,
      }),
  ],
  resolve: {
    // Array form so we can mix the per-standalone logo regex (needs to
    // match `@brand-app-logo?url` query suffix) with the bare string
    // aliases without one shadowing the other.
    alias: [
      brandAppLogoAliasEntry('events'),
      brandAppBannerAliasEntry('events'),
      brandHubLogoAliasEntry(),
      ...Object.entries(brandAlias).map(([find, replacement]) => ({ find, replacement })),
      { find: '@', replacement: fileURLToPath(new URL('./src', import.meta.url)) },
    ],
  },
  build: {
    outDir: 'dist-events',
    rollupOptions: {
      input: 'events.html',
      output: {
        manualChunks: {
          'vue-vendor': ['vue', 'vue-router', 'pinia'],
          'ui-vendor': ['radix-vue', '@vueuse/core'],
          'shadcn': ['class-variance-authority', 'clsx', 'tailwind-merge'],
        },
      },
    },
    chunkSizeWarningLimit: 1000,
  },
}))