So i have installed bootstrap using npm -bootstrap@3 but when i am trying to include bootstrap.min.css file from node_modules in my application, it shows this error in my console :
error message
In the network tab it shows
404 not found on the bootstrap source.
Below are some images on my project structue:
project folder structure
ejs code to include bootstrap file
Whats the issue here?
I got the same issue following this tutorial. You can solve this by express.static built-in middleware function.
Add following code to your app.js file
app.use(express.static('public'))
Now you can place your bootstrap files in this directory(or subdirectory) and link them relative to public directory.
You can find more info here. https://expressjs.com/en/starter/static-files.html
Looks like you are building the relative path based on location of your ejs file, what actually you need to do is look at the path how ejs view is mapped and you need to make it relative form there.
In your case its header.ejs and lets say you are serving it from root page it should be ../node_modules but if you do this it will break in a different page like /posts/foo so the best way to fix your problem is keeping your css files in /public/css folder and add public folder as your static folders and use path like /css/bootstrap.min.css
ejs without running the node server ,this file can not access to bootstrap.min.css .
Why not use from CDN?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
Because you're trying to access to static files from the server and your bootstrap.min.css is a static file,as we know nodejs provide a way to serve static files if you are using Express.
For example,you can use the following code to serve images, CSS files, and JavaScript files in a directory named public:
app.use(express.static('public'))
You should know that :
Express looks up the files relative to the static directory, so the name of the static directory is not part of the URL.
I ran into the same issue and decided to give middleware like express.static() a go.
warning: when I declared express.static("public") I put it at the bottom of my app.js file and it didn't work for me. So I moved it up and it works.. here is the example
"use strict";
const express = require("express"),
app = express();
const layouts = require("express-ejs-layouts");
app.set("view engine", "ejs");
app.set("port", process.env.PORT || 3000);
app.use(
express.urlencoded({
extended: false
})
);
app.use(express.json());
app.use(layouts);
app.use(express.static("public"));
app.get("/", (req, res) => {
res.render("index");
});
app.listen( app.get("port"), () => {console.log(`Server running at http://localhost:${app.get("port")}`);
});
Then in public folder (where my css, js, images are), I put boostrap.css there In layout.ejs I have html file and refer it as
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.8, maximum-scale=1">
<title>School of business</title>
<link rel="stylesheet" href="/css/bootstrap.css"> <!-- BOOTSTRAP -->
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
.........
This worked for me, using Bootstrap CDN
head.ejs
> <!-- views/partials/head.ejs --> <meta charset="UTF-8" /> <title>Super
> Awesome</title>
>
> <!-- Latest compiled and minified CSS --> <link rel="stylesheet"
> href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
> integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
> crossorigin="anonymous" />
Include this in index.ejs
<!DOCTYPE html>
<html>
<head>
<%- include ('../partials/head') %>
</head>
<body>
<div class="jumbotron">
<%- include ('../partials/form') %>
</div>
</body>
</html>
