DEV Community: Serge Ledig

Laravel Vite avec Bootstrap 5 sur nouvelle app

Serge Ledig — Tue, 04 Jul 2023 19:27:38 +0000

Installez Boostrap et ses dépendances
npm i --save-dev sass bootstrap @popperjs/core

Configurer Vite
Modifiez le fichier vite.config.js à la racine de votre App comme suit :

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

export default defineConfig({
  plugins: [
    laravel({
      input: [
        'resources/sass/app.scss',
        'resources/js/app.js',
      ],
      refresh: true,
    }),
  ],
});

Importer Bootstrap
Supprimez le dossier resources/css/app.css installé par défaut.
Créez le dossier resources/sass, puis créez le fichier resources/sass/app.scss et éditez le comme suit :
@import "bootstrap/scss/bootstrap";

Editez resources/js/bootstrap.js comme suit :
(PopperJs sera importé automatiquement)

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

Compiler
La compilation se fait comme sous Laravel-mix :
npm run dev

Pour la mise en production
npm run build

Le mode "dev" génère un fichier "hot" dans /Public
Le mode "build" génèrera les éléments dans /public/build pour la mise en production du site.

Importer les "assets" CSS/JS dans les vues avec la directive Blade @vite

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

Bien sûr, il est préférable de ne l'importer qu'une seule fois dans un fichier "Layouts"

Pour finir
Et un petit coup de nettoyage pour bien repartir :

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

Mettre à jour Laravel avec Vite et Bootstrap 5

Serge Ledig — Thu, 30 Jun 2022 22:19:00 +0000

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

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

Laravel 8 avec Bootstrap 5

Serge Ledig — Sat, 19 Jun 2021 19:06:43 +0000

Je ne le cache à personne, j'aime pas Tailwind 😋
L'arrivé de Bootstrap 5 remet les pendules à l'heure, en purgeant le code d'IE et de Jquery.
Les composants CSS et JS peuvent être ajoutés au besoin.

Ouvrez le terminal, allez dans le dossier de l'app
cd /path/to/your.app

Comme on ne veut pas de Tailwind, on vire postcss :
npm uninstall postcss

Si vous n'allez pas utiliser Lodash et Axiox, on les vire :
npm uninstall axios lodash

On installe Bootstrap avec Popperjs et pour être prèt à compiler, on ajoute de suite Sass et les loaders.
npm install @popperjs/core bootstrap resolve-url-loader sass-loader --save-dev
npm install sass@1.32.13 --save-dev --save-exact
ℹ️ j'ai forcé la version 1.32 de SASS à cause des warning ci-dessous, rencontrés quand on compile avec la version 1.33 ou supérieure.
Recommendation: math.div($spacer, 4)
1: $spacer / 4,
Recommendation: math.div($spacer, 2)
2: $spacer / 2, ...

EDITEZ
nano resources/js/bootstrap.js
COMME CECI
window._ = require('lodash'); import "bootstrap"; window.axios = require('axios'); window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
ENREGISTREZ, FERMEZ
CTRL + x
o
ℹ️ si vous n'utilisez pas Lodash et/ou Axios, vous pouvez effacer les lignes les concernant.

ATTENTION, nous allons travailler sur le fichier app.Scss et non app.Css (qu'on vire)
rm resources/css/app.css
nano resources/css/app.scss

AJOUTEZ
@import '~bootstrap/scss/bootstrap';
ENREGISTREZ, FERMEZ
CTRL + x
o

EDITEZ
nano webpack.mix.js
COMME CECI
const mix = require('laravel-mix'); mix.js('resources/js/app.js', 'public/js') .sass('resources/css/app.scss', 'public/css'); if (mix.inProduction()) { mix.version(); }

COMPILEZ
npx mix

INSÉREZ LE CSS DANS LES VUES (ou mieux, dans le layout)
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
Avant de fermer </head>

ET LE JS
<script src="{{ mix('js/app.js') }}"></script>
Avant de fermer </body>