Laravel 9 Bootstrap Template

Overview:

The Laravel 9 + Bootstrap Template is a modified version of the laravel/laravel package. It includes several changes such as the removal of PostCSS, the installation of SASS and Bootstrap, and the restructuring of resource folders. The template also includes modifications to the vite.config.js file to include the new resource files in the compilation process. In addition, changes have been made to the welcome view, including the inclusion of assets using the @vite directive and the modification of content.

Features:

• Modified version of laravel/laravel package
• Removal of PostCSS
• Installation of SASS
• Installation of Bootstrap
• Restructuring of resource folders
• Modifications to vite.config.js for compilation
• Inclusion of assets in the welcome view using @vite directive
• Modification of content in the welcome view

Installation:

To reproduce this template, follow these steps:

1. Modify the package.json file:

   • Update the version of the “vite” package to “^3.0.0”.
   • Update the version of the “laravel-vite-plugin” package to “^0.6.0”.

2. Remove PostCSS by running the command:

   npm remove postcss
   

3. Install all NPM packages (including updated versions of vite and laravel-vite-plugin) by running the command:

   npm i
   

4. Install SASS by running the command:

   npm i --save-dev sass
   

5. Rename the “css” folder in the “resources/” directory to “scss”.

6. Rename the “app.css” file in the new “resources/scss” directory to “app.scss”.

7. Modify the vite.config.js file:

   • Change the “laravel(…)” section to include the “resources/scss/app.scss” and “resources/js/app.js” files in the compilation process (npm run dev/build).
   • Add the following section after the “plugins” section:

     alias: {
       ...
       '~resources': path.resolve(__dirname, 'resources'),
     }
     

8. Add the line “import ‘~resources/scss/app.scss’;” in the resources/js/app.js file to import the main SCSS file using JavaScript.

9. Add the “@vite(‘resources/js/app.js’)” directive in the section of the resources/views/welcome.blade.php file to include the assets in the view.

10. Add the following lines in the resources/js/app.js file to instruct Vite and Blade to process the assets correctly:

    import '@vitejs/plugin-legacy';
    import '@vitejs/plugin-views';
    

11. Add the line “package-lock.json” in the .gitignore file located in the root of the project to avoid publishing it to the repository.

12. Install Bootstrap by running the command:

    npm i --save bootstrap @popperjs/core
    

13. Add the line “const path = require(‘path’);” in the vite.config.js file before the line “export default defineConfig({”.

14. Add the line “’~bootstrap’: path.resolve(__dirname, ’node_modules/bootstrap’),” in the resolve.alias object in the vite.config.js file.

15. Add the line “@import “~bootstrap/scss/bootstrap”;” at the top of the resources/scss/app.scss file to import the CSS part of Bootstrap.

16. Add the line “import * as bootstrap from ‘bootstrap’;” in the resources/js/app.js file to import the JS part of Bootstrap.

Summary:

The Laravel 9 + Bootstrap Template is a customized version of the laravel/laravel package that includes the installation of SASS and Bootstrap, removal of PostCSS, and restructuring of resource folders. Additionally, modifications are made to the compilation process and the welcome view. By following the provided installation guide, users can reproduce this template in their Laravel projects.