How to import bower_components with app built by brunch?

Question

I'm still getting my bearings with brunch. I have a fundamental class and jasmine spec being built and tested successfully.

Now it's time to start importing other dependencies for use, the first of which will be jQuery and make $ available. The libraries are already configured and downloaded in the bower_components directory.

While my config has evolved a bit, it might be useful to point to the skeleton I started with: brunch-with-hipsters.

How do you import and make jQuery available as $ to my coffeescript class from bower_components?

Answer 1

So this was a bit of a red herring.

coffeelint was enabled and giving me warnings when running brunch, but since I'm beginning, I wasn't worried about it. Nonetheless, there were enough warnings that it scrolled off the screen.

I noticed that I had configured:

        'js/vendor.js': /^(bower_components|vendor)/
        'js/app.js': /^app/

yet no vendor.js appeared. Scrolling up, I found this error:

error: [Error: Component JSON file ".../bower_components/jquery-simulate/.bower.json" 
must have `main` property. See https://github.com/paulmillr/read-components#README]

Quite simply, I needed to provide an overrides section because jquery-simulate doesn't provide a .bower.json file (I'm accessing it directly from git).

In the end, fixing this meant vendor.js was generated and $ was available.

Answer 2

From your app root npm install -g bower, then update brunch-config.[js|coffee] so Bower components are piped into vendor.js or app.js using joinTo as described in the Brunch config doc.

Once the configuration is saved, executing brunch watch will start the watcher and monitor application changes. Any changes to bower.json or the app thereafter will automatically fetch Bower deps (if necessary), recompile the application and live-reload any connected user agents.

Note: If a Bower component does not have a main section, specify an overrides section so you can define the mains yourself as described in read-components. Otherwise you'll get an error when trying to build the app.