I'm just starting out with Express and I'm trying to figure out why, when I run my app, the Bootstrap font isn't rendered (it's showing the text in simple Times New Roman). I'm pretty sure I'm using the correct paths because when I open my index.html in my browser the font is rendered correctly. I also tried this with a Bootstrap navbar, and Bootstrap doesn't appear to work correctly when I try to run it through Node, but it works, again, when I view the HTML file in my browser independently. Changing the path of the Bootstrap directory to "/public/bootstrap..." causes it to render incorrectly both ways. How do I fix this?
index.html:
<html>
<head>
<title>X</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="../public/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="screen">
</head>
<body>
<script src=".js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="container">
<h1>Under Construction</h1>
<p>This website is under construction. Come back soon!</p>
</div>
</body>
</html>
web.js (my main app file):
var express = require('express')
var app = express()
app.set('view engine', 'ejs')
app.engine('html', require('ejs').renderFile)
app.get('/', function(req, res) {
res.render('index.html')
})
var port = process.env.PORT || 5000;
app.listen(port, function() {
console.log("Listening on " + port);
})
I'm just starting out with Express and I'm trying to figure out why, when I run my app, the Bootstrap font isn't rendered (it's showing the text in simple Times New Roman). I'm pretty sure I'm using the correct paths because when I open my index.html in my browser the font is rendered correctly. I also tried this with a Bootstrap navbar, and Bootstrap doesn't appear to work correctly when I try to run it through Node, but it works, again, when I view the HTML file in my browser independently. Changing the path of the Bootstrap directory to "/public/bootstrap..." causes it to render incorrectly both ways. How do I fix this?
index.html:
<html>
<head>
<title>X</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="../public/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="screen">
</head>
<body>
<script src="http://code.jquery./jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="container">
<h1>Under Construction</h1>
<p>This website is under construction. Come back soon!</p>
</div>
</body>
</html>
web.js (my main app file):
var express = require('express')
var app = express()
app.set('view engine', 'ejs')
app.engine('html', require('ejs').renderFile)
app.get('/', function(req, res) {
res.render('index.html')
})
var port = process.env.PORT || 5000;
app.listen(port, function() {
console.log("Listening on " + port);
})
2 Answers
Reset to default 101) bootstrap and express have nothing to do with each other. Bootstrap runs on the client side pletely, and express is a server middleware lib over node.js
2) Why are you serving bootstrap yourself? better use a CDN :
- http://www.bootstrapcdn.
- http://hostedbootstrap./
3) if you insist on serving it yourself add a static directory so that express can serve static files (adding a static will also serve you when you try and serve js / css for yoursite but still prefer to serve bootstrap from a CDN.
app.use(express.static(path.join(__dirname, 'public')));
then no need to use public, just use the root path right to your css:
bootstrap/css/bootstrap.min.css
i.e.
<link href="../public/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="screen"
You need an actual static middleware. Express itself doesn't do anything by default.
app.use(express.static(__dirname + "/public"));
Don't use "public" in the paths in your HTML. That's the directory where the static assets live, but from the browser's perspective that's the root. And don't use relative paths, either
.
<link href="/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="screen">