Bower-rails looks like it should be turn key, and is for very popular libraries like angular and angular-resource, but how can I add another less popular, but bower enabled, library?
e.g. - https://github.com/g00fy-/angular-datepicker, https://angular-ui.github.io/angular-google-maps/#!/
To my Bowerfile I have added
asset 'angular-datepicker', github: "g00fy-/angular-datepicker"
and run rake bower:install. This installs the files to my vendor/assets/bower_components folder with the other libraries that do work (angular, angular-resource, etc).
But when I add the path to my application.js file, it claims not to be able to find the file.
//= require angular-datepicker
I've already added the path to the bower_components to my application.rb file
config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components')
How can I add these bower libraries to rails?
Seems like you have to //= require angular-datepicker/angular-datepicker
Please checkout https://github.com/rharriso/bower-rails/issues/37.
Related
I'm migrating from sprockets 3 to sprockets 4 and v4 seems to ignore assets from gems. Those were automatically handled by v3, but I can't seem to find anything about porting this behaviour.
For example there's gem mediaelement_rails which includes mediaelement_rails-0.8.2/app/assets/images/mediaelement_rails/skipback.png
In sprockets v3 it was automatically included during asset compilation, but now, even with manifest:
//= require mediaelement_rails
//= link_tree ../images
//= link_directory ../javascripts .js
//= link_directory ../stylesheets .css
The skipback.png is not included.
I could do this very explicitly: query the gem path and add it to the assets paths. But is there a way to do this automatically similar to v3?
Sprockets v4 no longer automatically includes gem resources.
To include gem resources in your assets, you must explicitly register the gem paths that contain the resources. This can be done using the configuration: config.assets.paths in your config/application.rb file.
For example, to include the mediaelement_rails gem image resources in your assets, you could add the following to your config/application.rb file:
config.assets.paths << Rails.root.join('vendor', 'assets', 'mediaelement_rails', 'images')
This will add the vendor/assets/mediaelement_rails/images directory to the assets path.
If the gem you're using isn't following the standard naming conventions for its assets (i.e. putting your assets in subdirectories named after javascripts, stylesheets, or images), you'll need to explicitly register those directories. using a config.assets.precompile setting in your config/application.rb file.
Here they talk a little about inserting paths that don't follow a pattern
Here, the rails documentation also already shows something about this
I have build a Ruby on rails app.I want to use polymer with my ruby on rails app. Cam anybody suggest some good resources to learn polymer with rails ?
Is it efficient to use polymer with ruby on rails ?
Please also suggest other better options than polymer, if any ?
I am using bower, so I expect you already have bower setup on your system.
(brew install node && npm install bower)
Set up you gems
gem 'bower-rails'
gem 'emcee'
bundle install
rails g bower_rails:initialize
rails g emcee:install
Setup your bower file. Below is what mine looks like:
asset 'angular'
asset 'angular-route'
asset 'angular-resource'
asset 'angular-mocks'
asset 'webcomponentsjs'
asset 'polymer', github: 'Polymer/polymer'
asset 'polymer-core-elements', github: 'Polymer/core-elements'
asset 'polymer-paper-elements', github: 'Polymer/paper-elements'
asset 'platform'
# Voice Synthesis and Recognition
asset 'voice-elements'
Figure out the ones you need and delete the rest.
rake bower:install
To download the components but take note that the files will be saved in vendor/assets/bower_components and not vendor/assets/components expected by emcee. So you will need to make symbolic link.
Setup symbolic links
first remove components i.e. rm -rf vendor/assets/components
then set up the symlink i.e. ln -s vendor/assets/bower_components vendor/assets/components
Now setup your assets
# app/assets/components/application.html
*= require polymer/polymer
# app/assets/javascripts/application.js
//= require angular/angular
//= require angular-route/angular-route
//= require angular-resource/angular-resource
//= require webcomponentsjs/webcomponents
//= require platform/platform
(Please note that I only included all I am using for testing. As stated before, remove those you don't need).
Just some house cleaning you jump off to start trying things out. Include Bower components in rake assets path.
# config/application.rb
config.assets.paths << Rails.root.join("vendor","assets","bower_components")
And that is about it for setup. Jump on it and start using it.
Include html import tag in your layout file
= html_import_tag "application", "data-turbolinks-track" => true
And call a sample polymer in your view
# sample.html.haml
================
%paper-tabs{:selected => "0", :scrollable => ""}
%paper-tab Skills
%paper-tab Experiences
%paper-tab Education
Ref
http://angular-rails.com/bootstrap.html
http://www.akitaonrails.com/2014/06/29/usando-polymer-com-rails#.VHcoW2SsV81
On deep searching on Google. I have found that 'emcee' is the best to use polymer with rails.
following are the options :-
nevir/polymer-rails
alchapone/polymer-rails
ahuth/emcee
also check- http://joshhuckabee.com/getting-started-polymer-ruby-rails
I've built a bower package for dealing with rails forms with polymer. It my come in handy, especially if you're going with to be building any kind of ajax forms or using nested attributes.
https://github.com/hobberwickey/polymer-rails-forms
To answer your more general question though, I've been working with Polymer and both Rails / Sinatra for a while now and it's a great tool for building out the front end of your application without relying heavily on erb / haml or other server-side templating.
You can use polymer-rails and polymer-elements-rails.
https://github.com/alchapone/polymer-elements-rails
https://github.com/alchapone/polymer-rails
I was first trying to use web components with bower-rails and emcee.
But I noticed that bower-rails isn't necessary, you just need to configure .bowerrc and bower.json then run bower install.
Also, emcee is no longer active which forces you to use an older version of sprockets.
It turns out polymer-rails has the same functionality as emcee.
Here is my current setup
Gemfile
gem 'polymer-rails'
install and initialize
bundle install
rails g polymer:install
app/views/layouts/application.html.erb
<html>
<head>
...
<%= html_import_tag 'application'%>
...
Download the bower.json file from elements.polymer-project.org and put it in the root of your app then run the command
bower install
Now your components should be in vendor/assets/components. Find all the .html files to include in the manifest. Some of the .html files are not the same name as the directory so it is a little tedious.
app/assets/components/application.html.erb
//= require polymer/polymer
//= require paper-scroll-header-panel/paper-scroll-header-panel
//= require paper-toolbar/paper-toolbar
//= require paper-tabs/paper-tabs
//= require paper-drawer-panel/paper-drawer-panel
//= require paper-icon-button/paper-icon-button
//= require iron-icons/iron-icons
//= require paper-card/paper-card
//= require paper-button/paper-button
...
Now make sure sprockets loads the assets
config/initializers/assets.rb
Rails.application.config.assets.paths << Rails.root.join('vendor', 'assets', 'components', '*')
Here is an example of how to use a component
<paper-card heading="Paper Card Example" image="<%= image_path 'example.jpg' %>">
<div class="card-content">This is an example of cards with polymer</div>
<div class="card-actions">
<paper-button raised>OK</paper-button>
</div>
</paper-card>
You can use polymer-elements-rails which has a lot of the components already and you can skip the bower.json, bower install, and load assets steps. The only problem is I had a hard time finding out what the require paths were and some of the components were missing (like google-apis). Hope this helps anyone trying to use polymer with rails!
I'm trying to use typeahead.js in my Rails 4 app. I would like to use Bower to do this instead of using the gem. I have installed it in vendor/assets/components. I have also included the line below in config/application.rb.
config.assets.paths << Rails.root.join('vendor', 'assets', 'components')
I have searched extensively but cannot seem to figure out what exactly I should include in app/assets/javascripts/application.js to get Rails to recognize this. The directory typeahead.js is installed properly in vendor/assets/components. I have tried
//= require typeahead.js
as well a few other options but it's not working. I'm a relative newbie to Rails and am still trying to figure out how some of the things work under the hood. Any help is appreciated.
I would recommend that instead you use Rails Assets. Getting started is as simple as adding
source 'https://rails-assets.org' do
gem 'rails-assets-bootstrap' #example
gem 'rails-assets-angular' #example
gem 'rails-assets-leaflet' #example
end
to your Gemfile, replacing the examples with bower assets you need. Simply prefix a given Bower asset with "rails-assets-", and you're good to go.
Be sure to check out their website if you need any help getting started!
Your bower.json file should specify a "typeahead" dependency like this:
"vendor": {
"name": "bower-rails generated vendor assets",
"dependencies": {
"typeahead": "git#github.com:twitter/typeahead.js.git"
}
}
Run rake bower:install, it should place the library in vendor/assets/bower_components
Then in your application.js
//= require typeahead
I did not use typeahead.js after I posted my question, but need to use it now and got it to work. First of all I didn't need to add anything to config/application.rb since the vendor/assets directory is already included in the asset pipeline.
Bower installed the directory typeahead.js in the vendor/assets/components directory as I put
{
"directory": "vendor/assets/components"
}
in my .bowerrc file.
And in my app/assets/javascripts/application.js I include the full path to the typeahead.jquery.min.js file:
//= require typeahead.js/dist/typeahead.jquery.min.js
Everything works fine now.
In rails to require a file in the vendor directory I know that I can do this in my application.j file.
//=require vendor/assets/javascripts/me.js
Am wondering how does one require the entire javascript folder in the vendor directory
//= require_tree ../../../vendor/assets/javascripts/include/.
See http://guides.rubyonrails.org/asset_pipeline.html#asset-organization
Try
//=require me
Vendor should be loaded by default
Assets are not namespaced
You might need to restart your dev server after adding to vendor
I am trying to contribute to the opensource project jquery-datatables-rails. But it puzzles me as how it works. I have basic understanding of how to create gem. It seems like the project just simplifies the path references but nothing more. The four steps listed to install are
Add to the assets group in your Gemfile:
gem 'jquery-datatables-rails'
Install the gem:
bundle install
Add the JavaScript to application.js:
//= require dataTables/jquery.dataTables
Add the stylesheets to application.css:
*= require dataTables/jquery.dataTables
But I don't understand how Rails knows where to find dataTables folder and why we use jquery.dataTables to reference the file/class. The code is easy to understand, but the file organization confuses me so much. Is there any writing on topics related to my confusion?
Thanks.
Update:
Just found this great documentation on Rails Engine: http://edgeguides.rubyonrails.org/engines.html
By default Rails asset pipeline searches for the files in app/assets/, lib/assets, and vendor/assets of the Rails application. But this gem is a Rails engine, and it adds path of its own assets to default assets paths. It has its own vendor/assets.