Issue
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)
Solution
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>
Answered By – Delcio Polanco
This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0