vite-plugin-adonis
Vite plugin for AdonisJS
This plugin allows you to use AdonisJS with Vite as the assets bundler.
Installation
npm i -D vite-plugin-adonis
Usage
import { defineConfig } from 'vite'
import Adonis from 'vite-plugin-adonis'
export default defineConfig({
plugins: [
Adonis({
entryPoints: {
app: ['resources/js/app.ts'],
}
})
]
})
Why and how ?
This plugin is needed for the following reasons:
Keep compatible API
The first Assets Bundler that was implemented for AdonisJS was Webpack Encore. Two things webpack encore is doing when you run the dev server, is :
- Generating a manifest.json file that contains all the assets with some metadata
- Generating a entrypoints.json file
These two files are used by AdonisJS to correctly load the assets in the views. Vite doesn't generate manifest file in dev mode, but we won't need it. The only drawback is, while in dev mode, AdonisJS won't be able to throw an error if you try to load an asset that doesn't exist.
However the entrypoints.json file is needed by AdonisJS, basically for the entryPointStyles('entryPointName')
and entryPointScripts('entryPointName')
helpers. This plugin will generate the entrypoints.json file based on the entryPoints option you pass to the plugin.
Reload
The plugin also add a little method that will watch your .edge
files and full-reload the page when a change is detected.
Configuration
The last thing this plugin is doing, is, basically just pre-configuring Vite for you. It will add all configuration needed to make AdonisJS work with Vite.