Mettre à jour Laravel avec Vite et Bootstrap 5
Tags: laravel, vite, bootstrap
Published: 2022-06-30 22:19:00

## 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](https://github.com/laravel/vite-plugin/blob/main/UPGRADE.md#migrating-from-laravel-mix-to-vite) 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](https://github.com/twbs/bootstrap/pull/36412) encore en chantier et de cette [preview](https://deploy-preview-36412--twbs-bootstrap.netlify.app/docs/5.2/getting-started/vite/).
Il convient aux applications existantes.
La manipulation n'est pas complexe et relativement rapide.

## De Laravel Mix à Vite

Tout d'abord, installez [Vite](https://vitejs.dev/) et le [plugin Laravel Vite](https://www.npmjs.com/package/laravel-vite-plugin)

`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
```

<hr>
Un nouvel article est publié pour l'installation de Bootstrap 5 dans une nouvelle app Laravel.