Table of Contents
Elegantly and easily install the Bootstrap framework in Laravel 9.x (vite article)
Home PHP Framework Laravel Detailed explanation of how to quickly install Bootstrap in Laravel9.x

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

Nov 18, 2022 pm 04:47 PM
laravel bootstrap

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
Copy after login

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
Copy after login

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
Copy after login

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'),
       }
   },
});
Copy after login

Then import boostrap 5’s scss

import './bootstrap';

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

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>
Copy after login

with @vite code

@vite([&#39;resources/js/app.js&#39;])
Copy after login

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




    @yield('title', 'Weibo App') - Laravel 入门教程
    @vite([&#39;resources/js/app.js&#39;])   <--- here!


    
    
@yield('content')
Copy after login

, 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
Copy after login

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
Copy after login

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Nordhold: Fusion System, Explained
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1665
14
PHP Tutorial
1269
29
C# Tutorial
1249
24
Laravel Introduction Example Laravel Introduction Example Apr 18, 2025 pm 12:45 PM

Laravel is a PHP framework for easy building of web applications. It provides a range of powerful features including: Installation: Install the Laravel CLI globally with Composer and create applications in the project directory. Routing: Define the relationship between the URL and the handler in routes/web.php. View: Create a view in resources/views to render the application's interface. Database Integration: Provides out-of-the-box integration with databases such as MySQL and uses migration to create and modify tables. Model and Controller: The model represents the database entity and the controller processes HTTP requests.

Solve caching issues in Craft CMS: Using wiejeben/craft-laravel-mix plug-in Solve caching issues in Craft CMS: Using wiejeben/craft-laravel-mix plug-in Apr 18, 2025 am 09:24 AM

When developing websites using CraftCMS, you often encounter resource file caching problems, especially when you frequently update CSS and JavaScript files, old versions of files may still be cached by the browser, causing users to not see the latest changes in time. This problem not only affects the user experience, but also increases the difficulty of development and debugging. Recently, I encountered similar troubles in my project, and after some exploration, I found the plugin wiejeben/craft-laravel-mix, which perfectly solved my caching problem.

How to learn Laravel How to learn Laravel for free How to learn Laravel How to learn Laravel for free Apr 18, 2025 pm 12:51 PM

Want to learn the Laravel framework, but suffer from no resources or economic pressure? This article provides you with free learning of Laravel, teaching you how to use resources such as online platforms, documents and community forums to lay a solid foundation for your PHP development journey from getting started to master.

Laravel user login function Laravel user login function Apr 18, 2025 pm 12:48 PM

Laravel provides a comprehensive Auth framework for implementing user login functions, including: Defining user models (Eloquent model), creating login forms (Blade template engine), writing login controllers (inheriting Auth\LoginController), verifying login requests (Auth::attempt) Redirecting after login is successful (redirect) considering security factors: hash passwords, anti-CSRF protection, rate limiting and security headers. In addition, the Auth framework also provides functions such as resetting passwords, registering and verifying emails. For details, please refer to the Laravel documentation: https://laravel.com/doc

Laravel framework installation method Laravel framework installation method Apr 18, 2025 pm 12:54 PM

Article summary: This article provides detailed step-by-step instructions to guide readers on how to easily install the Laravel framework. Laravel is a powerful PHP framework that speeds up the development process of web applications. This tutorial covers the installation process from system requirements to configuring databases and setting up routing. By following these steps, readers can quickly and efficiently lay a solid foundation for their Laravel project.

What versions of laravel are there? How to choose the version of laravel for beginners What versions of laravel are there? How to choose the version of laravel for beginners Apr 18, 2025 pm 01:03 PM

In the Laravel framework version selection guide for beginners, this article dives into the version differences of Laravel, designed to assist beginners in making informed choices among many versions. We will focus on the key features of each release, compare their pros and cons, and provide useful advice to help beginners choose the most suitable version of Laravel based on their skill level and project requirements. For beginners, choosing a suitable version of Laravel is crucial because it can significantly impact their learning curve and overall development experience.

How to view the version number of laravel? How to view the version number of laravel How to view the version number of laravel? How to view the version number of laravel Apr 18, 2025 pm 01:00 PM

The Laravel framework has built-in methods to easily view its version number to meet the different needs of developers. This article will explore these methods, including using the Composer command line tool, accessing .env files, or obtaining version information through PHP code. These methods are essential for maintaining and managing versioning of Laravel applications.

The difference between laravel and thinkphp The difference between laravel and thinkphp Apr 18, 2025 pm 01:09 PM

Laravel and ThinkPHP are both popular PHP frameworks and have their own advantages and disadvantages in development. This article will compare the two in depth, highlighting their architecture, features, and performance differences to help developers make informed choices based on their specific project needs.

See all articles