Skip to content
This repository has been archived by the owner on Nov 19, 2022. It is now read-only.
/ adonis-vite Public archive

Vite as asset manager for Adonis framework

License

Notifications You must be signed in to change notification settings

91bytes/adonis-vite

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

Vite as asset manager for Adonis framework

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages