Laravel now ships with Vite.js

Laravel recently switched from building assets with Laravel Mix to Vite.js. According to its website, "Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects."

It provides a dev server and a build command that bundles code using Rollup.

"Vite is opinionated and comes with sensible defaults out of the box, but is also highly extensible via its Plugin API and JavaScript API with full typing support."

Here are its main features.

• 💡 Instant Server Start. On demand file serving over native ESM, no bundling required!
• ⚡️ Lightning Fast HMR. Hot Module Replacement (HMR) that stays fast regardless of app size.
• 🛠️ Rich Features. Out-of-the-box support for TypeScript, JSX, CSS and more.
• 📦 Optimized Build. Pre-configured Rollup build with multi-page and library mode support.
• 🔩 Universal Plugins. Rollup-superset plugin interface shared between dev and build.
• 🔑 Fully Typed APIs. Flexible programmatic APIs with full TypeScript typing.

You can create a clean Laravel install that comes with Vite pre-configured.

# Create a Laravel app with the Laravel CLI tool
laravel new app

# Create a Laravel app with Composer
composer create-project laravel/laravel app

# Enter the directory
cd app

# Install NPM dependencies
npm install

# Run Vite's development server
npm run dev
#  VITE v3.0.2  ready in 249 ms
#
#  ➜  Local:   http://localhost:5173/
#  ➜  Network: use --host to expose
#
#  LARAVEL v9.21.3  plugin v0.5.0
#
#  ➜  APP_URL: http://app-laravel.test

# Build for production
npm run build
# > build
# > vite build
# 
# vite v3.0.2 building for production...
# ✓ 58 modules transformed.
# public/build/manifest.json            0.25 KiB
# public/build/assets/app.7c3c19f8.js   0.00 KiB / gzip: 0.02 KiB
# public/build/assets/app.334e7359.js   90.63 KiB / gzip: 33.07 KiB