atwx/silverstripe-vitehelper

A helper to use vitejs with silverstripe cms

v0.3.0 2024-09-20 10:52 UTC

Requires

• silverstripe/framework: ^4.0||^5.0

BSD-3-Clause

• cms
• silverstripe

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, you need to add the dev server url in your .env:

VITE_DEV_SERVER_URL=http://localhost:3000

Editor CSS

As the build files have hashes, we need 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

We normally use the following config for vite. This 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: []
    }
})

Partly inspired by https://github.com/brandcom/silverstripe-vite