Installing Bootstrap In Express.JS App Using NPM

Home / Featured / Installing Bootstrap In Express.JS App Using NPM

How To Install Bootstrap 4 In ExpressJS

For a long time many developers used the Bower front-end package manger to install Twitter Bootstrap 4 in a ExpressJS app using the Pug Template Engine. This was the standard way of using Bootstrap 4 with Pug prior to Yarn & upgrades to NPM.

There’s also the NPM warning that indicates the repository is deprecated & you should consider migrating to another technology. While the NPM warning suggests using Yarn, upgrades to both NPM & the Bootstrap module on NPM has made NPM just as capable & efficient to use Bootstrap as Yarn.

So lets get rid of that annoying deprecated repository warning with Bower, and start using NPM to install Bootstrap 4 with ExpressJS using Node. It’s a lot easier for those of us that use NPM to migrate, & for noobies who aren’t yet up for learning the differences in Yarn & NPM just yet,

Install Bootstrap into Project Directory using NPM

First lets install the Node Module for bootstrap via the command line in the root directory of your project folder.

npm i bootstrap

Check your package.json file to make sure that the package has been added to your dependencies.

Add Express Middleware for Bootstrap Module

Now that you have added Bootstrap 4 to your package.json file via NPM, you now have access to all the files in the bootstrap folder located inside the node_modules folder in the root directory of your project.

While you have access now to Bootstrap 4 in your project, you don’t want your project to show the node_modules. This is where a handy piece of ExpressJS middleware that can fix this problem. Using the app.use method the path.join argument, we can hide the node_modules folder, and have access to everything in the CSS & JS folders of the module.

Add the following lines of code to your app.js file, or the file serving your .pug files.

// Load Bootstrap 4 CSS & JS Directores Using Express Middleware
app.use('/bootstrap', express.static(path.join(__dirname + '/node_modules/bootstrap/dist/css/')));
app.use('/bootstrap', express.static(path.join(__dirname + '/node_modules/bootstrap/dist/js/')));

Save the file.

Link Bootstrap CSS & JS Files in Pug

Once the Express middleware has been added to the app.js file, it’s time to bring the dependencies into your layout.pug file. Since Express ships standard with pug as the default template engine, CDN files don’t work correctly, so that is why we linked the file through the bootstrap dependency via NPM.

This is also the preferred method with NPM according to official Bootstrap 4 documentation.

Simply add any of the CSS stylesheets & JS files you need from the bootstrap folder located in your node_modules folder of your project directory. We used the bootstrap.css file & the bootstrap.bundle.min.js files.

The bootstrap.bundle.min.js file includes all the Popper dependencies, so you can add this in the script tag at the bottom of your layouts.pug page.

We will go ahead and use the JQuery CDN for load JQuery and place it in a link tag it in the head section of the layouts.pug file so that it loads before the Popper dependencies in the bootstrap.bundle.min.js file.

Link Bootstrap 4 CSS File in Pug Using Link Tag

Insert your link tags just above the body tag in your layout.pug file & navigate to the bootstrap CSS directory & CSS file version of your choosing like we did with the bootstrap.css example below. Don’t forget to include the CDN for JQuery in the head.

layouts.pug

head
     title Your App Title 
     link(rel='stylesheet' href='/bootstrap/bootstrap.css')
     link(rel='stylesheet' href='/css/style.css')
     script(src='https://code.jquery.com/jquery-3.3.1.min.js')
body
Link JavaScript File for Bootstrap 4 in Pug Using Script Tag

Now insert your script tag at the very bottom of the layouts.pug page. Be sure to use one of the JS bundle files if you’re planning on using features that require PopperJS . The dependencies for Popper will be automatically loaded via the bootstrap NPM package.

Here is an example of how to link a bootstrap.bundle.min.js file using the bootstrap NPM package.

layouts.pug

script(src='bootstrap/dist/js/bootstrap.bundle.min.js')

Save the layouts.pug file.

Start Using Bootstrap 4 in your Pug Templates

Now you should be able to reload your server, refresh the page, and be able to start using Bootstrap 4 features in your ExpressJS app with Pug.

Make sure to test your page by commenting out the link tag line & checking to see if the font changes.

Simply add the Bootstrap 4 classes to your elements using the . syntax. Here is an example of a simple pug file to test if you haven’t created any pages in your project yet:

layouts.pug

header
      nav.navbar.navbar-expand-md.navbar-light.fixed-top.bg-light
        a.navbar-brand(href='#') #{title}
        button.navbar-toggler(type='button', data-toggle='collapse', data-target='#navbarCollapse', aria-controls='navbarCollapse', aria-expanded='false', aria-label='Toggle navigation')
          span.navbar-toggler-icon
        #navbarCollapse.collapse.navbar-collapse
          ul.navbar-nav.mr-auto
            li.nav-item.active
              a.nav-link(href='#')
                | Home 
                span.sr-only (current)
            li.nav-item
              a.nav-link(href='#') Link
            li.nav-item
              a.nav-link.disabled(href='#', tabindex='-1', aria-disabled='true') Disabled
          form.form-inline.mt-2.mt-md-0
            input.form-control.mr-sm-2(type='text', placeholder='Search', aria-label='Search')
            button.btn.btn-outline-success.my-2.my-sm-0(type='submit') Search

Conclusion

While bower still works, it’s best to migrate away from it for obvious security reasons. I hope this helps some people when cloning repositories and getting the bower deprecated warning, as I find it a lot easier to migrate to as an NPM user. I also didn’t see a lot of information on the web about migrating from bower to NPM, so I wanted to spread the word a little bit for us NPM users.

While Webpack is probably more suitable for handling your dependency in a larger application, it may also be a little bit more than you want to setup on a simpler project that doesn’t use a lot of advanced Bootstrap features. Webpack can also be more challenging to configure for noobies.

We hope this helped a few people who struggled getting Bootstrap installed properly with ExpressJS & Pug.

Thanks for reading the blog, and stay tuned for more web development topics on JavaScript & web development in general.

bootstrap-npm-pug-image
Bootstrap installation in Pug via NPM

Helpful Links

Leave a Reply

  •  
    Previous Post

    Technology Consulting

    home-surveillance