Adding Bootstrap scaffolding in Laravel

Scaffolding refers to rapidly setting up a basic structure or a skeleton for an application. The ultimate purpose of scaffolding is to speed up the setting up skeleton structure without creating new. Though Laravel doesn't dictate which JS and CSS pre-processors one can use, it provides an essential beginning for using Bootstrap, React and Vue through rapid scaffolding. This document explores the process of scaffolding bootstrap on a laravel app (laravel version 8.*)

Step 1: Install Laravel UI ( we are installing UI version 3.0.0). To install, run the following command in the project directory shell:

composer require laravel/ui 3.0.0

Laravel UI has presets for all the popular CSS and JS pre-processors, and one of them is for Bootstrap.  

Step 2: Run the following command to avail the Bootstrap preset

php artisan ui bootstrap 
Run this if you want to install scaffolding with Auth  
php artisan ui bootstrap --auth

Step 3: Run the following command to download and install all the libraries in the required versions.

npm install

This will create a package log file.

Step 4: Run custom NPM run command specified in the package JSON file to compile assets. Assets compiled in development mode are ideal for applications still in staging or development mode, as the JS and CSS files are not minified.

npm run dev

Your bootstrap scaffolding is ready for use. To include these assets in view, you can use asset helper.

for CSS, you can use 
<link rel="stylesheet" href="{{ asset('css/app.css') }}" />

For JS, you can use
<script src="{{ asset('js/app.js') }}" defer></script>
 

Please note that if you run these commands on a windows machine, there are chances of compilation failures. The common issue is the version of NPM. Make sure you have 12 and above.