vite.config.js

import { globSync } from "glob";
import { resolve } from "path";
import { defineConfig } from "vite";
import kirby from "vite-plugin-kirby";
import tailwindcss from "@tailwindcss/vite";

// set port and origin for server config
const port = 5173;
const origin = `${process.env.DDEV_PRIMARY_URL}:${port}`;

// build directory
const outDir = 'build';
const assetsDir = 'assets';

// find all files from the assets directory
// app.css stays as an explicit entry so app styles and dependency CSS emit separately.
// PHP templates can reference images and fonts through vite().file(), so include them in the manifest.
const input = globSync([
  'assets/scripts/app.js',
  'assets/styles/app.css',
  'assets/{images,fonts}/**/*.*'
]).map((path) => resolve(process.cwd(), path));

export default defineConfig(({ mode }) => ({
  base: mode === 'development' ? '/' : `/${outDir}/`,

  build: {
    outDir,
    assetsDir,
    rollupOptions: {
      input,
      output: {
        chunkFileNames: 'scripts/[name]-[hash].js',
        entryFileNames: 'scripts/[name]-[hash].js',
        assetFileNames: (chunkInfo) => {
          const fileName = chunkInfo.names?.[0] ?? chunkInfo.originalFileNames?.[0] ?? '';

          if (/\.(gif|jpe?g|png|svg|webp|avif)$/i.test(fileName)) {
            return 'images/[name]-[hash][extname]';
          }

          if (/\.(woff2?|eot|ttf|otf)$/i.test(fileName)) {
            return 'fonts/[name]-[hash][extname]';
          }

          if (/\.css$/.test(fileName)) {
            return 'styles/[name]-[hash][extname]';
          }

          // default value
          // https://rollupjs.org/guide/en/#outputassetfilenames
          return '[name]-[hash][extname]';
        },
      }
    }
  },

  // adjust vite's dev server for ddev
  server: {
    // respond to all network requests:
    host: '0.0.0.0',
    port,
    strictPort: true,
    // defines the origin of the generated asset URLs during development
    origin,
    cors: true
  },

  plugins: [
    kirby({
      watch: [
        'site/(templates|snippets|controllers|models|collections)/**/*.php',
        'content/**/*',
      ]
    }),
    tailwindcss(),
  ]
}));