PHPackages atwx/silverstripe-vitehelper - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. atwx/silverstripe-vitehelper ActiveSilverstripe-vendormodule[Utility & Helpers](/categories/utility) atwx/silverstripe-vitehelper ============================ A helper to use vitejs with silverstripe cms v1.4(1mo ago)16.8k↓20.5%1[1 issues](https://github.com/atwx/silverstripe-vitehelper/issues)BSD-3-ClausePHP Since Jan 22Pushed 1mo ago3 watchersCompare [ Source](https://github.com/atwx/silverstripe-vitehelper)[ Packagist](https://packagist.org/packages/atwx/silverstripe-vitehelper)[ RSS](/packages/atwx-silverstripe-vitehelper/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (10)Dependencies (4)Versions (16)Used By (0) Simple Vite Helper for Silverstripe =================================== [](#simple-vite-helper-for-silverstripe) This module helps you to use [vite](https://vitejs.dev/) 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 ------------ [](#installation) ``` composer require atwx/silverstripe-vitehelper ``` Usage ----- [](#usage) In your template, you can use the following code ``` $ViteClient.RAW ``` 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 ------------- [](#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 -------- [](#dev-mode) To use vite in dev mode, you need to add the dev server url to your `.env`: ``` VITE_DEV_SERVER_URL=http://localhost:3000 ``` Editor CSS ---------- [](#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 ----------- [](#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 ------------------- [](#working-with-themes) See [Config Templates](_config_templates/vite_tailwind.config.js) 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//dist/.vite/manifest.json" output_url: "/themes//dist/" editor_css: 'src/css/editor.css' ``` In your theme you can include Vite like: ``` $ViteClient.RAW ``` **Note**: The paths need to match the `rollupOptions` in your `vite.config.js`. Developing With DDEV -------------------- [](#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 ``` Thanks to --------- [](#thanks-to) This module is inspired by ### Health Score 42 — FairBetter than 90% of packages Maintenance69 Regular maintenance activity Popularity27 Limited adoption so far Community14 Small or concentrated contributor base Maturity49 Maturing project, gaining track record Bus Factor1 Top contributor holds 75% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~72 days Recently: every ~45 days Total 12 Last Release 55d ago Major Versions v0.3.0 → v1.02025-06-17 v0.4.1 → v1.22025-09-24 v0.5 → 5.x-dev2025-10-28 ### Community Maintainers ![](https://www.gravatar.com/avatar/64d979993815fa2d2ea95b3fd72b4f43e95a631ce569f4f1c0330786971b5fc2?d=identicon)[adiwidjaja](/maintainers/adiwidjaja) --- Top Contributors [![adiwidjaja](https://avatars.githubusercontent.com/u/280394?v=4)](https://github.com/adiwidjaja "adiwidjaja (15 commits)")[![wernerkrauss](https://avatars.githubusercontent.com/u/1043925?v=4)](https://github.com/wernerkrauss "wernerkrauss (3 commits)")[![HenrikBormann](https://avatars.githubusercontent.com/u/88386045?v=4)](https://github.com/HenrikBormann "HenrikBormann (1 commits)")[![KallivdH](https://avatars.githubusercontent.com/u/24358323?v=4)](https://github.com/KallivdH "KallivdH (1 commits)") --- Tags silverstripecms ### Embed Badge ![Health badge](/badges/atwx-silverstripe-vitehelper/health.svg) ``` [![Health](https://phpackages.com/badges/atwx-silverstripe-vitehelper/health.svg)](https://phpackages.com/packages/atwx-silverstripe-vitehelper) ``` PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)