atwx / silverstripe-vitehelper
A helper to use vitejs with silverstripe cms
Installs: 1 067
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 3
Forks: 1
Open Issues: 0
Type:silverstripe-vendormodule
Requires
- silverstripe/framework: ^4.0||^5.0
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