Can node presented ejs files use offline bootstrap?

问题

I'm new to node and full stack development and hope I ask this correctly and not carelessly or offensively for your particular level of understanding.

My dev environment is Internet connected, production will not be and I want to use bootstrap.css with node. Apache/httpd is not an option in production.

Testing bootstrap locally has been challenging, the correct directory for the css file is believed correct.

The main directory on CENTOS 7 is myapp, contains app0.js, the node_modules with espress and body-parser and all dependencies, and the views directory which contains grid.ejs.

myapp/
    app0.js
    node_modules
    views/
        grid.ejs
    public/
        bootstrap.css

Here is grid.html (which works on apache):

<!DOCTYPE html>
<html>

<head>
  <title>Bootstrap Grid Test</title>
  <link rel="stylesheet" type="text/css" href="bootstrap.css">

  <style type="text/css">
    .pink {
      background: yellow;
      border: 3px solid red;
  </style>  
</head>

<body>
  <div class="row">
    <div class="col-lg-2 pink"><center>2 columns </center></div>
    <div class="col-lg-7 pink"><center>7 columns </center></div>
    <div class="col-lg-3 pink"><center>3 columns </center></div>
  </div>

</body>

</html>

And here is what apache shows for grid.html:

https://imgur.com/VanVZJn "bootstrap with httpd"

However app0.js does not!

So bootstrap.css works (1) when referenced on internet - which I cannot use in production (2) from httpd in my dev environment via http code but not from an ejs file.

Note: I am able to reach bootstrap from node, because there were 404 errors when it was not reachable showing from the terminal where node was launched. After at least 12 hours trying to understand this, I'm stumped. Sadly with a short timeline to have a solution, I turn to you fine readers!

App0.js //setup

var express = require('express'),
    app = express(),
    bodyParser = require('body-parser')

app.set('view engine','ejs');
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

app.get("/grid", function(req, res, next){
    res.render("grid")
});

app.listen(3000,function(){
    console.log("serving test demo on port 3000")
});

views/grid.ejs

<!DOCTYPE html>
<html>

<head>  
  <title>Bootstrap Grid System</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="public/bootstrap.css">
  <style type="text/css">
      .pink {
          background: yellow;
          border: 3px solid red;
       }  
  </style>
</head>

<body>
    <div class="row">
        <div class="col-lg-2 pink"><center>2</center></div>
        <div class="col-lg-7 pink"><center>7</center></div>
        <div class="col-lg-7 pink"><center>3</center></div>
    </div>

</body>

</html>

shown here:

https://imgur.com/ZLOgZKT "bootstrap not working"

回答1:

You have to define on your app0.js file the public path from where you are going to serve static files. Try the following app0.js file requiring the path module and using express.static after bodyParser.json():

var express = require('express'),
    app = express(),
    bodyParser = require('body-parser'),
    path = require('path')

app.set('view engine','ejs');
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
app.use(express.static(path.join(__dirname, 'public')));

app.get("/grid", function(req, res, next){
    res.render("grid")
});

app.listen(3000,function(){
    console.log("serving test demo on port 3000")
});

And your grid.ejs file link the bootstrap file this way:

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

来源：https://stackoverflow.com/questions/54268605/can-node-presented-ejs-files-use-offline-bootstrap

标签

node.js

twitter-bootstrap

ejs

offline