Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use Polymer (1.0) with Rails (4)?

Now that Polymer (1.0) is "Production Ready" Which is the best way to use it on Rails (4) ?

I read a lot and I saw that all the solutions are deprecated, (For example using Gems like: likepolymer-rails, emcee , etc)

I'm lost trying to create a good structure for the project, and the way to include all the polymer components, also I don't know if Sprocket could help or not.

like image 270
eveevans Avatar asked Jun 04 '15 19:06

eveevans


1 Answers

UPDATE (16 June 2015): An official package has been released for polymer-rails. Please see polymer-elements-rails, which is the new and official repository which includes iron-, paper-, and neon-elements.

I will be keeping these forks up for the time being for anyone who may still have them already set as a dependency, but you will get identical functionality and prolonged support from using the official repository, so I urge you to switch if you haven't.


The polymer-rails project has been updated to 1.0, but unfortunately, the gems for the components have not yet. I've gone ahead and created the appropriate forks so that there's some working option in the meantime.

  • https://github.com/vsimonian/polymer-iron-rails
  • https://github.com/vsimonian/polymer-paper-rails
  • https://github.com/vsimonian/polymer-neon-rails

Your gemfile should have:

gem 'polymer-rails'
gem 'polymer-iron-rails', :git => "git://github.com/vsimonian/polymer-iron-rails.git"
gem 'polymer-paper-rails', :git => "git://github.com/vsimonian/polymer-paper-rails.git"
gem 'polymer-neon-rails', :git => "git://github.com/vsimonian/polymer-neon-rails.git"

Then run bundle.

In app/assets/components/application.html.erb you set your dependencies:

//= require polymer/polymer
//= require iron-ajax/iron-ajax
//= require iron-input/iron-input
.....

app/assets/javascripts/application.js should contain:

//= require webcomponentsjs/webcomponents-lite

Your .bowerrc should have the 3rd-party component directory set:

{
  "directory": "vendor/assets/components"
}
like image 198
Adaline Simonian Avatar answered Oct 18 '22 21:10

Adaline Simonian