I'm trying to setup angular-chart.js in an Angular on Rails application, per github instructions. But the documentation is not specifically for Rails so I'm running into errors.
Installation instruction: http://jtblin.github.io/angular-chart.js/
For reference,
installed via bower, bower install angular-chart.js --save
added as dependency, angular.module('myModule', ['chart.js']);.
Documentation then recommends then adding <script src="bower_components/angular-chart.js/dist/angular-chart.js"></script>, but this file is not found if I add this line (think because using Rails).
Since the application is Angular ontop of Rails, I assume it needs to be added to Rails application.js file. As otherwise there is an angular no module error.
But I'm not sure exactly what needs to be added to application.js. I've tried:
chart.js
angular-chart.js
angular-chart
(prefaced by //= require)
But everything results in a Rails error,
Sprockets::FileNotFound in Boards#index
couldn't find file 'chart.js' with type 'application/javascript'
Is there a way to find out exactly what needs to be added to application.js? Or some other way to solve this?
(Apologies if this is difficult to follow.)
You can use (as you mentioned in discussion) gem browserify-rails to easily pick-up bower/node.js packages. Include gem into Gemfile, bundle install, and then install npm/bower package into app.
gem 'browserify-rails'
Related
I found online resources for how to add jQuery itself into a rails 6 app, but I was having trouble finding out how to require in the jquery code that exists inside of a rubygems.org gem.
I am trying to require in the jQuery code from the nested_form_fields gem.
Here is how I did it in Rails 5:
Add the gem within the Gemfile:
gem 'nested_form_fields
Run bundle install to install the gem:
Add the following line within app/assets/javascripts/application.js to require in jquery code from the third party gem:
//= require nested_form_fields
And that is it.
Here is how I attempted to do it in Rails 6:
Add the following line into app/javascript/packs/application.js to load in jquery:
require("jquery")
Add the gem within the Gemfile:
gem 'nested_form_fields'
Run bundle install to install the gem:
Add the following line within app/javascript/packs/application.js to bring in the javascript code which exists inside the nested_form_fields gem:
require("nested_form_fields")
When I boot up my app and look at web inspector it says the following:
Error: Cannot find module 'nested_form_fields'
I didn't expect it to work via yarn either because nested_form_fields isn't a package within yarn. Instead: I'm simply trying to require in the javascript code that happens to exist inside of a ruby gem. But for good measure I attempted it anyways just to rule that out:
yarn add nested_form_fields
...
=> error An unexpected error occurred: "https://registry.yarnpkg.com/nested_form_fields: Not found".
I know this is going to be one of those things where I forgot to do something simple, but I've been at this for a while and another pair of eyes might be able to catch it quickly.
The design of Rails 6 is steering developers away from the asset pipeline and towards webpack. It appears that this means gems used in rails, which contain javascript, will likely need to be updated.
Specifically: instead of hardcoding the javascript into the ruby gem, the ruby gem would only reference the dependent javascript. That dependent javascript would exist separately in the npm repository. I'm no expert, but I believe this is the idea.
My solution was to swap out nested_form_fields for cocoon which essentially provides the same nested-form-handling behavior.
The funny thing is that cocoon is in the exact same predicament as nested_form_fields. However, cocoon is more popular and likewise has more community looking for the best way to solve this puzzle. Issue #555 captures this particular problem.
I eventually decided to implement the temporary work around described in this comment. Essentially what I did was I copy/pasted the jQuery code from the cocoon gem into my rails app, and then I required that code into webpack.
Steps to get Cocoon Up and Running in Rails 6
Add cocoon to the Gemfile
gem "cocoon"
Run bundle install to install the gem.
Copy/paste the cocoon javascript code located here into a new file at: app/javascript/src/cocoon.js
Add the following two lines into javascript/packs/application.js. Cocoon depends on jquery so we need to require that in, and then of course require in the cocoon javascript that we copy/pasted in step #3:
require("jquery")
require("src/cocoon.js")
That is the best temporary strategy that I am aware of.
I'm trying to wrap the bootstrap-sass gem inside another gem (let's call it my-engine). Along the way, I'm building a small Rails application to test things out. As a first step, I wanted to make sure I could get bootstrap-sass working directly in my Rails application. The Gemfile for the Rails app looks like this:
gem 'bootstrap-sass', '3.3.1.0'
gem 'my-engine, path: "~/dev/my-engine"
This works fine. The bootstrap assets are loaded into my Rails application and everything looks good. Now, I want to take bootstrap-sass out of my Rails app and let it load through my-engine. So, my Rails application Gemfile now looks like:
gem 'my-engine, path: "~/dev/my-engine"
The .gemspec for my-engine has:
spec.add_runtime_dependency 'bootstrap-sass', '3.3.1.0'
I can re-bundle the my-engine gem with no problems. I can re-bundle the Rails application with no problems. However, when I refresh the page of the Rails app, I get the following error:
File to import not found or unreadable: bootstrap-sprockets.
That break occurs when sprockets is trying to build the application.css file. Sometimes this will pass and I'll get a different error about missing the bootstrap.js javascript file when the application.js is being built.
Why is this happening? I'm wondering if it has something to with the fact that I'm developing the gems locally and haven't published them, although I'm not sure why that would affect bootstrap-sass which is published. I'm using bundler 1.5.3.
Make sure 'bootstrap-sass' is required in your engine. One sensible place to do this is in your lib/my-engine.rb file:
require 'bootstrap-sass'
Adding the bootstrap-sass gem as a runtime dependency in the .gemspec isn't enough when you're trying to wrap gems.
As you want to use more and more scss/js/coffeescript libraries, you may want to consider moving to bower vs gemfiles as the source for bootstrap-sass-official. We use bower-rails for rake tasks and auto-configuration. It's a really lite config/rake task layer over standard bower.
Addressing your answer, bootstrap problems via the gem was one of the reasons I switched our engine over to just bower assets. We now import bootstrap-sass-official and have full control, note however that for sass files you will need to import the longer path to the source file, i.e. in our engine _application.scss:
# our custom variable overrides
#import 'overrides/variables';
#import 'bootstrap-sass-official/assets/stylesheets/bootstrap-sprockets';
#import 'bootstrap-sass-official/assets/stylesheets/bootstrap';
NOTE: if you want your app sass variables to override engine and sass variables, make sure your engine has _application.scss not application.scss, the leading underscore is critical for variable context/scope.
Thinking ahead, you may need to ignore bower transitive dependencies as we did.
(i.e. some dependencies may use 'bootstrap' while others use 'bootstrap-sass-official' etc)
We use it like this in our .bowerrc such as the following:
{
"ignoredDependencies": [
"bootstrap",
"bootstrap-sass",
"bootstrap-sass-official"
]
}
In conclusion
We have been using this for several months with success. bower-rails will install the dependencies in /vendor/assets and if referenced in your engine, you won't need to reference them at all in your application project. It has been fast and easy to maintain/add/update libraries and know exactly how files are included.
I got errors when I use progress-bubble in rails.
have installed 'bower-rails' in my project and it works well when i use bower install coverflow and sweetalert packages.
howerver, i use bower to install progress-bubble package today. when it was installed, i add //=require progress-bubble in application.js and *= require progress-bubble in application.css.sass, now i restart my server and visit my target view, i got "Couldn't find file 'progress-bubble' with type 'text/css'" error.
Here is the gist https://gist.github.com/skji/50163fb76a083d2de52f3872bce437cf.
Thanks for the help.
The Javascript dependencies are growing in my Rails app and it's leading to some problems. For one, with so many it becomes difficult to track and update versions of different Javascript libraries. At first I tried turning them into gems, but then I have to manage those. Some are already gems (like backbone-rails) but I would like to have one consistent package manager.
So I'm looking into Bower, "a package manager for the web". Some blog posts from kaeff and from af83 have been helpful, but I still run into problems. I hope this question can lead to a variety of answers people can use to find the best solution for their projects.
I'd particularly like to see advice for managing assets through Bower in a Heroku deploy.
One way is using a version of Sprockets which allows your application.js to require packages defined by Bower. This feature was added in Sprockets 2.6, which Rails 3.x won't allow you to bundle due to a version restriction. To get that feature, you can bundle gem "sprockets", "2.2.2.backport1".
That will make Sprockets start looking for assets in vendor/assets/components too. The path is vendor/components because Bower packages could contain CSS or image assets too, not just Javascript. The way Sprockets knows what Javascript to include when you require the package is by reading the bower.json file for the main property, which says which files the pipeline should include. A gotcha here is that many Bower packages don't supply this property or supply main sources that assume RequireJS is available (e.g. d3). You can see what source main are defined with bower list --map.
When the main doesn't suit you, you can simply use Bower to manage a single remote JS file instead of a package. Josh Peek has a gist that demonstrates this. The latest version of Bower expects bower.json instead of component.json so I've updated the steps:
$ npm install -g bower
$ mkdir -p vendor/assets
$ cd vendor/assets/
$ curl https://raw.github.com/gist/3667224/component.json > bower.json
$ bower install
That particular bower.json loads jQuery. Then in your application.js you can simply //= require jquery and Sprockets will find it in your vendor/assets/components. To add new dependencies, just include them in your bower.json and run bower install again, for example:
{
"dependencies": {
"jquery": "http://code.jquery.com/jquery-1.8.1.js",
"d3": "http://cdnjs.cloudflare.com/ajax/libs/d3/3.0.8/d3.js"
}
}
If you want to manage your lib and vendor assets in one configuration file, you could use bower-rails, but there's not much point in using lib. That gem also provides some Rake tasks, but they don't do anything more than the basic Bower commands.
To my knowledge, there is no way yet to have Bower install as necessary during asset compilation. So if you're using a deploy environment like Heroku, you'll need to commit your vendor/assets/components directory and update it through the bower command.
It would be nice if could you require your whole Bower dependency set with one directive in application.js. A gist from kaeff illustrates how to create a require_bower_dependencies directive. There's no gem that does this for you yet. Until then, you have to declare each dependency in both bower.json and application.js.
Checkout Rails Assets project. Usage example:
source 'http://rubygems.org'
source 'https://rails-assets.org'
# gem 'rails-assets-BOWER_PACKAGE_NAME'
gem 'rails-assets-jquery', '~> 1.10.2'
gem 'rails-assets-sly', '~> 1.1.0'
gem 'rails-assets-raphael', '~> 2.1.0'
UPD (26.01.2016)
Future of Rails-Assets project is on discussion. Please check the thread and make your own decision: use it or find a workaround.
Just wrote up a guide for doing Rails+Bower+Heroku. Hope that helps.
I've been working through this issue for the last few days, and have settled on the following process.
Use the bower-rails gem. It provides a number of nice rake tasks that help integrate the use of bower with a rails application and the asset pipeline. I prefer to stick with the bower.json configuration instead of the ruby-based DSL that bower-rails provides. I stick with the default bower location that stores assets in vendor/assets/bower_components. Make sure to add the following to your application.rb.
config.assets.paths << Rails.root.join("vendor","assets","bower_components")
Once you have packages added to your bower.json, then you run the following:
rake bower:install
to install your javascript packages. You then reference the javacript in your application.js and application.css files.
As #andrew-hacking noted above rails and bower do not play nicely with javascript packages that have css and images, specifically css that references images. Bower-rails aids in fixing this issue with the provided rake task:
rake bower:resolve
It resolves relative asset paths in components by rewriting url references in component css files with the rails helper method to reference the asset in an asset pipeline friendly way. See BowerRails::Performer#resolve_asset_paths for more detail.
My preference is to check in all of the bower_components into our repository, so we run bower:install followed by bower:resolve. You then need to add the images referenced within the package to your config.assets.precompile list for your staging and production environments. For example here is the setup for adding the select2 javascript component to your rails project using bower and rails.
bower.json:
{
"name": "Acme",
"private": true,
"dependencies": {
"select2": "3.5.1"
}
}
app/assets/javascripts/application.js.coffee:
#= require select2/select2
app/assets/stylesheets/application.css.sass
//= require select2/select2
config/environments/staging.rb and config/environments/production.rb:
config.assets.precompile += ["select2/*.png",
"select2/*.gif"]
It's not perfect, but it gives you the dependency management of your javascript components, and it's better then trying to figure out what gems you need to pull in to get the desired javascript component enabled for the asset pipeline.
In case anyone else thinks using bower in your rails project is a good idea, think again.
Bower packages are simply not made to integrate with rails or sprockets.
What this means:
they won't typically specify a manifest index.js for including your javascript via sprockets require directives.
You will have to analyse and ferret around in the bower package and work out exactly what you need to require and from where (your require paths get kind of long)
bower packages don't uniformly specify a main key, and even if they do the current sprockets/bower support seems to ignore them
additional assets like fonts, images and templates won't be included in your production asset compilation (Rails 4 only includes app/assets/xxx)
Using config.assets.precompile patterns to try and 'get around' the problem is coarse grained and will pick up lots of cruft in your bower components directories
bower packages won't use sprocket url path helpers so any references to images and fonts within CSS/SCCS wont have the correct asset path. Good luck with that.
you will have to resolve all of the issues in EVERY project where you use bower packages
bundle install no longer works for your projects dependencies and you have to use another package manager as well
In contrast asset gems are simple to create and provide a uniform abstraction for pulling assets into your project. You have a chance to modify the original files and use asset helpers so things work well with your rails projects. There is a decent blog on creating asset gems, as well as a general railscast on creating gems too.
IMO It would be better for the rails community to maintain up to date asset gems than every project having to deal with the issues of a bower package that was never designed to plug into the rails asset pipeline.
In Rails -
Where should I locate Gems? I downloaded bootstrap and it's working, as well as a sample Rails app, separately, but I want them to work together. There is a bootstrapped rails gem (http://rubygems.org/gems/bootstrapped-rails) which I downloaded, but I'm unsure as to where I should locate it. Under models?
And how do I make sure I am referring to it? I need to add something in controller as well?
Again, more an answer to the question in the title than to what was intended by the questioner but you can use
bundle show <gemname>
To locate the directory where a gem is installed.
As Dfr mentioned: https://github.com/seyhunak/twitter-bootstrap-rails
Twitter bootstrap isn't anything more than (mostly) a collection of css/js/image files.
Add this to your gemfile
gem "twitter-bootstrap-rails"
run
bundle install
run for simple css
rails generate bootstrap:install static
It should place relevant js and css files into your application.js and application.css files accordingly. (Read more about asset pipeline)
To get you started, in the gem's link under section - "Generating layouts and views", you can see rake tasks to generate sample layouts.
e.g.
rails g bootstrap:layout application fixed
You should now have a twitter-bootstraped application.html.erb file under views/layouts.
To answer the question in the title, you can locate your gems by running gem env in the console. That will give you the specific information about your "RubyGems Environment:" When you run gem install some_gem_name it will add this gem to your system.
However, what it sounds like your trying to do is add a gem to your app. If this is the case you add gems to a rails application's Gemfile.
So using your example, you'd locate your Gemfile and add the following:
gem "bootstrapped-rails", "~> 2.0.8.5"
Once that's done, you run bundle install in your terminal.
I find that a good resource for basic rails information can be found here: http://guides.rubyonrails.org/getting_started.html
The tutorial is short and it will give you a great starting point.