1) Project Setup:
I am going to use the composer to setup everything here.
composer create-project laravel/laravel simple-project-name
This will basically setup the new laravel project in your machine.
Once the setup is complete, cd simple-project-name to move inside your project and
follow below code.
2) Setup laravel ui inside project
composer require laravel/ui
This add the laravel/ui package inside your project. We will further use this ui package to add the bootstrap.
So far so good , Hopefully you are not facing any issue till now. Moving on,
3) Setup the bootstrap (5) using php artisan
php artisan ui bootstrap
Before we move on to another steps, make sure you have nodejs setup on your machine.
4) Setup up dev dependencies using NPM
npm install
and build everything
npm run build
5) Update the vite.config.js
Add the resolve: {} field just below the plugins inside the vite.config.js,
resolve: {
alias: {
"~bootstrap": path.resolve(__dirname, "node_modules/bootstrap"),
},
},
Make sure to import the path at the top
So now your vite config file should looks something like this:
import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import path from "path";
export default defineConfig({
plugins: [
laravel({
input: ["resources/sass/app.scss", "resources/js/app.js"],
refresh: true,
}),
],
resolve: {
alias: {
"~bootstrap": path.resolve(__dirname, "node_modules/bootstrap"),
},
},
});
6) Update the app.js file inside the resource/js folder
Just import the resource/scss/app.scss file inside the resource/js/app
so now your app.js file should look like this
import "./bootstrap";
// add this like
import "../sass/app.scss";
7) Now finally include bootstrap in your blade template
@vite(['resources/js/app.js'])
My app.blade.php looks like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Article App</title>
// New like added here
@vite(['resources/js/app.js'])
</head>
Everything is now done, just make sure the restart the server by doing
php artisan serve
And rebuild the npm package by
npm run build
Or or or, just use the CDN if you want to quickly start.
Byeeeeeeeee 🍻
