71

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?

3
  • See also my similar question (answered), maybe it may help: stackoverflow.com/questions/23933621/…
    – Green
    Commented Jun 5, 2014 at 10:44
  • I have a question. Does package.json and bower.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?
    – Nam Thai
    Commented Aug 5, 2015 at 0:01
  • package.json is for npm dependencies (many times that is server side or build system requirements) where bower.json is only for client side dependencies like bootstrap, angular or jquery. They do not conflict with each other Commented Aug 5, 2015 at 3:01

7 Answers 7

194

I use this setup:

app.use(express.static(__dirname + '/public'));
app.use('/bower_components',  express.static(__dirname + '/bower_components'));

So any Bower components are loaded from HTML like this:

<script src="/bower_components/..."></script>

And any other client-side JS/CSS (in public/) are loaded like this:

<script src="/js/..."></script>
12
  • I found why it doesn't work stackoverflow.com/questions/23933621/…
    – Green
    Commented Jun 5, 2014 at 10:46
  • 12
    answer should now use path.join(__dirname, '/bower_components')
    – Warren
    Commented Dec 9, 2014 at 16:23
  • I used Yeoman to generate bootstrap and express. I had to add app.use('/bower_components', express.static(config.root + '/bower_components')); to the /config/express.js file. Notice the config.root instead of __dirname
    – kingdango
    Commented Mar 7, 2015 at 21:18
  • I have a question. The above project have both package.json and bower.json. Do those conflict with each others? For fields such as name, version, maybe even dependencies with the same package of different version. what should be in package.json and what should be in bower.json?
    – Nam Thai
    Commented Aug 5, 2015 at 0:03
  • @NickyThai generally speaking, bower.json is meant for client-side dependencies, package.json for server-side dependencies.
    – robertklep
    Commented Aug 5, 2015 at 6:32
8

You should use

app.use(express.static(path.join(__dirname, '/public')));
app.use('/bower_components',  express.static( path.join(__dirname, '/bower_components')));

Note the usage of (path.join) which is different from @robertklep answer

Here is a note from Another SO questions which according to me captures it very well

path.join will take care of unneccessary delimiters, that may occur if the given pathes come from unknown sources (eg. user input, 3rd party APIs etc.).

So path.join('a/','b') path.join('a/','/b'), path.join('a','b') and path.join('a','/b') will all give a/b.

Without using it, you usually would make expectations about the start and end of the pathes joined, knowing they only have no or one slash.

3
  • 1
    path.join should not contain concatenation with + operator, it should be comma , instead
    – Warlock
    Commented Jun 13, 2015 at 17:41
  • I have tried with both + and , but not work on windows system. But I am able to use assets files from other folder using same process only not working with "bower_components" folder. Help me to fix it.
    – Sachin
    Commented Aug 3, 2016 at 9:33
  • @robertklep Why do we need to do this for bower_components but not for other directory such as css js img? I can't find any documentation
    – TSR
    Commented Jan 18, 2018 at 16:21
6

Bower can be configured using JSON in a .bowerrc file.

Add an .bowerrc file with the following contents at the root of your project with the contents.

{
  "directory": "public/bower_components"
}

This will place the bower components your are refering to in the correct library and you will not need the extract static directory in express.

1

Change your directory structure to :

projectName

    | - public/
        | - bower_components/
        | - css
        | - js
        | - index.html
    | - Gruntfile.js
    | - package.json
    | - bower.json
    | - app.js

And in index.html do following changes:

<script src="../public/bower_components/jquery/jquery.js"></script>
<script src="../public/bower_components/d3/d3.js"></script>
<script src="../public/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="public/bower_components/spin.js/spin.js"></script>
<script src="public/bower_components/mustache/mustache.js"></script>


Or another way is to turn your bower_components folder to severed as static content. (you can inject static middleware multiple times for express)
Add the following in app congfig to express. Then your config code looks like:

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(express.static(__dirname + '/bower_components'));
    app.use(app.router);
    app.use(express.logger()); 
});

app.listen(port, function(){
    console.log('Express server listening on port ' + port);
});

And in this case your directory structure remains the same. Hope this helps.
Happy coding.. :)

3
  • 2
    My gut feeling tells me this was down-voted because if you move the bower_components directory manually under another, you lose some of the power of a package manager.
    – webkenny
    Commented Jan 3, 2015 at 14:32
  • 2
    You can configure bower to place its bower_components folder within the public folder by using a .bowerrc file, as in this example with express and grunt. If I'm using Grunt, I want to configure my server's static file directories in my Gruntfile, and I can't figure out how to do it with grunt-express, which is what I'm using. So my solution was to just move the folder.
    – Matthias
    Commented Apr 8, 2015 at 17:40
  • 1
    I almost downvoted your answer as a knee-jerk reaction. I was thinking that moving the bower_components folder was an antipattern. But I couldn't think of any good reasons against it, and it looks like an easy solution.
    – Matthias
    Commented Apr 8, 2015 at 17:46
0

I'm using:

$ npm -version && node -v
2.11.3
v0.12.7

And my app.js has this defining bower_components as a static path:

app.use(express.static(path.join(__dirname, 'bower_components')));

In my Jade template, I reference jquery and bootstrap like so:

doctype html
html
    head
        title= title
        link(href='bootstrap/dist/css/bootstrap.min.css', rel='stylesheet')
        link(href='bootstrap/dist/css/bootstrap-theme.min.css', rel='stylesheet')
    body
        block content

    script(type='text/javascript', src='jquery/dist/jquery.js')
    script(type='text/javascript', src='bootstrap/dist/js/bootstrap.js')

I'm running Windows 7 (x64).

Hope this helps someone.

0

Had the same problem after moving bower_components into another folder. This has helped me to understand what was going on. The docs were useful: https://github.com/expressjs/serve-static

and I put this code into my node/express app.js file:

console.log('DIRNAME:', __dirname, 'JOINED:', path.join(__dirname, '../../bower_components'));

This is from index.html

<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/angular/angular.js"></script>

and in app.js

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

which is a correct path in my case.

0

This also works for me:

app.use('/bower_components',  express.static(__dirname + '/bower_components'));

Make sure you have reset your local server or make sure you are running nodemon for seeing your changes!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.