I have a directory structure
projectName
| - bower_components/
| - public/
| - css
| - js
| - index.html
| - Gruntfile.js
| - package.json
| - bower.json
| - app.js
I would like to start my app and serve index.html
with node. So in app.js
I have:
var express = require('express');
var port = process.env.PORT || 3000;
var app = express();
app.configure(function(){
// Serve up content from public directory
app.use(express.static(__dirname + '/public'));
app.use(app.router);
app.use(express.logger());
});
app.listen(port, function(){
console.log('Express server listening on port ' + port);
});
At the bottom of index.html
I have:
<script src="../bower_components/jquery/jquery.js"></script>
<script src="../bower_components/d3/d3.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/spin.js/spin.js"></script>
<script src="bower_components/mustache/mustache.js"></script>
When I start the server, index.html
shows up but none of the above libraries load. I get the error (404):
GET http://localhost:3000/bower_components/jquery/jquery.js 404 (Not Found) localhost/:32
GET http://localhost:3000/bower_components/d3/d3.js 404 (Not Found) localhost/:33
GET http://localhost:3000/bower_components/bootstrap/dist/js/bootstrap.js 404 (Not Found) localhost/:34
GET http://localhost:3000/bower_components/spin.js/spin.js 404 (Not Found) localhost/:35
GET http://localhost:3000/bower_components/mustache/mustache.js 404 (Not Found)
How can I serve the files from bower_components?
package.json
andbower.json
conflicts with each others? For fields such as name, version, maybe even dependencies with the same package of different version. what do you put in package.json and what do you put in bower.json?package.json
is for npm dependencies (many times that is server side or build system requirements) wherebower.json
is only for client side dependencies like bootstrap, angular or jquery. They do not conflict with each other