Vite.js

Vite est un outil qui permet de compiler le code javascript et les assets (images, sons, vidéos) statiques (connus avant mise en exploitation de l’application).

Il va donc gérer les ressources styles, icons, code javascript utilisés par le front. Ces ressources sont généralement placés dans le répertoire resources de l’arborescence Laravel.

Configuration dans Laravel pour l’utilisation de Vite

Installation de Vite
Il suffit de saisir la commande : npm install à la racine du projet Laravel.
La configuration se fait à partir du fichier Vite.config.js, il déclare la liste des fichiers de styles et de code javascipt utilisés. Par exemple :
```
// fichier Vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
  plugins: [
    laravel({
      input: ['resources/css/app.css', 'resources/css/gest.css', 'resources/js/app.js'],
      refresh: true,
    }),
  ],
});
```
Ici, on déclare deux fichiers de styles app.css et gest.css et un fichier javascript app.js. Le fichier resources/js/app.js peut inclure d’autres fichiers javascript et permet aussi de retrouver plus efficacement les images statiques et les fontes. Par exemple :
```
// fichier resources/js/app.js
import './bootstrap';
import.meta.glob([
  '../images/**',
  '../fonts/**',
]);
```
qui retrouve les images du répertoire resources/images et les fonts resources/fonts.

Utilisation de Vite

On utilise Vite en ajoutant (replacement) la ligne :

<!doctype html>
<html lang=en>
<head>
    {{-- ... --}}
    {{-- Ligne à remplacer --}}
    {{-- <link rel="stylesheet" href="{{asset('css/app.css')}}"> --}}
    {{-- Instruction qui inclut les fichiers de styles via Vite --}}
  
    @vite(['resources/css/app.css'])
  
    {{-- ... --}}
</head>
<body>
{{-- ... --}}
<img class="img-land" src="{{Vite::asset('resources/images/arbre.jpg')}}" alt="Un arbre">
{{-- ... --}}
</body>
</html>

Il suffit d’utiliser la directive @vite pour inclure les fichiers de styles et de code javascript. Si vous utilisez le moteur de template Blade de Laravel, il suffit d’ajouter la directive @vite dans la section <head> de votre fichier Blade principal (resources/views/layouts/app.blade.php ou resources/views/components/layouts/app.blade.php si vous utilisez les composants).

Pour les images et autres ressources statiques, on utilise la fonction Vite::asset().

Phase de développement du front

Pendant la phase de développement, dans un terminal ouvert dans le répertoire du projet, on utilise la commande npm run dev. Cela lance un serveur de développement qui va surveiller les modifications apportées aux fichiers de styles et de code javascript. Lorsque vous modifiez un fichier, Vite recompilera automatiquement les fichiers concernés et rechargera la page dans le navigateur pour refléter les changements.

Phase d’exploitation du front

Pour la phase d’exploitation, on utilise la commande npm run build (une fois, dès que le résultat vous convient) qui crée un répertoire public/build qui sera utilisé automatiquement pour accéder à toutes les références (images, sons, vidéos, fonts, code javascript) statiques de votre site.