Quick setup the Bootstarp and Laravel 9 in few steps 🚀

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 🍻

Quick setup the Bootstarp and Laravel 9 in few steps 🚀

Comments (1)

More from this blog

6 Years Coding, 0 Things Shipped

Gogogaga, Learn Git like 5 years old

Easy Form validation with YUP (+ Formik) in react (For beginners)

1) Project Setup:

2) Setup laravel ui inside project

3) Setup the bootstrap (5) using php artisan

4) Setup up dev dependencies using NPM

5) Update the vite.config.js

6) Update the app.js file inside the `resource/js` folder

7) Now finally include bootstrap in your blade template

Command Palette

Comments (1)

More from this blog

1) Project Setup:

2) Setup laravel ui inside project

3) Setup the bootstrap (5) using php artisan

4) Setup up dev dependencies using NPM

5) Update the vite.config.js

6) Update the app.js file inside the resource/js folder

7) Now finally include bootstrap in your blade template

6) Update the app.js file inside the `resource/js` folder