Menu
I have a basic HTML index.html with a handful of containers, and I add bootstrap and font awesome folders to the <head> section of the file.
Such as:
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="../bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">
Then, I wrote a web.js script to first initialize the server and then add those folders containing static files, in this way:
var express = require('express');
var app = express();
var fs = require('fs');
var buf = fs.readFileSync("index.html");
app.use(express.logger());
app.get('/', function(request, response) {
response.send(buf.toString());
});
app.configure(function(){
app.use(express.static(__dirname + '/assets'));
app.use(express.static(__dirname + '/bootstrap'));
app.use(express.static(__dirname + '/font-awesome'));
});
var port = process.env.PORT || 8080;
app.listen(port, function() {
console.log("Listening on " + port);
});
However when I go to http://localhost:8080 I get 404 errors from GET commands trying to obtain bootstrap.css, etc. Any help? I tried different scripts obtained from stackoverflow but I can't seem to get it right.
thanks!
975
By initializing express.static in this way, you are telling it to look in those folders off of the root for the any requested files.
If you were to remove the paths:
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/font-awesome.css" rel="stylesheet">
Your static assets will likely be found. However, you are asking for headaches down the road as any duplicate filenames will result in the first being returned.
Instead, you might want to place all of your static assets under a single directory or add a different path parameter to your app.use statements to keep things better organized.
File layout:
public
|-- bootstrap
|-- font-awesome
Corresponding app.use statement (and remove the .. from your html paths):
app.use(express.static(path.join(__dirname, 'public'));
or multiple static middleware (and remove the .. from your html paths):
app.use('/bootstrap', express.static(path.join(__dirname, '/bootstrap')));
app.use('/font-awesome', express.static(path.join(__dirname, '/font-awesome')));
HTML changes for either of the above:
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">
Try in html:
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">
In node app:
app.use('/assets', express.static(path.join(__dirname, '/assets')));
app.use('/bootstrap', express.static(path.join(__dirname, '/bootstrap')));
app.use('/font-awesome', express.static(path.join(__dirname, '/font-awesome')));
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
