Setting up Bootstrap 5 Workflow using Laravel Mix (Webpack)

Bootstrap version 5 alpha is out. There are multiple ways in which you can get started with the Bootstrap website development.

The most simplest one is to import the library files via CDN; but that does not gives you full advantage of customization and using utilities API of Bootstrap 5.

There is also an option of setting up the Bootstrap workflow using WebPack but setting up the configuration was too complicated for my usecase, hence I decided to go with Laravel Mix which is basically a nice little wrapper built around Web-pack and does most of the job seamlessly.

Here are the steps of how I setup a simple workflow of Bootstrap 5 using Laravel Mix (Simple WebPack wrapper)

1. Create Project

Create a blank directory for the project you are creating, I am naming my directory my-bootstrap-project.

2. Initialize NPM Project

We’ll be using NPM for the package management. Make sure you have NodeJs and NPM installed in your system. Navigate inside your newly created directory and run the following command.

npm init -y

npm inti bootstrap project

This will create an package.json file in your project directory.

If you want to provide custom project version or description you are skip the -y suffix on npm init command.

3. Install Bootstrap

Next Up, We’ll install Bootstrap library in the project as a node dependency.

npm install bootstrap@next popper.js --save-dev

npm install bootstrap popper-js

Note: Bootstrap v5 has dropped jQuery requirement. If you’re not going to use Bootstrap’s JavaScript, and only going to use its styles, don’t worry about installing Popper.js.

4. Install Laravel Mix as Node Dependency

Now, Lets install Laravel Mix as node dependency by running the following command

npm install laravel-mix --save-dev

npm install laravel mix

Once Laravel-Mix is installed, next step is to copy it’s config file from the node_modules directory to the project root directory by running the following command

cp node_modules/laravel-mix/setup/webpack.mix.js ./

You should now see a file named webpack.mix.js in your project directory. This is the configuration file for Laravel Mix.

By default the file should contain a mix command which looks like below.

mix.js('src/app.js', 'dist/').sass('src/app.scss', 'dist/');

This denotes to compile the JS file named app.js and scss file named app.scss and put the compiled version in dist directory.

5. Import Bootstrap JS and SCSS

Create a new directory named src and create two blank files inside it named app.js and app.scss

Import Bootstrap’s Javascript by including following line in app.js file

import 'bootstrap';

Import Bootstrap scss library in app.scss by putting the following code

@import "~bootstrap/scss/bootstrap";

6. Add Compilation Scripts to package.json

Laravel-Mix provides you with different shortcuts to run the scripts that basically compiles your JS and SCSS.

Add the following scripts to your package.json file

"scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},

7. NPM Run dev

To use Bootstrap in our HTML page, we’ll need the compiled version of JS and SCSS files.

Run the following command which triggers Laravel-Mix to compile the JS and SCSS.

npm run dev

Note : When you run this command for the very first time, laravel-mix will download the additional dependencies it needs to successfully compile the JS and CSS.

Run it again and you should see the JS and CSS file compiled.

npm run dev laravel mix

You should now have two additional files in your project’s dist directory, app.js and app.css

Note: To compress and minify JS and CSS run npm run prod instead.  

8. Include Bootstrap Style and Script in HTML

Let’s test out our workflow, create a new page index.html in your project root directory.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="dist/app.css" rel="stylesheet">
</head>
<body class="py-5">

    <div class="container">
        <!-- Simple Bootstrap Alert-->
        <div class="alert alert-primary" role="alert">
            A simple primary alert—check it out!
        </div>

        <!-- Simple Bootstrap Modal-->
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
            Launch demo modal
        </button>
        
        <!-- Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                </div>
                <div class="modal-body">
                ...
                </div>
                <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
            </div>
        </div>
    </div>
    <script src="dist/app.js" type="text/javascript"></script>
</body>
</html>

I have included Bootstrap CSS and JS library in the HTML page, and have also included a simple alert message and a Bootstrap Modal to test if both Styling and JS part works fine.

Here is the output.

Bootstrap 5 Sample page

 

That’s all about setting up your Bootstrap workflow using Laravel-Mix.

Wordpress Hosting on SiteGround

Easy website management with Amazing Site Speed and Affordable Prices (Starting 3.99 $ / month)
SiteGround 70% Discount

Related Articles

If you like our content, please consider buying me a coffee.

Thank you for your support!

Buy me a coffeeBuy me a coffee

Leave a reply:

Your email address will not be published.

Site Footer