Skip to content

Instantly share code, notes, and snippets.

@teohm
Forked from afeld/gist:5704079
Created December 4, 2013 03:08

Revisions

  1. @afeld afeld revised this gist Oct 26, 2013. 1 changed file with 17 additions and 3 deletions.
    20 changes: 17 additions & 3 deletions gistfile1.md
    Original file line number Diff line number Diff line change
    @@ -9,7 +9,7 @@ This was tested using Rails 3.2 and Rails 4.0 on Ruby 2.0.0.
    ```js
    // .bowerrc
    {
    "directory": "app/assets/components"
    "directory": "vendor/assets/components"
    }
    ```

    @@ -32,7 +32,7 @@ This was tested using Rails 3.2 and Rails 4.0 on Ruby 2.0.0.
    # config/application.rb
    # include Bower components in compiled assets
    config.assets.paths << Rails.root.join('app', 'assets', 'components')
    config.assets.paths << Rails.root.join('vendor', 'assets', 'components')
    ```

    ```js
    @@ -47,13 +47,27 @@ This was tested using Rails 3.2 and Rails 4.0 on Ruby 2.0.0.
    // ...
    ```

    4. Ignore the components in your repo.

    ```
    # .gitignore
    /vendor/assets/components
    ```

    5. Install the componenets.

    ```bash
    npm install -g bower
    bower install
    ```

    At this point, make sure your app runs and the JS libs installed by Bower are loading on the page.

    ## Heroku

    To have Heroku deploys (Cedar stack only) install and compile Bower components on push:

    1. Use a [custom Heroku buildpack](http://github.com/qnyp/heroku-buildpack-ruby-bower) that includes Node.js and Bower (see [heroku/heroku-buildpack-ruby#67](https://github.com/heroku/heroku-buildpack-ruby/issues/67)):
    1. Use a [custom Heroku buildpack](http://github.com/qnyp/heroku-buildpack-ruby-bower) that includes Node.js and Bower (see [heroku/heroku-buildpack-ruby#67](https://github.com/heroku/heroku-buildpack-ruby/issues/67)). *Alternatively, if you do add the components to your repository (skipping the `.gitignore` step above), you can skip this step and use the regular Ruby buildpack.*

    ```bash
    heroku config:set BUILDPACK_URL='git://github.com/qnyp/heroku-buildpack-ruby-bower.git#run-bower'
  2. @afeld afeld revised this gist Oct 18, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion gistfile1.md
    Original file line number Diff line number Diff line change
    @@ -71,7 +71,7 @@ To have Heroku deploys (Cedar stack only) install and compile Bower components o
    config.assets.precompile.push(Proc.new do |path|
    File.extname(path).in? [
    '.html', '.erb', '.haml', # Templates
    '.png', '.gif', '.jpg', '.jpeg', # Images
    '.png', '.gif', '.jpg', '.jpeg', '.svg', # Images
    '.eot', '.otf', '.svc', '.woff', '.ttf', # Fonts
    ]
    end)
  3. @afeld afeld revised this gist Oct 17, 2013. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions gistfile1.md
    Original file line number Diff line number Diff line change
    @@ -64,6 +64,7 @@ To have Heroku deploys (Cedar stack only) install and compile Bower components o
    ```ruby
    # via https://github.com/sstephenson/sprockets/issues/347#issuecomment-25543201
    # We don't want the default of everything that isn't js or css, because it pulls too many things in
    config.assets.precompile.shift
    # Explicitly register the extensions we are interested in compiling
  4. @afeld afeld revised this gist Oct 17, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion gistfile1.md
    Original file line number Diff line number Diff line change
    @@ -59,7 +59,7 @@ To have Heroku deploys (Cedar stack only) install and compile Bower components o
    heroku config:set BUILDPACK_URL='git://github.com/qnyp/heroku-buildpack-ruby-bower.git#run-bower'
    ```

    2. Add the following to `config.application.rb`:
    2. Add the following to `config/application.rb`:

    ```ruby
    # via https://github.com/sstephenson/sprockets/issues/347#issuecomment-25543201
  5. @afeld afeld revised this gist Oct 17, 2013. 1 changed file with 14 additions and 19 deletions.
    33 changes: 14 additions & 19 deletions gistfile1.md
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    **TODO: make gem for this**

    This was tested using Ruby 2.0.0 and Rails 4.0.0.rc1.
    This was tested using Rails 3.2 and Rails 4.0 on Ruby 2.0.0.

    # Bower

    @@ -59,26 +59,21 @@ To have Heroku deploys (Cedar stack only) install and compile Bower components o
    heroku config:set BUILDPACK_URL='git://github.com/qnyp/heroku-buildpack-ruby-bower.git#run-bower'
    ```

    2. Add the following to Rakefile *before* the `require`:
    2. Add the following to `config.application.rb`:

    ```ruby
    # Rakefile
    namespace :assets do
    desc "A little hack to make sprockets handle Bower files"
    # Add extensions to all Bower-installed files that don't have them.
    # See https://github.com/sstephenson/sprockets/issues/347
    task :precompile do
    Dir['app/assets/components/**/*'].each do |filename|
    if File.file?(filename) && File.extname(filename) == ''
    File.rename(filename, "#{filename}.txt")
    end
    end
    end
    end
    require File.expand_path('../config/application', __FILE__)
    # ...
    # via https://github.com/sstephenson/sprockets/issues/347#issuecomment-25543201
    config.assets.precompile.shift
    # Explicitly register the extensions we are interested in compiling
    config.assets.precompile.push(Proc.new do |path|
    File.extname(path).in? [
    '.html', '.erb', '.haml', # Templates
    '.png', '.gif', '.jpg', '.jpeg', # Images
    '.eot', '.otf', '.svc', '.woff', '.ttf', # Fonts
    ]
    end)
    ```

    3. Change the following setting to allow assets to be compiled in production (I don't believe this is Bower-specific):
  6. @afeld afeld revised this gist Sep 23, 2013. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions gistfile1.md
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,5 @@
    **TODO: make gem for this**

    This was tested using Ruby 2.0.0 and Rails 4.0.0.rc1.

    # Bower
  7. @afeld afeld revised this gist Sep 11, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion gistfile1.md
    Original file line number Diff line number Diff line change
    @@ -51,7 +51,7 @@ At this point, make sure your app runs and the JS libs installed by Bower are lo

    To have Heroku deploys (Cedar stack only) install and compile Bower components on push:

    1. Use a [custom Heroku buildpack](http://github.com/qnyp/heroku-buildpack-ruby-bower) that includes Node.js and Bower (see https://github.com/heroku/heroku-buildpack-ruby/issues/67):
    1. Use a [custom Heroku buildpack](http://github.com/qnyp/heroku-buildpack-ruby-bower) that includes Node.js and Bower (see [heroku/heroku-buildpack-ruby#67](https://github.com/heroku/heroku-buildpack-ruby/issues/67)):

    ```bash
    heroku config:set BUILDPACK_URL='git://github.com/qnyp/heroku-buildpack-ruby-bower.git#run-bower'
  8. @afeld afeld revised this gist Sep 11, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion gistfile1.md
    Original file line number Diff line number Diff line change
    @@ -51,7 +51,7 @@ At this point, make sure your app runs and the JS libs installed by Bower are lo

    To have Heroku deploys (Cedar stack only) install and compile Bower components on push:

    1. Use a [custom Heroku buildpack](http://github.com/qnyp/heroku-buildpack-ruby-bower) that includes Node.js and Bower:
    1. Use a [custom Heroku buildpack](http://github.com/qnyp/heroku-buildpack-ruby-bower) that includes Node.js and Bower (see https://github.com/heroku/heroku-buildpack-ruby/issues/67):

    ```bash
    heroku config:set BUILDPACK_URL='git://github.com/qnyp/heroku-buildpack-ruby-bower.git#run-bower'
  9. @afeld afeld revised this gist Jun 4, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion gistfile1.md
    Original file line number Diff line number Diff line change
    @@ -90,7 +90,7 @@ Try a deploy: it should successfully compile assets.
    ---------
    *It's just that easy!!!* ::facepalm::
    *It's just that easy!!! ::facepalm::*

    Additional resources:

  10. @afeld afeld revised this gist Jun 4, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion gistfile1.md
    Original file line number Diff line number Diff line change
    @@ -90,7 +90,7 @@ Try a deploy: it should successfully compile assets.
    ---------
    *It's just that easy!!!*
    *It's just that easy!!!* ::facepalm::

    Additional resources:

  11. @afeld afeld revised this gist Jun 4, 2013. 1 changed file with 4 additions and 2 deletions.
    6 changes: 4 additions & 2 deletions gistfile1.md
    Original file line number Diff line number Diff line change
    @@ -86,11 +86,13 @@ To have Heroku deploys (Cedar stack only) install and compile Bower components o
    config.assets.compile = true
    ```
    Now do a deploy.
    Try a deploy: it should successfully compile assets.
    ---------
    It's just that easy - heh. Additional resources:
    *It's just that easy!!!*

    Additional resources:

    * http://dev.af83.com/2013/01/02/managing-rails-assets-with-bower.html
    * http://kaeff.net/posts/sprockets-bower-better-component-packaging-for-rails-asset-pipeline.html
  12. @afeld afeld revised this gist Jun 4, 2013. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions gistfile1.md
    Original file line number Diff line number Diff line change
    @@ -40,6 +40,7 @@ This was tested using Ruby 2.0.0 and Rails 4.0.0.rc1.
    //= require d3/d3
    //= require underscore/underscore
    //
    //= require jquery
    //= require jquery_ujs
    // ...
    ```
  13. @afeld afeld revised this gist Jun 4, 2013. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion gistfile1.md
    Original file line number Diff line number Diff line change
    @@ -39,7 +39,6 @@ This was tested using Ruby 2.0.0 and Rails 4.0.0.rc1.
    // Bower packages
    //= require d3/d3
    //= require underscore/underscore
    // or whatever
    //
    //= require jquery_ujs
    // ...
  14. @afeld afeld revised this gist Jun 4, 2013. 1 changed file with 5 additions and 2 deletions.
    7 changes: 5 additions & 2 deletions gistfile1.md
    Original file line number Diff line number Diff line change
    @@ -24,7 +24,7 @@ This was tested using Ruby 2.0.0 and Rails 4.0.0.rc1.
    }
    ```

    3. Include them in your JavaScript ([more details](http://dev.af83.com/2013/01/02/managing-rails-assets-with-bower.html)):
    3. Include them in your JavaScript:

    ```ruby
    # config/application.rb
    @@ -90,4 +90,7 @@ Now do a deploy.
    ---------
    It's just that easy - heh.
    It's just that easy - heh. Additional resources:

    * http://dev.af83.com/2013/01/02/managing-rails-assets-with-bower.html
    * http://kaeff.net/posts/sprockets-bower-better-component-packaging-for-rails-asset-pipeline.html
  15. @afeld afeld created this gist Jun 4, 2013.
    93 changes: 93 additions & 0 deletions gistfile1.md
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,93 @@
    This was tested using Ruby 2.0.0 and Rails 4.0.0.rc1.

    # Bower

    1. Set the install directory for Bower components:

    ```js
    // .bowerrc
    {
    "directory": "app/assets/components"
    }
    ```

    2. Follow the [Bower instructions](http://bower.io/) and create a `bower.json` file in your directory with your dependencies, e.g.

    ```js
    // bower.json
    {
    // ...
    "dependencies": {
    "d3": "~3.1.0",
    "underscore": "~1.4.4",
    }
    }
    ```

    3. Include them in your JavaScript ([more details](http://dev.af83.com/2013/01/02/managing-rails-assets-with-bower.html)):

    ```ruby
    # config/application.rb
    # include Bower components in compiled assets
    config.assets.paths << Rails.root.join('app', 'assets', 'components')
    ```

    ```js
    // /Users/aidan/dev/code_cruise/app/assets/javascripts/application.js
    //
    // Bower packages
    //= require d3/d3
    //= require underscore/underscore
    // or whatever
    //
    //= require jquery_ujs
    // ...
    ```

    At this point, make sure your app runs and the JS libs installed by Bower are loading on the page.

    ## Heroku

    To have Heroku deploys (Cedar stack only) install and compile Bower components on push:

    1. Use a [custom Heroku buildpack](http://github.com/qnyp/heroku-buildpack-ruby-bower) that includes Node.js and Bower:

    ```bash
    heroku config:set BUILDPACK_URL='git://github.com/qnyp/heroku-buildpack-ruby-bower.git#run-bower'
    ```

    2. Add the following to Rakefile *before* the `require`:

    ```ruby
    # Rakefile
    namespace :assets do
    desc "A little hack to make sprockets handle Bower files"
    # Add extensions to all Bower-installed files that don't have them.
    # See https://github.com/sstephenson/sprockets/issues/347
    task :precompile do
    Dir['app/assets/components/**/*'].each do |filename|
    if File.file?(filename) && File.extname(filename) == ''
    File.rename(filename, "#{filename}.txt")
    end
    end
    end
    end
    require File.expand_path('../config/application', __FILE__)
    # ...
    ```

    3. Change the following setting to allow assets to be compiled in production (I don't believe this is Bower-specific):
    ```ruby
    # config/environments/production.rb
    config.assets.compile = true
    ```
    Now do a deploy.
    ---------
    It's just that easy - heh.