Vitesse for ExpressionEngine
Vite, without the glue.
Tell a template which entry points it needs. Vitesse prints the right tags for them: from Vite's dev server while you work, with live updates, and from your build when you publish.
ExpressionEngine 7+PHP 8.1+Vite 3+Version 1.0
Free from the ExpressionEngine add-on store.
<head>
{exp:vitesse:css files="resources/js/app.js"}
</head>
<body>
{layout:contents}
{exp:vitesse:js files="resources/js/app.js"}
</body>
<link rel="stylesheet" href="/build/assets/app-K08chnnp.css">
<link rel="modulepreload" href="/build/assets/vendor-3c4d.js">
<script type="module" src="/build/assets/app-DwbmcGWY.js"></script>
Two modes, one template
It knows whether Vite is running.
A small hot file, written by your Vite config while the dev server runs, tells Vitesse where to load from. Start or stop Vite, and pages follow. Nothing to change in your templates.
While you work
Your source files, straight from the dev server, with Vite's client. Save a stylesheet and the page updates.
<script type="module" src="http://localhost:5173/@vite/client"></script>
<script type="module" src="http://localhost:5173/resources/js/app.js"></script>
When you publish
The hashed files from the manifest, with the CSS your scripts import and preloads for shared chunks.
<link rel="stylesheet" href="/build/assets/app-K08chnnp.css">
<link rel="modulepreload" href="/build/assets/vendor-3c4d.js">
<script type="module" src="/build/assets/app-DwbmcGWY.js"></script>
The details
The parts that usually bite, handled.
Vite's manifest is simple until it isn't. Vitesse gets the awkward cases right, and tells you when something's missing.
CSS your scripts import
In a build, imported CSS is its own file. Vitesse includes it, and the CSS of every chunk your script imports.
Head and footer
Stylesheets in the head with :css, scripts at the end with :js. Each file is printed once per page.
Any entry type
TypeScript, JSX, Vue, Sass, Less and the rest each get the right tag.
Images and fonts
The URL of any file Vite processed, for your own markup, with :url.
Every Vite since 3
Vite 5's .vite/manifest.json and the older manifest.json, found from your web root.
Problems explained
A missing manifest or a mistyped entry is explained in the template debugger.
Production
Ready for a CDN, a CSP and integrity.
Set it once in config.php, or per tag. Development is unaffected.
$config['vitesse_base_url'] = 'https://cdn.example.com';
$config['vitesse_build_directory'] = 'build';
Your next build is a tag away.
Download Vitesse, add a few lines to vite.config.js, and put one tag in your layout.