Vite 8 and server-side modules in AdonisJS

Today, we are releasing version 6 of @adonisjs/vite with support for Vite 8.

Vite 8 replaces the old esbuild and Rollup combination with Rolldown, a single Rust-based bundler used throughout the development and production pipelines. The Vite team reports significantly faster production builds while preserving compatibility with the existing Vite plugin ecosystem.

For most AdonisJS applications, the upgrade is small. Alongside Vite 8 support, this release introduces a workflow for loading Vite-powered modules inside the AdonisJS process.

Upgrading to `@adonisjs/vite` version 6

Upgrade using AI

Upgrade this existing AdonisJS application to @adonisjs/vite version 6 and Vite 8. Work directly in the repository, preserve the application's existing behavior, and complete the migration including verification.

Start by inspecting package.json, the lockfile, vite.config.*, config/vite.*, frontend entrypoints, build scripts, and CI or deployment configuration. Detect the package manager from the lockfile and use only that package manager.

Apply the following changes:

1. Upgrade @adonisjs/vite to version 6 and Vite to version 8. Keep Vite in devDependencies and preserve the existing dependency grouping.

2. If the application uses React, upgrade @vitejs/plugin-react to version 6. If it uses Vue, upgrade @vitejs/plugin-vue to version 6. Do not install a framework plugin the application does not use.

3. Update the AdonisJS plugin options inside vite.config.*:
   - Rename entrypoints to entryPoints.
   - Rename the prerelease serverEntrypoints option to serverEntryPoints if it exists.
   - Preserve aliases, reload paths, watch exclusions, environment variables, and unrelated plugins.

For a standard Edge application, use this configuration as the target shape and adapt the existing paths rather than replacing unrelated options.

```ts title="vite.config.ts"
import { defineConfig } from 'vite'
import adonisjs from '@adonisjs/vite/client'

export default defineConfig({
  plugins: [
    adonisjs({
      entryPoints: ['resources/js/app.ts'],
      reload: ['resources/views/**/*.edge'],
    }),
  ],
  server: {
    watch: {
      ignored: ['**/storage/**', '**/tmp/**'],
    },
  },
})
```

4. Find import.meta.glob calls used only to emit images, fonts, icons, or documents that are not otherwise part of the frontend import graph, regardless of which file contains the import.meta.glob call. Remove only asset-emission globs and preserve import.meta.glob calls used for runtime module discovery.

For example, remove an asset-only glob from the frontend entrypoint.

```ts title="resources/js/app.ts"
import.meta.glob(['../images/**', '../fonts/**'])
```

Register the same files using the AdonisJS plugin's assets option. Use chunks for glob patterns whose files should be processed and fingerprinted by the bundler, and assets for exact file paths that must be emitted unchanged. The assets list does not accept glob patterns.

```ts title="vite.config.ts"
import { defineConfig } from 'vite'
import adonisjs from '@adonisjs/vite/client'

export default defineConfig({
  plugins: [
    adonisjs({
      entryPoints: ['resources/js/app.ts'],
      assets: {
        chunks: ['resources/images/**', 'resources/fonts/**'],
        assets: ['resources/documents/terms.pdf'],
      },
    }),
  ],
})
```

5. Do not add serverEntryPoints or loadServerModule unless the application already has a server-side Vite module or needs one as part of this migration.

6. If the application has custom Vite configuration or third-party Vite plugins, check the official Vite 8 migration guide and apply only the breaking changes relevant to code present in this repository. Keep that work separate from the AdonisJS integration changes and preserve the intent of every custom option.

7. If package.json contains @adonisjs/inertia version 4, do not leave the app with a partially migrated SSR setup. Stop and report that @adonisjs/inertia must be upgraded to version 5 together with this Vite upgrade.

Verify the migration:

1. Install dependencies with the detected package manager.
2. Format or lint only the files you changed.
3. Run the existing typecheck, lint, test, and production build scripts relevant to this change.
4. Start the development server and confirm that Vite boots without configuration warnings. If reload patterns are configured, verify that editing a matching file reloads the browser.
5. Inspect the production manifest and confirm that every configured entrypoint and static asset is emitted.
6. Fix failures caused by the migration. Clearly separate unrelated pre-existing failures in the final report.

If browser automation is unavailable, do not skip the browser checks silently. List them as remaining manual checks in the final report.

At the end, summarize the files changed, commands run, AdonisJS integration changes applied, and any browser or deployment checks that still require manual verification. Keep unrelated application code unchanged.

Upgrade the dependencies

Install version 6 of the AdonisJS integration and Vite 8.

npm install @adonisjs/vite@6
npm install --save-dev vite@8

React applications should also upgrade the React plugin.

npm install --save-dev @vitejs/plugin-react@6

Vue applications should upgrade the Vue plugin instead.

npm install --save-dev @vitejs/plugin-vue@6

Rename `entrypoints`

The entrypoints option has been renamed to entryPoints.

adonisjs({
  entrypoints: ['resources/js/app.ts'], 
  entryPoints: ['resources/js/app.ts'], 
  reload: ['resources/views/**/*.edge'],
})

Move static asset globs to the Vite config

Older AdonisJS applications may use import.meta.glob inside their JavaScript entrypoint to include images and fonts that are not otherwise part of the frontend import graph. Vite 8 no longer emits non-JavaScript files through this pattern.

Remove those glob imports from the entrypoint.

import.meta.glob(['../images/**', '../fonts/**'])

Then register the same files using the assets option.

adonisjs({
  entryPoints: ['resources/js/app.ts'],
  assets: ['resources/images/**', 'resources/fonts/**'], 
})

The files are now processed by Vite, added to the manifest, and available through the asset helper.

Verify the production build

Run the type checker and create a production build. The production build is important because it verifies the entrypoints, static assets, and manifest together.

npm run typecheck
npm run build

Vite 8 and Rolldown

The largest change in Vite 8 is the move to Rolldown . Previous Vite releases used esbuild during development and Rollup for production builds. That arrangement was fast, but it meant maintaining two transformation pipelines with slightly different behavior.

Vite 8 uses Rolldown across the toolchain and Oxc for JavaScript transforms and minification. According to the Vite 8 announcement , Rolldown can produce builds 10 to 30 times faster than Rollup in its benchmarks, while keeping the Vite and Rollup plugin APIs familiar.

The exact improvement will depend on the size and shape of your application. The more immediate benefit is having the development and production pipelines share the same foundation.

Static files outside the import graph

Vite normally discovers files by following imports from an entrypoint. Images, fonts, icons, and documents that are not imported by the frontend code fall outside this graph and will be missing from the production build.

Version 6 adds an assets option for those files.

adonisjs({
  entryPoints: ['resources/js/app.ts'],
  assets: ['resources/images/**', 'resources/fonts/**'], 
})

Glob patterns are processed by Vite and receive content-hashed filenames. When a file must be emitted without changing its contents, use the object form and list its exact path under assets.

adonisjs({
  entryPoints: ['resources/js/app.ts'],
  assets: {
    chunks: ['resources/images/**'],
    assets: ['resources/documents/terms.pdf'],
  },
})

Both kinds of files are registered in the manifest and can be resolved using the asset helper.

Loading Vite-powered modules on the server

Some server-side modules use syntax or transforms that Node.js cannot execute on its own. React Email templates containing JSX and Inertia SSR modules processed by frontend plugins are two examples.

In order to run these modules within the same AdonisJS process you will have to process them through Vite via the serverEntryPoints.

import { defineConfig } from 'vite'
import adonisjs from '@adonisjs/vite/client'

export default defineConfig({
  plugins: [
    adonisjs({
      entryPoints: ['resources/js/app.ts'],
      serverEntryPoints: ['resources/emails/verify_email.tsx'], 
    }),
  ],
})

Then, use the vite.loadServerModule method to load the registered entrypoint from your AdonisJS code.

import vite from '@adonisjs/vite/services/main'

export default class NewAccountController {
  async store() {
    const { default: renderVerifyEmail } = await vite.loadServerModule<
      typeof import('../../resources/emails/verify_email.tsx')
    >('resources/emails/verify_email.tsx')

    const html = await renderVerifyEmail({
      verificationUrl: 'https://example.com/verify/token',
    })

    // Send the email
  }
}

The application code uses the same source path in both environments. During development, Vite transforms and loads the source module. During a production build, Vite bundles the server entrypoint, and the same method loads its compiled output.

This API also replaces the package-specific SSR builds we had before. For example, @adonisjs/inertia version 5 registers its SSR module as a server entrypoint and loads it through the same Vite service.

Give it a try

Version 6 of @adonisjs/vite is available alongside Vite 8. You can read the complete @adonisjs/vite release history , the Vite 8 announcement , the Vite changelog , and the Vite 8 migration guide before upgrading an application with extensive custom Vite configuration.