Bower components not found when using Node

Question

When I start my node-server at port 8080, and have a look at in the browser, I see this:

I doesn't find any of the bower-files.

When I just preview the code through an editor, like brackets. Everything works. I don't understand why node would cause a problem.

My last route in node looks like this:

app.get('*', function(req, res){
    res.sendFile(path.join(__dirname + '/public/index.html'));
});

My folder structure looks like this:

And my includes in the HTML file looks like this:

<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css"/>
<style>
    html                    { overflow-y:scroll; }
    body                    { padding-top:50px; }
    #todo-list              { margin-bottom:30px; }
</style>

<!-- JS Source -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="./core.js"></script>

Any help would be much appreciated.

Answer 1

You need to expose the bower_compoments directory just as you (probably) did with public using express.static middleware.

var path = require('path')
app.use('/bower_components', express.static(path.join(__dirname, 'bower_components')))

---

Please note that as of October 2017, you should migrate away from Bower.

Answer 2

Put them in the public folder. Preferably with .bowerrc. Create a file with name .bowerrc in the same directory as bower.json with following content:

{
  "directory": "public/bower_components"
}

Answer 3

I imagine that you are using the express package to create your server's routes. Have you setup static assets? http://expressjs.com/en/starter/static-files.html