CODEWITHSUNDEEP
ruby-on-railsbower
port5432
port5432

Reputation: 6403

Installing bower and rails

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

vendor tree

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

Answers (3)

juszczak
juszczak

Reputation: 636

There is quite nice gem you can use to integrate Bower with Rails: bower-rails. Try this way.

Upvotes: 2

nathanvda
nathanvda

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

James Mason
James Mason

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

Related Questions