Rails 4 + bootstrap set up assets

Question

I am trying to setup bootstrap on Rails4 using bootstrap-sass and I am getting this famous error:

Sprockets::FileNotFound - couldn't find file 'bootstrap'
  (in app/assets/javascripts/application.js:16):

I have tried following:

1. twitter/bootstrap in application.js
2. gem 'bootstrap-sass', '~> 3.1.0' is outside group assets
3. Also tried bunch of other things on internet

I have spend lot of time taking different suggestions from other posts. How do I systematically debug this , how to setup bootstrap-sass ?

p.s: Also been trying to get twitter-bootstrap-rails working with no luck.

Here are some files

application.js

//= require jquery
//= require jquery_ujs
//= require js-routes
//= require bootstrap
//= require_tree .
//= require bootstrap-slider

application.css.scss

 *= require jquery.ui.core
 *= require jquery.ui.theme
 *= require_self
 *= require bootstrap-slider
 *= require_tree .
 *= stub active_admin
*/

@import "bootstrap";

Gemfile

source 'https://rubygems.org'
ruby '2.0.0'
gem 'rails', '4.0.0'
gem 'sass-rails'
gem 'coffee-rails', git: 'git://github.com/rails/coffee-rails.git'
gem 'uglifier', '>= 1.0.3'
gem 'jquery-ui-rails'
gem 'font-awesome-sass'
gem 'less-rails'
gem 'therubyracer', :platform=>:ruby
#gem 'twitter-bootstrap-rails'
gem 'jquery-rails'
#gem 'jquery_mobile_rails'
gem 'js-routes'
gem 'cancan'
gem 'devise'
gem 'figaro'
gem 'haml-rails'
gem 'pg'
gem 'rolify'
gem 'sendgrid'
gem 'simple_form'
gem 'thin'
gem 'rake'

#To use db for storing cookies instead cookie-store
gem 'activerecord-session_store', github: 'rails/activerecord-session_store'

group :development do
  gem 'better_errors'
  #gem 'binding_of_caller', :platforms=>[:mri_19, :rbx]
  #Commenting out platforms part, because may be that's stopping this to be used on the dev machine'
  gem 'binding_of_caller'
  gem 'guard-bundler'
  gem 'guard-rails'
  gem 'guard-rspec'
  gem 'html2haml'
  gem 'quiet_assets'
  gem 'rb-fchange', :require=>false
  gem 'rb-fsevent', :require=>false
  gem 'rb-inotify', :require=>false

  # Required with Rails panel chrome extension. This Gem should come after better_errors gem
  gem 'meta_request'
end
group :development, :test do
  gem 'factory_girl_rails'
  gem 'rspec-rails'
  gem 'pry-byebug'
  gem 'pry-stack_explorer'
  gem 'pry-rails'
  gem 'pry-debugger'
end

group :test do
  gem 'capybara'
  gem 'database_cleaner'
  gem 'email_spec'
end

group :production do
  gem 'rails_12factor'
end

gem 'high_voltage'

#Linkedin Logins
gem "linkedin"
gem "omniauth"
gem "omniauth-linkedin"

gem "omniauth-facebook"

#postgres use hstore in active record
#gem 'activerecord-postgres-hstore'

gem 'state_machine'
gem "ruby-graphviz"


#payments
#gem 'stripe',:git => 'https://github.com/stripe/stripe-ruby'

#gem 'anjlab-bootstrap-rails', :require => 'bootstrap-rails', :github => 'anjlab/bootstrap-rails'

gem 'newrelic_rpm'

gem 'pgbackups-archive'

gem 'pg_search'

gem 'acts-as-taggable-on'

#gem 'activeadmin' , github: 'gregbell/active_admin'
gem "activeadmin", git: "https://github.com/gregbell/active_admin"

gem 'kaminari'
gem 'bootstrap-slider-rails'
gem 'bootstrap-sass', '~> 3.1.0'

Answer 1

Installing the Bootstrap Gem

1.) Add the Bootstrap Gem:

gem 'bootstrap-sass'

2.) Understand The Application.css File app/assets/stylesheets/application.css

Application.css takes all the other files in your /stylesheets directory and combines them for when you run your app.

3.) Create a New SCSS File (app/assets/stylesheets/bootstrap_and_customization.css.scss)

@import 'bootstrap';

4.) Require Bootstrap's JavaScript

...
//= require jquery
//= require jquery_ujs
//= require bootstrap <--
//= require turbolinks
//= require_tree .

5.) Rails Assets

group :production do
  gem 'rails_12factor'
end

6.) Bundle Install & Restart Server

Thats should be it !

Answer 2

On one of my projects (Rails 4.1) I had to include the bootstrap directly (not sass). Maybe it will give a hint on making the saas version work. So below are steps to include the bootstrap directly:

1. Download and and extract the bootstrap to Rails.root/vendor/assets/bootstrap

2. Create file Rails.root/vendor/assets/javascripts/bootstrap.js file with contents like this:

   //= require ../bootstrap/js/bootstrap.js

3. Now the most important part to make icons work. The font file urls have to be overridden for the Glyphicons Halflings font. Also asset_path helper has to be used. So create file Rails.root/vendor/assets/stylesheets/bootstrap.css.erb file with contents like this.

/*
=require ../bootstrap/css/bootstrap.css
*/

@font-face {
    font-family: 'Glyphicons Halflings';

    src: url("<%= asset_path 'glyphicons-halflings-regular.eot' %>");
    src: url("<%= asset_path 'glyphicons-halflings-regular.eot?#iefix' %>") format('embedded-opentype'), url("<%= asset_path 'glyphicons-halflings-regular.woff2' %>") format('woff2'), url("<%= asset_url 'glyphicons-halflings-regular.woff' %>") format('woff'), url("<%= asset_path 'glyphicons-halflings-regular.ttf' %>") format('truetype'), url("<%= asset_path 'glyphicons-halflings-regular.svg#glyphicons_halflingsregular' %>") format('svg');
}

4. Now require bootstrap in the application.js and application.css

application.js

//= require bootstrap

application.css

 *= require bootstrap

5. And finally let assets pipeline be aware of the fonts path and additional extensions to precompile. In the application.rb add:

config.assets.paths << Rails.root.join("vendor", "assets", "bootstrap", "fonts")
config.assets.precompile += %w( *.eot *.svg *.ttf *.woff *.woff2 )

After that RAILS_ENV=production rake assets:precompile should show that is has recognized font files and copied them to the public assets folder.

Then to test if it works in production enable serving static assets (in production.rb: config.serve_static_assets = true) and RAILS_ENV=production rails s

Answer 3

I ended up using bootstrap from a hosted CDN

      %link{href: "//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css", rel: "stylesheet"}/
      %link{href: "//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" , rel: "stylesheet"}/
      %link{href: "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css", rel: "stylesheet"}/

Answer 4

I had exactly the same error. The solution was to change in:

config/environments/production.rb

The line

config.serve_static_assets = false

to

config.serve_static_assets = true

I'm not exactly aware of what this line does, but my workteam had the same problem on a project, and they changed this line, and it worked.