DDEV config file to add chromium to an Apple Silicon machine. Useful when creating Critical CSS. See: https://nystudio107.com/docs/vite/#using-ddev

config.applesilicon.yaml

webimage_extra_packages:
  [
    gconf-service,
    libasound2,
    libatk1.0-0,
    libcairo2,
    libgconf-2-4,
    libgdk-pixbuf2.0-0,
    libgtk-3-0,
    libnspr4,
    libpango-1.0-0,
    libpangocairo-1.0-0,
    libx11-xcb1,
    libxcomposite1,
    libxcursor1,
    libxdamage1,
    libxfixes3,
    libxi6,
    libxrandr2,
    libxrender1,
    libxss1,
    libxtst6,
    fonts-liberation,
    libappindicator1,
    libnss3,
    xdg-utils,
    chromium
  ]
web_environment:
  - CPPFLAGS=-DPNG_ARM_NEON_OPT=0
  - PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium
  - PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true

config.yaml

name: example
type: craftcms
docroot: web
php_version: "8.2"
webserver_type: nginx-fpm
xdebug_enabled: false
additional_hostnames: []
additional_fqdns: []
database:
    type: mysql
    version: "8.0"
use_dns_when_possible: true
composer_version: "2"
web_environment:
    - MY_EXAMPLE=foobar
nodejs_version: "20"
corepack_enable: false

vite.config.mjs

// Sample vite config file
import { defineConfig } from 'vite'
import manifestSRI from 'vite-plugin-manifest-sri'
import path from 'path'
import viteCompression from 'vite-plugin-compression'
import ViteRestart from 'vite-plugin-restart'
import { ViteFaviconsPlugin } from 'vite-plugin-favicon2'
import { partytownVite } from '@builder.io/partytown/utils'
import critical from 'rollup-plugin-critical'

// https://vitejs.dev/config/
export default defineConfig(({ command }) => ({
  base: command === 'serve' ? '' : '/dist/',
  build: {
    commonjsOptions: {
      transformMixedEsModules: true
    },
    manifest: true,
    outDir: 'web/dist/',
    rollupOptions: {
      input: {
        app: 'src/js/app.ts'
      },
      output: {
        manualChunks: {
          'progressive-share-button': ['progressive-share-button'],
          videos: ['video.js']
        }
      }
    },
    build: {
      sourcemap: true
    }
  },
  plugins: [
    partytownVite({
      dest: path.resolve('web/dist/', '~partytown')
    }),
    manifestSRI(),
    viteCompression({
      filter: /\.(js|mjs|json|css|map)$/i
    }),
    ViteRestart({
      reload: ['templates/**/*']
    }),
    critical({
      criticalUrl: 'http://localhost/',
      criticalBase: './web/dist/criticalcss/',
      criticalPages: [
        { uri: '', template: 'index' },
        { uri: 'about', template: 'about/index' },
        { uri: 'contact', template: '_pages/basicPage' }
      ],
      criticalConfig: {
        rebase: {
          from: 'https://example.ddev.site/',
          to: '/'
        }
      }
    }),
    ViteFaviconsPlugin({
      logo: './src/img/favicon-src.png',
      inject: false,
      outputPath: 'favicons'
    })
  ],
  publicDir: path.resolve(__dirname, 'src/public'),
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@css': path.resolve(__dirname, 'src/css'),
      '@js': path.resolve(__dirname, 'src/js')
    }
  },
  server: {
    host: '0.0.0.0',
    port: 3000,
    strictPort: true
  }
}))