networkteam / neos-vite
Integrate Vite for asset bundling into Neos CMS
Installs: 982
Dependents: 0
Suggesters: 0
Security: 0
Stars: 1
Watchers: 2
Forks: 1
Open Issues: 3
Type:neos-package
This package is auto-updated.
Last update: 2024-10-18 15:32:19 UTC
README
Installation
Go to your site package:
cd DistributionPackages/Your.Site
1. Install the package via composer
composer require networkteam/neos-vite
2. Install Vite via NPM (or Yarn, pnpm):
npm install --save-dev vite
3. Create a vite.config.mjs
file in your site package:
import { defineConfig } from "vite"; export default defineConfig((configEnv) => ({ base: "./", build: { // generate .vite/manifest.json in outDir manifest: true, rollupOptions: { // overwrite default .html entry input: { footer: "Resources/Private/Javascript/footer.js", header: "Resources/Private/Javascript/header.js", }, output: { // The Flowpack.CacheBuster package adds a `?bust` get parameter with a hash based on the file content. // This leads to issues with files imported from the manifest, as they may be loaded twice. // (Once with the bust parameter and once without, as they are technically two different URLs.) // To work around this we add a "bust" infix so CacheBuster skips adding the bust parameter. entryFileNames: "assets/[name]-bust-[hash].js", // If you use this output option the Fusion object will just work™️ dir: "Resources/Public/Dist", }, }, }, }));
4. You can now include Vite assets for development / production in your Fusion files:
header = Networkteam.Neos.Vite:Asset {
entry = 'Resources/Private/Javascript/header.js'
}
This Fusion object will use a different include based on the FLOW_CONTEXT:
- Development: Loads entry from development server configured for the site (defaults to http://localhost:5173/)
- Production: Based on the generated manifest file it will include the hashed assets with CSS and recursive imports
By default the manifest is expected in Resources/Public/Dist
, but that can be changed by overriding Fusion properties:
prototype(Networkteam.Neos.Vite:Asset) {
// ...
outputPathPattern = 'resource://{sitePackageKey}/Public/Dist'
manifest = '.vite/manifest.json'
}
Bonus: You can generate the URL to entries in the manifest
This will only return the URL to the file for an entry without considering imports.
Example for an SVG spritemap (using vite-plugin-svg-spritemap):
src = Networkteam.Neos.Vite:AssetUrl {
entry = 'spritemap.svg'
}
Multi-site
Configure individual Vite configurations for each site by adding a Vite setup with a corresponding vite.config.mjs
file in each site package.
Make sure to run each server on a different port by configuring the server.port
option in the Vite configuration.
Add Settings for each site in your Settings.yaml
:
Networkteam: Neos: Vite: server: # This is the default setting if no configuration part is found for the site package key _default: url: http://localhost:5173/ # Specify server configuration for a specific site package key MyExample.Site: url: http://localhost:5174/
Make sure to run multiple Vite servers for each site package.