Mettre à jour Laravel avec Vite et Bootstrap 5

Fin juin 2022, Laravel annonce l'abandon de Webpack au profit de Vite.

Depuis la version 9.23, les nouveaux projets Laravel utiliseront nativement Vite pour la génération des "assets" CSS et JS.

Laravel a publié un guide de migration pour les projets existants.
Mais comme depuis Laravel 7, Laravel oublie les utilisateurs Bootstrap...
Heureusement Cotiga est là pour vous sortir de ce trépas :p

Cet article est un condensé du guide fournit par Laravel (cité plus haut), du guide de Bootstrap encore en chantier et de cette preview.
Il convient aux applications existantes.
La manipulation n'est pas complexe et relativement rapide.

De Laravel Mix à Vite

Tout d'abord, installez Vite et le plugin Laravel Vite

npm install --save-dev vite laravel-vite-plugin

Votre App est censée utiliser Boostrap et Sass, les paquets doivent donc être installés.
Si non, installez-les :
npm install --save-dev sass bootstrap @popperjs/core

On peut maintenant désinstaller Laravel Mix et ses dépendances Webpack :
npm remove laravel-mix resolve-url-loader sass-loader
rm webpack.mix.js

Configurer Vite

Créez le fichier vite.config.js à la racine de votre App et éditez le comme suit :

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import path from 'path'

export default defineConfig({
  plugins: [
    laravel([
      'resources/js/app.js',
      // 'resources/js/homepage.js' Exemple js/css page d'accueil à mettre dans la vue : @vite(['resources/js/homepage.js']
    ]),
  ],
  resolve: {
    alias: {
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
    }
  },
})

Dans votre App, le couple CSS/Sass était importé dans Laravel Mix. Avec Vite, nous n'utiliserons que le fichier JS, c'est lui qui importera le CSS/Sass.

Script NPM

Modifiez la partie "scripts" dans package.json comme suit :

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

Importer Bootstrap

Normalement déjà présent sur une App existante.
Sur une nouvelle App, importer les sources Bootstrap dans le fichier resources/sass/app.scss comme suit :

@import "~bootstrap/scss/bootstrap";

Vite n'accepte que les modules ES, vous devez donc modifier les require() par des import.
Editez resources/js/bootstrap.js comme suit :
(PopperJs sera importé automatiquement)

import * as bootstrap from 'bootstrap'
window.bootstrap = bootstrap;

Importer le CSS/JS bootstrap dans resources/js/app.js

import '../sass/app.scss';
import './bootstrap';

Compiler

La compilation se fait comme sous Laravel-mix :
npm run dev
Pour la mise en production
npm run build

Le mode "dev" ou production "build" est détecté et génèrera les éléments temporaires en dev et dans /public/build pour la mise en prod.

Remplacer mix() par @vite

Lorsque vous utilisez Vite, vous devrez utiliser la directive Blade @vite au lieu de mix() dans le layout (ou dans vos vues).

@vite(['resources/js/app.js'])

RAPPEL : vous n'avez pas à inclure le fichier CSS, il est importé via JavaScript.

Pour finir

Sur une App existante, mettez bien tout à jour :
composer update

Si vous utilisez Valet, mettez le aussi à jour :
composer global update
valet install

Et un petit coup de nettoyage pour bien repartir sur du neuf :
php artisan clear-compiled &&
php artisan auth:clear-resets &&
php artisan cache:clear &&
php artisan config:clear &&
php artisan route:clear &&
php artisan view:clear

composer dump-autoload

En fonction de votre stratégie de déploiement, vous pouvez ajouter le dossier "build" au fichier .gitignore :

/public/build