Last Updated: February 25, 2016
·
2.624K
· fabianhjr

How to integrate WebComponents(And other assets) into Rails 4

Gems descriptions

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.
emcee: Emcee is an extension to the Rails Asset Pipeline. It allows you to import and package web components exactly as you would Javascript or CSS.

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
asset 'voice-elements'

Run bower install
rake 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.
Target:
vendor/assets/bower_components
Links:
vendor/assets/components (emcee)
vendor/assets/javascripts
vendor/assets/stylesheets
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
unresolved touch-action="auto"
Include platform.js into your javascripts directive (Ex. app/assets/javascripts/application.js)
//= 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.