Quick setup the Bootstarp and Laravel 9 in few steps   🚀

roshan shrestharoshan shrestha
2 min read

Table of contents

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 🍻

814.jpeg

9
Subscribe to my newsletter

Read articles from roshan shrestha directly inside your inbox. Subscribe to the newsletter, and don't miss out.

LaravelLaravel 9BootstrapBootstrap 5

Written by

roshan shrestha
roshan shrestha

Software engineer