Reputation: 6403
I'm trying to set up Bower within a Rails 4 application, specifically I am trying to install the voice-elements web component: http://zenorocha.github.io/voice-elements/
I've considered using bower-rails but would prefer to keep it as vanilla as possible, but I am a bit lost. So far I have followed these steps:
Created .bowerrc in rails root
{
"directory": "vendor/assets/bower_components"
}
Add to application.rb
config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components')
From rails root
bower init
From vendor/assets
bower install --save voice-elements
Example code in a rails show view
<voice-player id="mi-elemento" accent="es-ES" text="Me gusta la gasolina"></voice-player>
<script>
var form = document.querySelector('#mi-form'),
element = document.querySelector('#mi-elemento');
form.addEventListener('submit', function(e) {
e.preventDefault();
element.speak();
});
</script>
I am not sure where to go from here. How can I tell Rails how to use the voice-elements library in vendor/assets?
Upvotes: 1
Views: 1340
Reputation: 636
There is quite nice gem
you can use to integrate Bower
with Rails
: bower-rails
. Try this way.
Upvotes: 2
Reputation: 50057
As an alternative: would you consider using rails-assets.org
? No need to install bower, and you can just install bower packages as regular gems.
In your case you would add the following line at the top of your Gemfile
:
source 'https://rubygems.org'
source 'https://rails-assets.org'
and then add a line for your package, gems are calles rails-assets-<package-name>
, so in your case that would be
gem 'rails-assets-voice-elements'
Upvotes: 2
Reputation: 4306
Did you follow the "usage" instructions for voice-element? It looks like you need to include some bower-created javascript (you should be able to require that in application.js
), then add some <link>
tags to your layout pointing to two HTML files.
Try adding this to application.js
:
//= require platform/platform
Then add these lines to the <head>
section in your layout:
<link rel="import" href="<%= asset_path 'voice-elements/dist/voice-player.html' %>">
<link rel="import" href="<%= asset_path 'voice-elements/dist/voice-recognition.html' %>">
Upvotes: 1