Missing Bower Compoents

Question

I am trying to utilize grunt-wiredep to automatically inject any bower components into my html. Pretty straight forward but I am not sure how to set the correct path to the bower directory when running local host. At the moment I get the following error:

http://localhost:9000/bower_components/jquery/dist/jquery.js Failed to load resource: the server responded with a status of 404 (Not Found)

This is my structure

project

app (contains sass, js, html etc...)

bower_components

node_modules

bower.json

package.json

Gruntfile.js

HTML File

<!-- bower:js -->
<script src="../bower_components/modernizr/modernizr.js"></script>
<script src="../bower_components/jquery/dist/jquery.js"></script>
<!-- endbower -->

Grunt File

        connect: {
        server: {
            options: {
                port: 9000,
                open: true,
                livereload: 35729,
                hostname: 'localhost',
                base:config.app
            },
            livereload: {
                options: {
                    middleware: function(connect) {
                        return [
                            connect.static(config.app),
                            connect().use('/bower_components', connect.static('./bower_components'))
                        ];
                    }
                }
            }
        }
    },
        wiredep: {
        task: {
            // Point to the files that should be updated when you run `grunt wiredep`
            src: [
                '<%= config.app %>/**/*.html',          // .html support...
                '<%= config.app %>/views/**/*.html',    // .html support...
                '<%= config.app %>/views/**/*.jade',    // .jade support...
                '<%= config.app %>/styles/app.scss',    // .scss & .sass support...
                '<%= config.app %>/config.yml'          // and .yml & .yaml support out of the box!
            ],
            options: {
                // See wiredep's configuration documentation for the options https://github.com/taptapship/wiredep#configuration
            }
        }
    }

hey, did you try running `bower install` in your root project directory? — andrusieczko, Jan 19 '15 at 06:35

Galactic Ranger · Accepted Answer · 2015-01-19T09:30:25.050

I was able to resolve this issue by changing my grunt file to watch first, then connect (grunt server settings) then wiring up dependencies. The final Gruntfile looks like this:

'use strict';

module.exports = function(grunt){
// Load grunt tasks automatically
require('load-grunt-tasks')(grunt);

// Configurable paths
var config = {
    app: 'app',
    dist: 'dist'
};

grunt.initConfig({
    config: config,

    // watch any js files on change
    watch: {
        options: { livereload: true },
        bower: {
            files: ['bower.json'],
            tasks: ['wiredep']
        },
        scripts: {
            files: ['<%= config.app %>/js/src/*.js'],
            tasks: ['uglify']
        },
        // sass
        sass: {
            files: ['<%= config.app %>/sass/**/*.scss'],
            tasks: ['compass:dev']
        },
        // watch html
        html: {
            files: ['<%= config.app %>/**/*.html']
        }
    },

    // Grunt server settings
    connect: {
        options: {
            port: 9000,
            open: true,
            livereload: 35729,
            // Change this to '0.0.0.0' to access the server from outside
            hostname: 'localhost'
        },
        livereload: {
            options: {
                middleware: function(connect) {
                    return [
                        connect().use('/bower_components', connect.static('./bower_components')),
                        connect.static(config.app)
                    ];
                }
            }
        }
    },

    wiredep: {
        app: {
            // Point to the files that should be updated when you run `grunt wiredep`
            ignorePath: /^\/|\.\.\//,
            src: [
                '<%= config.app %>/**/*.html',          // .html support...
                '<%= config.app %>/views/**/*.html',    // .html support...
                '<%= config.app %>/views/**/*.jade',    // .jade support...
                '<%= config.app %>/styles/app.scss',    // .scss & .sass support...
                '<%= config.app %>/config.yml'          // and .yml & .yaml support out of the box!
            ],
            options: {
                // See wiredep's configuration documentation for the options https://github.com/taptapship/wiredep#configuration
                //directory: 'bower_components',
            }
        }
    },

    compass: {
        dev: {
            options: {
                sourcemap: true,
                httpPath: '/',
                sassDir: '<%= config.app %>/sass',
                cssDir: '<%= config.app %>/css',
                imagesDir: 'img',
                imagesPath: '<%= config.app %>/images',
                fontsDir: '<%= config.app %>/fonts',
                javascriptsDir: '<%= config.app %>/js',
                generatedImagesDir: '<%= config.app %>/images',
                environment: 'production',
                outputStyle: 'expanded',
                noLineComments: false,
                relativeAssets: false
            }
        }
    },

    // uglify js files and place in minified dir
    uglify: {
        my_target: {
            files: [{
                expand: true,
                cwd: '<%= config.app %>/js/src',
                src: '**/*.js',
                dest: '<%= config.app %>/js',
                flatten: true
            }]
        }
    },

    copy: {
        jquery: {
            expand: true,
            cwd: 'bower_components/jquery/dist/',
            src: 'jquery.min.js',
            dest: '<%= config.app %>/js/lib/',
            flatten: true,
            filter: 'isFile'
        },
        modernizr: {
            expand: true,
            cwd: 'bower_components/modernizr/',
            src: 'modernizr.js',
            dest: '<%= config.app %>/js/lib/',
            flatten: true,
            filter: 'isFile'
        }
    }
});

grunt.registerTask('serve', function (target) {
    grunt.task.run([
        'wiredep',
        'connect',
        'watch',
        'copy',
        'compass'
    ]);
});
};

score 0 · Answer 2 · edited May 23 '17 at 10:30

You have specified root of the server as base.app which is probably the app folder. Once you have the root there, you cannot possibly access files outside that using http server. In your case bower_components is outside your server root which makes it inaccessible from the server.

A quick fix would be to change bower_components folder to some place inside app so that your server can serve those files. I have never used grunt-wiredep so I don't know if there is some other obvious way.

Missing Bower Compoents

2 Answers2