Adonis Vite

AdonisJS ships with webpack encore to manage your frontend assets. This package provides a way to use Vite instead.

Note: the API may change between minor versions until we reach 1.0.

Installation and usage

If you are creating a new project, choose false or N when you are asked if you want to configure webpack encore for compiling frontend assets.

If you are integrating this package in an existing project, you can remove webpack.config.js and any webpack related packages you may have in your project's dependencies.

Install using your package manager:

npm install --save @91codes/adonis-vite
# or
yarn add @91codes/adonis-vite

Please note that you need to install Vite separately.

npm install --save-dev vite
# or
yarn add -D vite

Add the Vite provider to .adonisrc.json

node ace configure @91codes/adonis-vite

Create a vite.config.ts

You can start with the following. Feel free to customise it to your needs. You don't need react plugin if you aren't using react.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import adonis from '@91codes/adonis-vite/build/plugins/adonis'

export default defineConfig({
	plugins: [
		react({ jsxRuntime: 'classic' }),
		adonis({ input: 'resources/frontend/entrypoints/app.tsx' }),
	],
})

Add edge tags in layout

Add the @vite edge tag in your edge layout's head. You don't need @viteReactRefresh if you aren't using react.

@viteReactRefresh()
@vite('resources/frontend/entrypoints/app.tsx')

Add to .gitignore

public/hot
public/assets
public/manifest.json

Add the following scripts in package.json:

{
	"scripts": {
		"vite:dev": "npm run vite",
		"vite:build": "npm run vite build"
	}
}

Run these along with the default dev and build scripts.