bower-rails: Bower support for Rails projects. Dependency file is bower.json in Rails root dir or Bowerfile if you use DSL. Check out changelog for the latest changes and releases.
Setting gems up
Add ‘bower-rails’ and ‘emcee’ into your Gemfile and bundle them.
# Bower gem for Web Components
gem ‘bower-rails’, ‘>= 0.7.3'
# Emcee gem for Web Components
gem ‘emcee’, ‘>= 1.0.4'
Next we need to initialize both gems, run
rails g bower_rails:initialize
rails g emcee:install
Ok, you are all set up! It is that easy.
Setting Polymer up
Simply add Polymer and all the WebComponents you would like to use into your Bowerfile
# Polymer Lib and Polyfill, Core-elements, and Paper-elements
asset 'polymer', github: 'Polymer/polymer'
asset 'polymer-core-elements', github: 'Polymer/core-elements'
asset 'polymer-paper-elements', github: 'Polymer/paper-elements'
# Voice Synthesis and Recognition
Run bower install
I couldn't find how to configure bower-rails into installing into the components directory instead of bowercomponents such that emcee could grab the components directly; however, there is an even better alternative! Create symbolic links from all your vendor/assets directory into the same bowercomponents, where bower installs all the assets.
Include the necessary HTML support into your layout
Prepend inside head
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
Add this attributes to your body
//= require platform/platform
How to use WebComponents
Include the elements you want into your component directive file(Ex. app/assets/components/application.html)
*= require paper-input/paper-input
*= require voice-elements/dist/voice-player
Include the components directive in your layout with the htmlimporttag helper
<%= htmlimporttag "application" %>
That's it, you can add 'paper-input' and 'voice-player' tags into your views! If you need to more components just add them to the Bowerfile and application.html.