CODEWITHSUNDEEP
javascriptnode.jstwitter-bootstrapexpressnpm
Diego Izquierdo Dussan
Diego Izquierdo Dussan

Reputation: 157

How can I add Bootstrap to a project in ExpressJS?

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)

Upvotes: 8

Views: 36361

Answers (9)

Carl Sagan
Carl Sagan

Reputation: 37

I know you said you wanted to use it locally, but for anyone who wants to know an easy way to implement bootstrap for an express project. In your views shared layout page, just add the cdn so it is applied to every page that extends the shared layout view.

link(rel="stylesheet", href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css", integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z", crossorigin="anonymous")
    script(src="https://code.jquery.com/jquery-3.5.1.slim.min.js", integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj", crossorigin="anonymous")
    script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js", integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV", crossorigin="anonymous")

Upvotes: 1

Rasikh
Rasikh

Reputation: 9

Using the following steps are effective and easy:

  1. npm install bootstrap

  2. use this link tag

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

inside your views files.

Upvotes: -3

Abdo-Host
Abdo-Host

Reputation: 4173

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')));

Upvotes: 1

Amirsalar
Amirsalar

Reputation: 729

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.

Upvotes: 4

Delcio Polanco
Delcio Polanco

Reputation: 422

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>

Upvotes: 5

Shahrukh Haider
Shahrukh Haider

Reputation: 474

You want to add Bootstrap in your project, but have you installed/ downloaded bootstrap files in your project?

Unless you are using express-generator (or other generators or frameworks), it won't be included by default.

You have two options. You can use yeoman generators to scaffold your application or you can use npm or yarn to install bootstrap for your application.

Just use:

npm install bootstrap --save

in your project's root folder. Verify that bootstrap folder in available in node_modules folder and check if the path is correctly set wherever bootstrap is referred.

You can also manually include bootstrap files, but try using npm as it installs all the dependencies for you.

Upvotes: 0

Lalit Dashora
Lalit Dashora

Reputation: 243

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 :)

Upvotes: 27

Nitin Bisht
Nitin Bisht

Reputation: 5361

You can try this:

 <link href="path" rel="stylesheet">

Here path will be the location of bootstrap.min.css file in your local machine. Example:

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

Similarly you can do this for bootstrap.min.js. As shown below:

<script src="path"></script>

Again Here path will be the location of bootstrap.min.js file in your local machine. Since It is javascript file Hence You need to use script tag here. Add these lines before body.

Upvotes: 0

Ronnie Jimenez
Ronnie Jimenez

Reputation: 67

You must try this

<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css”>
<script src=”//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js”></script>

I hope it will works! :)

Upvotes: -2

Related Questions