What is the best way to add a bootstrap file to my ejs templates?

Question

What is the best way to add a bootstrap file to my ejs templates?

I recently installed bootstrap using npm with the command 'npm -bootstrap@3'. However, when attempting to include the bootstrap.min.css file from node_modules in my application, I encountered an error message on my console. Here is a screenshot of the error: https://i.sstatic.net/JlRlV.jpg

Upon checking the network tab, it showed a "404 not found" error for the bootstrap source.

Below are some images showing my project structue:

Here is the project folder structure: https://i.sstatic.net/3mMv6.jpg

This is the ejs code snippet used to include the bootstrap file: https://i.sstatic.net/Mb7hg.jpg

Can anyone help me identify and resolve this issue?

javascript css node.js twitter-bootstrap ejs

Answer 1

Answer №1

Encountering the same issue while following a tutorial? No need to worry! You can easily resolve this by using the express.static built-in middleware function.

Create a folder named public
Add the following code snippet to your app.js file:

app.use(express.static('public'))
Now, you can store your bootstrap files in this directory (or a subdirectory) and link them relative to the public directory.

For more detailed information, you can visit: https://expressjs.com/en/starter/static-files.html

Answer 2

Encountering the same issue while following a tutorial? No need to worry! You can easily resolve this by using the express.static built-in middleware function.

Create a folder named public
Add the following code snippet to your app.js file:

app.use(express.static('public'))
Now, you can store your bootstrap files in this directory (or a subdirectory) and link them relative to the public directory.

For more detailed information, you can visit: https://expressjs.com/en/starter/static-files.html

Answer 3

Answer №2

It appears that you are constructing the relative path based on the location of your ejs file. What you really need to do is examine how the ejs view is mapped and make it relative from there. In this scenario, assuming it's header.ejs being served from the root page, the path should be ../node_modules. However, using this path may cause issues on a different page like /posts/foo. The best solution to address the problem is by placing your css files in the /public/css folder, adding public folder as your static folders, and using a path like /css/bootstrap.min.css

Answer 4

It appears that you are constructing the relative path based on the location of your ejs file. What you really need to do is examine how the ejs view is mapped and make it relative from there. In this scenario, assuming it's header.ejs being served from the root page, the path should be ../node_modules. However, using this path may cause issues on a different page like /posts/foo. The best solution to address the problem is by placing your css files in the /public/css folder, adding public folder as your static folders, and using a path like /css/bootstrap.min.css

Answer 5

Answer №3

Why not opt for a CDN option?

<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">

Answer 6

Why not opt for a CDN option?

<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">

Answer 7

Answer №4

When attempting to retrieve static files from the server and encountering an issue with accessing bootstrap.min.css, remember that Node.js offers a solution for serving static files when using Express.

To serve images, CSS files, and JavaScript files in a directory named public, you can implement the following code:

app.use(express.static('public'))

It is important to note:

Express handles file retrieval relative to the static directory, meaning the directory name is not included in the URL path.

Answer 8

When attempting to retrieve static files from the server and encountering an issue with accessing bootstrap.min.css, remember that Node.js offers a solution for serving static files when using Express.

To serve images, CSS files, and JavaScript files in a directory named public, you can implement the following code:

app.use(express.static('public'))

It is important to note:

Express handles file retrieval relative to the static directory, meaning the directory name is not included in the URL path.

Answer 9

Answer №5

I encountered the same issue and decided to experiment with middleware such as express.static().

Caution: I faced an issue where placing express.static("public") at the bottom of my app.js file did not work for me. However, moving it up resolved the problem. Here is an 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")}`);
});

In the public folder (where my css, js, images are located), I placed boostrap.css there. In layout.ejs, I have an html file and reference it as follows:

<!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>

.........

take a look at the image here

Answer 10

I encountered the same issue and decided to experiment with middleware such as express.static().

Caution: I faced an issue where placing express.static("public") at the bottom of my app.js file did not work for me. However, moving it up resolved the problem. Here is an 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")}`);
});

In the public folder (where my css, js, images are located), I placed boostrap.css there. In layout.ejs, I have an html file and reference it as follows:

<!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>

.........

take a look at the image here

Answer 11

Answer №6

Bootstrap CDN was the solution that worked best for me.

header.ejs

> <!-- views/partials/header.ejs --> <meta charset="UTF-8" /> <title>Amazing
> Website</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" />

Be sure to add this code snippet in homepage.ejs

<!DOCTYPE html>
<html>
  <head>
    <%- include ('../partials/header') %>
  </head>
  <body>
    <div class="jumbotron">
      <%- include ('../partials/form') %>
    </div>
  </body>
</html>

Answer 12

Bootstrap CDN was the solution that worked best for me.

header.ejs

> <!-- views/partials/header.ejs --> <meta charset="UTF-8" /> <title>Amazing
> Website</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" />

Be sure to add this code snippet in homepage.ejs

<!DOCTYPE html>
<html>
  <head>
    <%- include ('../partials/header') %>
  </head>
  <body>
    <div class="jumbotron">
      <%- include ('../partials/form') %>
    </div>
  </body>
</html>

What is the best way to add a bootstrap file to my ejs templates?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Enzyme's simulate() failing to produce expected results with onChange event

Effortlessly initiate the consecutive playback on SoundCloud

Building a node.js form that supports multiple images and input fields

updating the row of an html table with elements from a javascript object

Building an instance using an object and an array with Vue.js 2.0

How to substitute "</div>" using JavaScript's .replace method

Using the Pug template in Express: Implementing inheritance and making Block functionality work across various routes in Express

Using Vue.js to display svg content inside the <svg> element

Incorporate a click function onto the image within the canvas

When using Flexbox with a column wrap and setting the height to min-content, the wrapping behavior may not

Using VueJs's createElement() to dynamically insert HTML content

What is the best way to integrate new entries into the data source of a Kendo UI grid?

The res.send() method in Restify was not triggered within the callback function of an event

Creating a tree structure in JavaScript by parsing a collection of URLs

Check for nested objects while watching - NuxtJS (Vue) in its most recent release

"An issue with the setTimeout function in React is leading to the page constantly refreshing

Utilizing declaration files in a TypeScript application to provide global exposure of types

What is the best way to configure the default entry point for a package.json file in a React

Using the combination of Node.js, ZeroMQ, and Socket.io, we can implement scoping per

Implementing a search filter for special characters in AngularJS