How can I add Bootstrap to a project in ExpressJS?

javascript node.js twitter-bootstrap express npm

22,514

Solution 1

You should reference your stylesheet in your html file.

install boostrap:

npm install --save bootstrap

server.js

var express = require("express");
var app = express();
var router = express.Router();
var path = __dirname + '/views/'; // this folder should contain your html files.


router.get("/",function(req,res){
  res.sendFile(path + "index.html");
});

app.use("/",router);

app.listen(3000,function(){
  console.log("Live at Port 3000");
});

index.html

This file should be located in yourProject/views/:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Single page web app using Angularjs</title>
<link href="../node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<div>
<nav class="navbar navbar-inverse" role="navigation" style="padding-left:130px;">
       <ul class="nav navbar-nav">
      <li class="active"><a href="/">Home<span class="sr-only">(current)</span></a></li>
      <li><a href="/about">About us</a></li>
      <li><a href="/contact">Contact us</a></li>
    </ul>
</nav>
</div>
<br/>
<div class="jumbotron"> <p>
This is place your index including bootstrap
</p></div>
</div>

<script src="../node_modules/bootstrap/dist/js/bootstrap.js" type="text/javascript"></script>
</body>
</html>

Solution 2

You can try this as well, worked for me.

Install bootstrap

npm install bootstrap@3

Now in app.js file add the following code:

app.use('/css', express.static(__dirname + '/node_modules/bootstrap/dist/css'));

Use bootstrap.css in your layout or any other file

<link rel="stylesheet" href="/css/bootstrap.min.css" />

Make sure the path you have provided is correct.

I hope this will work :)

Solution 3

Let's assume that you have installed the latest version of bootstrap using the following command:

npm install bootstrap

Now, assume that in your root directory, you have a public folder that you want to use that as your static asset. Assume that the structure of the public directory looks like the following:

'public/styles/css'

Now if you want to use the bootstrap distribution and use the contents of the css folder as if it is in your public/styles/css folder, you may do the following:

const express = require('express');
const app = express();

// STATIC ASSETS:

app.use(express.static(path.join(__dirname, "public"))); // <- this line will us public directory as your static assets


app.use("/styles/css", express.static(path.join(__dirname, "node_modules/bootstrap/dist/css"))); // <- This will use the contents of 'bootstrap/dist/css' which is placed in your node_modules folder as if it is in your '/styles/css' directory.

Solution 4

node_modules is a private directory and shouldn't be exposed. By default the public directory is the public root path for static files:

app.use(express.static(path.join(__dirname, 'public')));

- Go to views folder in layout file

<link href="/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

If you really wanted to serve up node_modules, which would be a bad idea, add the following beneath the app.use(express.static(...)); line above:

app.use(express.static(path.join(__dirname, 'node_modules')));

View more solutions

22,514

Author by

Diego Izquierdo Dussan

Updated on August 12, 2021

Comments

Diego Izquierdo Dussan over 2 years
I'm developing an aplication using nodejs and the framework Express. I want to add Bootstrap to my project in local. I added this to my index <head>
```
<script language="javascript" src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css"/>
```
I found that I have to add this code to my app.js
```
app.use(express.static(__dirname + '../node_modules/bootstrap/dist'));
```
but it doesn't works too. (I have in mind the path of the Bootstrap and use '../modules...' too)
31piy about 6 years

OP wants to use bootstrap from his own installation, and not from CDN.
Diego Izquierdo Dussan about 6 years

thaks for comment. but there you are using cdn, to use Boostrap calling the web but i need to use it in local.
Diego Izquierdo Dussan about 6 years

thanks, and yes i installed Bootstrap. and the Bootstrap folder is in the node_modules.
Delcio Polanco about 6 years

Considering this i will update my answer using bootstrap locally.
Gaurav Patil almost 3 years

How can I add bootstrap js and jquery?
slasky over 2 years

Please provide the exact commands or code needed. Please include the link that you are talking about. Please explain why this solution is helpful beyond other answers provided.