Laravel 9 now defaults to using Vite instead of Laravel Mix and Webpack.
Vite uses ESBuild under the hood, and is often much faster than Webpack. This is good news!
While maybe not building static assets is the most ideal situation in a CI pipeline, a great runner up is making it fast if you are building them!
Let's see how to use Vite in a few ways.
Basic Usage
We'll start with a new Laravel project:
composer create-project laravel/laravel vite-fast
cd vite-fast
A fresh Laravel application now has a vite.config.js file instead of the old webpackage.config.js file.
Here's what the vite.config.js file looks like:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
});
To use Laravel's standard “stuff” with Vite, we can just go ahead and install our dependencies and run npm run dev.
npm install
# Start Vite's dev server, which
# will watch for file changes
npm run dev
# Alternatively, build for production
npm run build
# Both of these are faster!
If you inspect the packages.json file, the default commands available are now npm run dev and npm run build:
{
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"axios": "^0.27",
"laravel-vite-plugin": "^0.5.0",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"vite": "^3.0.0"
}
}
Previously, with Laravel Mix, we had a lot of other commands, such as dev, watch, production, hot and more.
Once you install your npm dependencies and build your assets, you're all set! You can update your CSS and JS and Vite will quickly rebuild static assets.
Tailwind
Integration with Tailwind is super easy. We can follow the Laravel installation guide with a few tweaks. If you see instructions related to updating the webpack config file, just skip it!
Install Tailwind:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
Update tailwind.config.js to add to the content array:
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
extend: {},
},
plugins: [],
}
Update your resources/css/app.css file:
@tailwind base;
@tailwind components;
@tailwind utilities;
Add a postcss.config.js file:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
Rebuild your assets:
npm run build
That's it - You now have Tailwind and Vite!
A manifest file is generated at public/build/manifest.json. You'll also see your static assets (CSS/JS) files in public/build/assets/.
The Vite Helper
Once you have your static assets working, you can use the vite() helper in your view files to include static assets.
<!doctype html>
<head>
{{-- ... --}}
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
Vite in CI
Vite does change a few things when generating assets in continuous integration pipelines.
Previously you may have run npm run dev to build assets. With Vite, however, that command starts a long-running process! Your CI pipeline will get stuck there until the build times out (about an hour in Chipper CI).
Instead, you should run npm run build. This will build your static assets and exit - allowing your CI pipelines to move onto the next steps.
Updating Tests
If you don't want to generate static assets in your CI builds just to create a manifest file, you can call $this->withoutVite() in your tests. This will ensure the vite() helper in your views does not raise errors if not manifest file is found.
There's a $this->withoutMix() function too, if you're still using Mix!