Hoe zet ik een nieuw project op met Laravel 5 en Twitter Bootstrap 4?

Inmiddels is Bootstrap 4 alweer aanbeland bij de 6e alpha release en hoewel het natuurlijk altijd wat meer veranding met zich mee brengt dan een stable release ben ik er toch voorstander van om voor nieuwe web projecten Bootstrap 4 in te zetten. Immers de alpha release zal veel eenvoudiger te upgraden zijn naar de officiële release dan wanneer nu nog voor Bootstrap 3 gekozen wordt en later alle klassenamen en wellicht ook de semantische opzet van de html gewijzigd moet worden.

Daarbij wil ik wel een kanttekening maken, als browserondersteuning een hot topic is voor de te maken website dan is Bootstrap 4 misschien nog niet de juiste keuze. Bootstrap 4 maakt veelvuldig gebruik van flexbox. In eerste instantie zou je dit uit kunnen zetten, maar zeker met de huidige keuzes voor de opzet van de navbar is het gebruik van flexbox zeer aan te raden. Oudere browsers hebben alleen beperkte of geen ondersteuning voor flexbox en zullen de site dan ook niet helemaal tonen zoals dat de bedoeling was.

Dus, de keuze is gemaakt, daar gaan we dan.

                composer global require "laravel/installer"
                cd /my_projects_dir
                laravel new my_new_project
            

Kopieer .env.example naar .env en genereer een app key php artisan key:generate

Een nieuw Laravel project is nu aangemaakt. De standaard configuratie gebruikt echter bootstrap 3, dus dit gaan we aanpassen.

                cd /my_projects_dir/my_new_project
                npm install bootstrap@4.0.0-alpha.6 --save-dev
            

Open resources/assets/sass/app.scss en verwijder alle regels (evt. kun je het webfont laten staan als je van plan bent deze in je design te gebruiken.
Voeg nu het volgende toe:

                // Bootstrap variables
                @import  "node_modules/bootstrap/scss/variables";

                // Bootstrap
                @import  "node_modules/bootstrap/scss/bootstrap";
            

Je kunt de _variables.scss evt. ook naar je sass resource directory kopiëren. Ik kies daar echter niet voor omdat bij nieuwe alpha releases de variabelen kunnen veranderen en dan niet meer aansluiten bij de bootstrap stylesheets (die wel uit de node module geladen wordt). Variabelen overschrijven kun je ook prima in je app.scss doen of evt. in een import met alleen die variabelen die je gewijzigd hebt t.o.v. van de defaults (standaardwaarden).

Nu gaan we de javascript aanpassen benodigd voor Twitter Bootstrap 4. Bootstrap 4 heeft Tether nodig, download dit met npm install tether --save-dev. Open resources/assets/js/bootstrap.js en varander require('bootstrap-sass'); in:

                    window.Tether = require('tether');
                    require('bootstrap');
                

Laravel 5.4 gebruikt geen gulp meer, maar webpack. Installeer alle npm dependencies met: npm install, npm run watch maakt vervolgens de javascript en css bestanden aan wanneer er iets is gewijzigd.

Standaard is er een welcome view die niet op bootstrap is gebaseerd. Indien je met gebruikersrechten wilt werken kun je de authenticatiestructuur, inclusief login en registratie views binnen een layout maken met het commando php artisan make:auth

Laten we de welkomstpagina aanpassen en baseren op de layout (er van uitgaande dat je net de authenticatiestructuur hebt aangemaakt met bijbehorende views). Vervang de inhoud van welcome.blade.php met:

                    @extends('layouts.app')

                    @section('content')
                        
                        <div class="container">
                            <div class="row">
                                <div class="col-md-8 col-md-offset-2">
                                    <h1>Welkom</h1>
                                </div>
                            </div>
                        </div>
                        
                    @endsection
            

Vervang de inhoud van app.blade.php met het volgende (het dropdown menu moet nog aangepast worden aan B4):

Nu kun je verder je views opbouwen op basis van Bootstrap 4.

N.B.: ook de login en aanmeld views vereisen kleine aanpassingen, maar dat spreekt vast voor zich.