README

This module helps you to use vite in your Silverstripe project. When you have a normal vite build, you have hashed filenames. This module helps you to get the correct file names from the manifest.json.

Installation

composer require atwx/silverstripe-vitehelper

Usage

In your template, you can use the following code

    $ViteClient.RAW
    <link rel="stylesheet" href="$Vite("app/client/src/scss/main.scss")">
    <script type="module" src="$Vite("app/client/src/js/main.js")"></script>

The $ViteClient.RAW will load the vite client. This is needed for the dev server. The $Vite will get the correct file name for the given input file from the manifest.json.

Configuration

You can configure the location of the build files in your mysite.yml:

Atwx\ViteHelper\Helper\ViteHelper:
    manifest_path: "/app/client/dist/.vite/manifest.json"  # default
    output_url: "/app/client/dist/"  # default

The manifest_path is the path to the manifest file generated by vite. The output_url is the url to the output folder. It will be prepended with the resources folder name, normally _resources.

Dev Mode

To use vite in dev mode, set the dev server url in your .env:

VITE_DEV_SERVER_URL=http://localhost:3000

Under DDEV this is optional: if VITE_DEV_SERVER_URL is not set, the helper falls back to DDEV_PRIMARY_URL_WITHOUT_PORT + :5173.

Editor CSS

As the build files have hashes, the module needs to get the correct file name for the editor css.

You can use the following in your mysite.yml to get the correct file name:

Atwx\ViteHelper\Helper\ViteHelper:
    editor_css: 'app/client/src/scss/editor.scss'

Vite Config

Our default config for vite defines:

• the input files:
  • main.js: The entry point for main js
  • main.scss: The entry point for main css
  • editor.scss: The entry point for editor css, which will be loaded in the cms
• the development server

Important is the base option. If you don't set this, the default is / which will likely not work.

import {defineConfig} from 'vite'

// https://vitejs.dev/config/
export default defineConfig(({command}) => {
    return {
        server: {
            host: '0.0.0.0',
            port: 3000,
        },
        alias: {
            alias: [{find: '@', replacement: './app/client/src'}],
        },
        base: './',
        build: {
            outDir: './app/client/dist',
            manifest: true,
            sourcemap: true,
            rollupOptions: {
                input: {
                    'main.js': './app/client/src/js/main.js',
                    'main.scss': './app/client/src/scss/main.scss',
                    'editor.scss': './app/client/src/scss/editor.scss',
                },
            },
        },
        plugins: []
    }
})

Working With Themes

See Config Templates for an example that works with themes and has also TailwindCSS configured.

You need to tell vite where your theme is located, e.g. in your app/_config/themes.yml:

Atwx\ViteHelper\Helper\ViteHelper:
  manifest_path: "/themes/<mytheme>/dist/.vite/manifest.json"
  output_url: "/themes/<mytheme>/dist/"
  editor_css: 'src/css/editor.css'

In your theme you can include Vite like:

    $ViteClient.RAW
    <link rel="stylesheet" href="$Vite("src/css/app.css")">
    <script type="module" src="$Vite("src/javascript/index.js")"></script>

Note: The paths need to match the rollupOptions in your vite.config.js.

Developing With DDEV

If you have ddev running, please export the relevant ports in your .ddev/config.yml:

web_extra_exposed_ports:
    - name: vite
      container_port: 5173
      http_port: 5172
      https_port: 5173

For DDEV the dev server needs to listen on 0.0.0.0 and emit absolute asset URLs (the page is served from a different origin than Vite). A minimal vite.config.js:

import {defineConfig} from 'vite'

export default defineConfig(({command}) => {
    const primary_url = process.env.DDEV_PRIMARY_URL || 'http://localhost';
    const origin = primary_url.replace(/:\d+$/, "") + `:5173`;
    return {
        server: {
            host: '0.0.0.0',
            port: 5173,
            strictPort: true,
            origin: origin,
            cors: {
                origin: /https?:\/\/([A-Za-z0-9\-\.]+)?(\.ddev\.site)(?::\d+)?$/,
            },
        },
        base: './',
        publicDir: false,
        build: {
            outDir: './app/client/dist',
            manifest: true,
            sourcemap: true,
            rollupOptions: {
                input: {
                    'main.js': './app/client/src/js/main.js',
                    'main.scss': './app/client/src/scss/main.scss',
                    'editor.scss': './app/client/src/scss/editor.scss',
                },
            },
        },
    }
})

publicDir: false is important. Vite registers publicDir as an extra watch path. When it lies under the project root (the Silverstripe default), chokidar's recursive scan breaks and HMR stops firing for files in app/client/src. Set publicDir: false (Silverstripe serves static assets itself) or point it to a directory outside the project root.

Thanks to

This module is inspired by https://github.com/brandcom/silverstripe-vite