Detailed explanation of how to quickly install Bootstrap in Laravel9.x

Elegantly and easily install the Bootstrap framework in Laravel 9.x (vite article)

This article will share with you the following experience of using the front-end workflow under Laravel 9.x. I used Laravel Mix before, but now This time we will use the officially recommended vite tool and continue to use bootstrap 5. This will not only facilitate course scholars to master the latest front-end workflow, but also adjust their favorite styles with a low threshold. The most important thing is not to affect the learning progress and rhythm of the tutorial. [Recommended: laravel video tutorial]

Write in front

##Development environment:

• The general environment is Windows 10/11 Homestead, both of which are the latest stable versions

• Node.js is installed on both platforms

• Laravel version is 9.x (I am using the latest 9.38.0 when posting). For other things not mentioned, follow the 9.x version tutorial.

• Do not use Laravel Mix, use the officially recommended new front-end packaging tool vite to complete the style modification tasks in the tutorial.

My purpose: Use Node.js on Windows and homestead platforms to avoid pitfalls in installing Bootstrap, so that hard-working Win users can learn the "L01 Laravel Tutorial- The "4.2. Style Beautification" chapter of "A Practical Introduction to Web Development" is elegant and easy.

No more nonsense, online operation

Operation method

First of all, it is assumed that the reader has already learned the chapter "4.2. Style Beautification", and unfortunately is stuck. Secondly, both my Windows computer and Homestread environment can run Node.js. If Node.js is not installed under Windows, you can search and download it through a search engine. The installation process is fool-proof and I won’t go into details.

First we do the following step according to the tutorial, but don’t execute it yet

composer require laravel/ui:3.4.5 --dev

Let’s change it. Here we directly get the default latest laravel/ui version and execute it in linux

composer require laravel/ui  // 发文时最新的版本是 4.0.1，对不住了版主，我自己偷摸的上到最新的版本惹
php artisan ui bootstrap

Then we open a terminal in the windows environment, such as powershell, and execute

npm config set registry=https://registry.npm.taobao.org
npm i

Then return to your editor, find the newly generated vite.coffig.js in the project root directory and modify it to The following effect

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

export default defineConfig({
   plugins: [
       laravel([
           'resources/js/app.js',
       ]),
   ],
   resolve: {
       alias: {
           '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
       }
   },
});

Then import boostrap 5’s scss

import './bootstrap';

// 以下为新增部分
import '../sass/app.scss'
import * as bootstrap from 'bootstrap'

in app.js, then go to the blade template of the project and replace the original mix () code. If we follow the tutorial here, we only need to change the default.blade.php file, that is, replace all these two lines of code

<link rel="stylesheet" href="{{ mix(&#39;css/app.css&#39;) }}">
<script src="{{ mix(&#39;js/app.js&#39;) }}"></script>

with @vite code

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

The following is my In the position where default.blade.php is placed

    
    @vite([&#39;resources/js/app.js&#39;])   <--- here!


    

        

            Weibo App
            

                
帮助
                
登录
            
        
    
    

        @yield('content')
    

, in our later study, anything involving Mix will be handled according to this idea.

Finally, enter the following command in the windows terminal

npm run build
// 或者
npm run dev

The operation is completed, refresh the following browser to see the effect.

The difference between dev and build is:

• dev can be adjusted at any time when it is suitable for development. Your modifications will take effect in real time and automatically. It is recommended to keep it open during development. Just hang a window in the background.

• build will be processed in one step and output css and js files. It will only be executed once and will not be automatic. It is suitable for the final release stage.

In terms of speed, compared to the laravel Mix front-end workflow, Vite will handle it steadily for you at lightning speed. Don’t worry, Vite’s processing speed is really too fast.

Project deployment

After our code is uploaded to the remote git repository and then pulled to the production environment, vite uses the css and js files generated by npm run build They will not be included in git management, that is, you cannot include them with local git add -A. We need to find the .gitignore file in the root directory of the local development project and comment or delete the /public/build line, as follows

/node_modules
# /public/build   <-- here
/public/hot
/public/storage
/storage/*.key
/vendor
.env
.env.backup
.phpunit.result.cache
Homestead.json
Homestead.yaml
auth.json
npm-debug.log
yarn-error.log
/.idea
/.vscode

Then the file we built can be detected by git add -A.

Of course, you can also compile styles online. As long as you understand this idea, you can draw inferences from one example.

Other tips

bootstrap 5 has deleted the original Jumbotron component of version 4, so you cannot see the corresponding style, which is normal. If you want to change it, please use your imagination and write one yourself.

Regarding the chapter 4.4. Browser cache issues, if you use vite's front-end workflow, after the build is completed, the suffix will be automatically added to the style file, so you can ignore this chapter and use vite to work. This problem does not exist in the model, skip and continue learning.

If you find that there are some places in this article where you can come up with your own methods, that would be best. My answer is not perfect. It would be best if everyone can come up with their own independent thinking questions or solutions during the learning process. As a result, everyone is welcome to explore solutions that suit you.

Final Thoughts

Then compared to the method in the moderator's tutorial that lets us use a specific version to learn laravel, but I still like to follow the official documentation instructions, try to use native methods to achieve relevant effects, and use the latest version in all aspects, which is also considered a version. I would like to recommend a "rebellious and evil way" based on the standardization idea. I also need to solve the new version compatibility issues I encounter from time to time. In short, I hope this article can provide a new idea for beginners. After all, we are in the learning stage, not production environment development. The more we learn, the better.

Compared with my previous 8.x experience sharing, this one is about learning and adapting new technologies. I was also stumped when I encountered the new version content for the first time. Study on your own, find solutions, and then solve problems. Learning ideas is more important than learning methods. I believe that the later versions of 10.x and 100.x will have more new content and changes. Everyone must master the ideas for solving problems and be rigid Learning methods will not work. I hope all beginners on the learning journey will not give up this beautiful framework. It would be a pity!

The above is the detailed content of Detailed explanation of how to quickly install Bootstrap in Laravel9.x. For more information, please follow other related articles on the PHP Chinese website!