I'm using twitter bootstrap in my Rails application. It works well in development mode but does not in production. Here is the Gemfile
source 'https://rubygems.org'
ruby '1.9.3'
gem 'rails'
gem 'jquery-rails'
gem 'haml-rails'
gem 'devise'
gem 'bcrypt-ruby'
gem 'curb'
gem 'nokogiri'
gem 'pg'
group :assets do
gem 'sass-rails'
gem 'twitter-bootstrap-rails'
gem 'uglifier'
end
When I run it as rails s -e production it gives me the error of
ActionView::Template::Error (couldn't find file 'twitter/bootstrap'
(in /home/alex/Documents/ruby_projects/p1/app/assets/javascripts/application.js:15)):
Application.js
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require_tree .
production.rb
config.serve_static_assets = false
# Compress JavaScripts and CSS
config.assets.compress = true
# Don't fallback to assets pipeline if a precompiled asset is missed
config.assets.compile = true
# Generate digests for assets URLs
config.assets.digest = true
Somebody suggested me to remove gem 'twitter-bootstrap-rails' which I cannot do because I use it or move it outside of group assets which didn't help me either: the application well except the fact that twitter bootstrap files (js and css) weren't loaded at all.
How do I fix it?
UPDATE:
If I use use //= require bootstrap instead of //= require twitter/bootstrap then it gives me cannot load such file -- less (in home/alex/Documents/ruby_projects/pr1/app/assets/stylesheets/bootstrap_and_overrides.css.less) despite the fact that the file exists.
And if I rename css.less to css, then I get the next error couldn't find file 'bootstrap_and_overrides' (in /home/alex/Documents/ruby_projects/pr1/app/assets/javascripts/application.js:15)
Restarting the server worked for me.
I solved this issue by using following steps:
Move twitter-bootstrap-rails gem from outside of :assets in gemfile
Update twitter-bootstrap-rails gem version 2.2.6 or
just paste below line in your gemfile.
gem 'twitter-bootstrap-rails', :git => 'git://github.com/seyhunak/twitter-bootstrap-rails.git'
(or)
if twitter-bootstrap-rails 2.2.6 is not working then
Use twitter-bootstrap-rails gem latest version.
Just use //= require bootstrap instead of //= require twitter/bootstrap.
Requiring Bootstrap LESS (bootstrap_and_overrides.css.less) in your application.css is meaningless here, because the pipeline comes already with "require_tree ." which automatically includes everything inside the folders of the asset pipeline.
so, I suggest you to do some changes in your Gemfile.
Move the following gems from outside of :assets in Gemfile.
do this
gem "therubyracer"
gem "less-rails"
gem "twitter-bootstrap-rails"
instead of this
group :assets do
gem "therubyracer"
gem "less-rails"
gem "twitter-bootstrap-rails"
end
Follwing steps worked for me:
Move twitter-bootstrap-rails gem from outside of :assets in gemfile
replace the twitter bootstrap gem by this (gem "twitter-bootstrap-rails", '~> 2.2.6') in gemfile
bundle update
restart server and test
Related
I am more of a Java programmer and still somewhat new to development (2 years or so, can write Java code & web apps just fine) however the company I work for has 4 Rails applications and was asked to get this application working called CtrlPanel. I have been having to learn Ruby on Rails in order to help get this issue with this app fixed and get it working.
I have been working on this problem for over a week all day long every day and nothing I do is fixing it.
I fixed everything to the point the app comes up, web server runs serves the pages but all views are white screens as long as this application.html.haml file is present. I re-wrote the file with very basic bootstrap and it sort of works but nothing looks right. The problem seems to stem from 1 single like that simply says: = javascript_include_tag "application"
I have been all over the internet and have tried every single fix from changing coffee-script-source to v1.8.0 as I read Windows has an issue with newer rails and that file, I have tried every variation of changing it from application to default, and every type of ending you can think of no matter what I do it gives me this error message which I can not seem to find.
I am not even sure WHAT that line does, I assume it has to do with the new Google Maps API and I verified the key is valid and it was working before.
This is the error is it giving it says the line with "= javascript_include_tag" "application"
giving error
ExecJS::RuntimeError at / SyntaxError: [stdin]:1:1: unexpected //=
I am running a PC on Windows 10 20H2 x64 UEFI
ruby 2.7.2p137 (2020-10-01 revision 5445e04352) [x64-mingw32]
Rails 6.1.3
(I did also install Ubuntu on another machine and it gives the exact same error, also gives the same error on another Windows machine)
The app is working IF I delete the "application.html.haml" file and put in a skeleton basic version all of the other views start working but of course none of them look right no menus no bootstrap no nothing.
Here is the application.html.haml file.
!!!
%html
%head
%title= full_title(yield(:title))
= stylesheet_link_tag "application", media: "all"
= stylesheet_link_tag "print", media: "print"
= javascript_include_tag "http://maps.googleapis.com/maps/api/js?key=AIzaSyDOejvFkvPN_KP_9gnjH-Z8PB4eLtdju4E&libraries=geometry"
= javascript_include_tag "application"
= javascript_include_tag "//www.google.com/jsapi", "chartkick"
= javascript_include_tag "http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"
= csrf_meta_tags
= render 'layouts/shim'
%meta{:content => "width=device-width, initial-scale=1.0", :name => "viewport"}
%body
= render 'layouts/header'
.container-fluid.round.master
- flash.each do |key, value|
.alert-container
.span6.offset3.alert-message.center{:class => "alert alert-#{key}"}
= value
%button.close#close-alert{"aria-hidden" => "true", "data-dismiss" => "modal", :type => "button"} ×
= yield
.spacer{style: "width:100%;margin-bottom:80px;"}
// = render 'layouts/footer'
Here is my gemfile:
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby '2.7.2'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails', branch: 'main'
gem 'rails', '~> 6.1.3'
gem 'pg', '~> 1.1'
#gem 'postgres_ext' Breaks the app
gem 'paperclip'
#gem 'paperclip-aws'
#gem 'aws-sdk-v1'
gem 'haml'
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'sass-rails', '>= 6'
gem 'bootstrap-will_paginate'
#gem 'bootstrap'
gem 'coffee-script-source', '1.8.0'
gem 'coffee-rails'
gem 'uglifier'
gem 'by_star'
gem 'simple_enum'
gem 'jquery-turbolinks'
# data dump
#gem 'yaml_db' - Gem is no longer supported and will NOT work with Rails 6 PERIOD.
# gem 'rb-readline'
# geocoding/addressing
gem 'geocoder'
gem 'gmaps4rails'
gem 'gmaps-autocomplete-rails'
gem 'mechanize'
gem 'nikkou'
# caching
#gem 'memcachier'
#gem 'dalli'
#gem 'multi_fetch_fragments'
#gem 'cache_digests'
# Style and Appearance
gem 'will_paginate'
gem 'chartkick'
#Forms and Input
gem 'simple_form'
gem 'ransack'
#gem 'protected_attributes' - No longer works with newer Rails Versions.
gem 'chronic'
gem 'protected_attributes_continued'
gem 'chosen-rails'
# Web Scraping
gem 'nokogiri'
# PDF Conversion
gem 'wicked_pdf'
#gem 'squeel', :git => "git://github.com/activerecord-hackery/squeel.git"
# Bundle edge Rails instead:
# gem 'rails', :git => 'git://github.com/rails/rails.git'
#gem 'unicorn'
gem 'puma'
# User Management
gem 'devise'
gem 'cancan'
gem 'devise_invitable'
gem 'paper_trail'
# Content Control
gem 'browser'
# pdf creation
gem 'prawn'
gem 'prawn-rails'
gem 'combine_pdf'
gem 'pry-byebug'
#Additional Gems required by Rails 6
gem 'webpacker', '~> 5.0'
gem 'turbolinks', '~> 5'
gem 'jbuilder', '~> 2.7'
gem 'bootsnap', '>= 1.4.4', require: false
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
gem 'annotate'
gem 'better_errors'
gem 'binding_of_caller'
gem 'letter_opener'
#gem 'meta_request'
#gem 'thin'
gem 'spring'
gem 'erb2haml'
end
group :development do
# Access an interactive console on exception pages or by calling 'console' anywhere in the code.
gem 'web-console', '>= 4.1.0'
# Display performance information such as SQL time and flame graphs for each request in your browser.
# Can be configured to work on production as well see: https://github.com/MiniProfiler/rack-mini-profiler/blob/master/README.md
gem 'rack-mini-profiler', '~> 2.0'
end
group :test do
# Adds support for Capybara system testing and selenium driver
gem 'capybara', '>= 3.26'
gem 'selenium-webdriver'
# Easy installation and use of web drivers to run system tests with browsers
gem 'webdrivers'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
Here is the application.js file that I believe it is calling, even though the file is useless as it has nothing but commented lines in it.
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery-ui
//= require gmaps-auto-complete
//= require timeago
//= require jquery.dataTables.min
//= require jquery.mark.min
//= require datatables.mark.min
//= require animate_numbers
//= require underscore-min
//= require gmaps/google
//= require chosen-jquery
//= require dealerships
//= require global
//= require_self
//= require_tree .
Screenshot of the error message:
Error pointing to include tag application.
I have also tried removing the "require_tree" . and about every other line in that file at one point or another and it appear to change nothing at all. I have tried every version of changing the application word to default, again nothing seems to work.
If anyone needs to see anything else just let me know what, I am new to Ruby and Rails and I'm sure this is something I am missing I just don't know what and the Documentation doesn't seem to help.
Any help would be appreciated,
Thank You,
Scott
I did finally figure out what this was.
The older versions of rails in this case v4.2.1 used the javascript_include_tag for the line that deals with application:
= javascript_include_tag "application"
In the newer versions of rails in my case v6.1.3.1 you have to use javascript_pack_tag
= javascript_pack_tag
This solved the issue and the views all started working. I did mention above I was working on a PC running Rails v6.1.3; however I noticed I didn't make it clear that I was also having to upgrade this program from Ruby v2.2.2 and Rails v4.2.1 to Ruby v 2.7.2 and Rails v6.1.3, that might have helped to have made that more clear. Apologies if that confused anyone. I am still VERY new to Rails and using StackOverflow.com. I am happy to report I have only 1 single issue left on this program and the rest of the program is all working properly. I will be posting another question in fact because the last issue deals with a complicated scope query and it uses different syntax again due to the newer version of rails and I haven't been able to figure it out. In any even if you are running an older version of Rails and you are trying to get the program to work on a newer version (my case as I couldn't get rails v4.2 to run or work on ANYTHING, PC, Linux nothing) then you have to change the include_tag to a pack_tag. I do not pretend to say I fully understand why. I know it has to do with webpacker but beyond that I am still learning Rails. Perhaps someone with more knowledge than myself can shed some insite as to why the syntax changed. Oh and in addition the line ended up needing to read as follows:
= javascript_pack_tag "application", "data-turbolinks-track": "reload"
I didn't have the turbolinks reference either.
I hope this helps someone else in a similar situation that I was in, it was not easy to find. I only discovered it when I went through some tutorials on making other generic apps and saw the difference on that line.
I have tried every tutorial and every guide but I am not able to integrate bootstrap in my rails app
I have tried bootstrap-sass gem, bootstrap CDN, bootstrap gem
Ruby on Rails version
5.2.0
Ruby version 2.2.6
EXACTLY FOLLOWED THESE TUTORIALS AND HAVE ACHIEVED 0 RESULTS:
for bootstrap sass
https://github.com/twbs/bootstrap-sass
for bootstrap https://github.com/twbs/bootstrap
tried using bootstrap CDN
https://www.bootstrapcdn.com/
I have been stuck on this for weeks, tried solving it on my own, followed many blog posts and StackOverflow answers and tried everything.
Is it a problem with rails 5.2 version? or my operating system windows 10
is there a gem missing in my gem file?
EDIT: I can run bundle install successfully, adding CDN in my head tag in application.html.erb does not solve my problem
The problem I am facing is that I cant use bootstrap no matter what method I try
GEM FILE :
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby '2.2.6'
gem 'rails', '~> 5.2.0'
gem 'sqlite3'
gem 'puma', '~> 3.11'
gem 'coffee-script-source', '1.8.0'
gem 'bootstrap-sass', '~> 3.3.7'
gem 'sass-rails', '~> 5.0'
gem 'jquery-rails'
gem 'uglifier', '>= 1.3.0'
gem 'duktape'
gem 'coffee-rails', '~> 4.2'
gem 'turbolinks', '~> 5'
gem 'jbuilder', '~> 2.5'
gem 'bootsnap', '>= 1.1.0', require: false
Maybe try this one:
1) Gemfile
# Add these gems. Rails is not including jQuery by default.
# You need to include it to use all bootstrap options.
gem 'bootstrap'
gem 'jquery-rails'
2) app/assets/javascripts/application.js
jquery3, popper, and bootstrap are the ones for bootstrap
//= require jquery3
//= require popper
//= require bootstrap
//= require rails-ujs
//= require turbolinks
//= require_tree .
3) app/assets/stylesheets/application.scss
#import 'bootstrap'; // assuming you changed to SCSS from CSS
4) Run bundle and restart your server
This is a working repo with Rails 5.2 and Bootstrap 4
https://github.com/HoracioChavez/bootstrap-sample
Tested on macOS
You can try this example. It works for me in my project.
In your Gemfile:
gem 'bootstrap-sass'
gem 'jquery-rails'
In your app/assets/javascripts/application.js
//= require rails-ujs
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .
In your /app/assets/stylesheets/application.scss
*= require_tree .
*= require_self
*/
#import "bootstrap-sprockets";
#import "bootstrap";
After you install all gems and make above configurations you can try to test your bootstrap work with this bootstrap dropdown button. Hope it helps you.
Also, please note, that I used bootstrap 3 and worked on Linux Ubuntu.
for rails v5.2.0.
All you need is to ensure you have the gem 'bootstrap-sass' AND gem 'jquery-rails' in the gem file. Bootstrap requires JQuery. Back in other
rails versions i.e v4.x you would have to include alot of other
gems but not anymore in this version they are the default except the bootstrap-sass and jquery-rails gem.
run bundle install to install the gems
Then change the default manifest file app/assets/stylesheets/application.css
filename to app/assets/application.scss(.sass) because we need to
import (load and execute) said file, css cant do that also because the line we intend to include is sass syntax not css syntax.
include #import"bootstrap" in the stylesheet manifest file (application.scss) and prepend //= require jquery in application.js. This affects affects the app/views/layouts/application.html.erb the standard place for all your layout used by all templates in the controller. In older versions here you would have to require other extensions eg. turbolink in order for bootstrap to work effectively and efficiently but no in this version.
Your done. All your web pages are now bootstrap integrated.
I am watching the old One Month Ruby on Rails lectures without being enrolled in the course and encountered this problem. I have searched through about 20 stackoverflow and github tutorials and can't find the problem, any help is greatly appreciated. (This is my first time posting here so if I am doing something wrong or need to include more information let me know).
Gemfile:
source 'https://rubygems.org'
gem 'rails', '4.2.6'
gem 'jquery-rails'
# Use sqlite3 as the database for Active Record
group :production do
gem 'pg'
end
group :development, :test do
gem 'sqlite3'
end
group :assets do
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'bootstrap-sass', '~> 3.3.6'
gem 'sass-rails', '>= 3.2'
end
Styles.css.scss :
#import "bootstrap";
application.js :
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require_tree .
According to the Question its clearly stated that you need to restart your server whenever a gem is installed or updated, if you upgrade ruby, or if you change some logic that runs during boot time (like config/boot.rb or config/database.yml). Otherwise it's generally ok not to, even if you edit/add models/controllers.
Remove group "assets" from Gemfile. It is obsolete in Rails 4.
Rails 4.0 removed the assets group from Gemfile. You'd need to remove
that line from your Gemfile when upgrading.
See Ruby on Rails Guides
you use gem bootstrap-sass than in your application.js use
//= require bootstrap-sprockets
and in your application.css use
// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
#import "bootstrap-sprockets";
#import "bootstrap";
Rails: 4.0.0
Ruby : 1.9.3
I am using jQuery's animate() method in my Rails application.
I can't get it to work.
I've read the documentation at jquery-ui-rails and followed the steps mentioned there, i.e.,
Installed the gem
included it in the Gemfile - gem 'jquery-ui-rails'
bundle install
Added the //= require jquery.ui.all in my application.js file
Yet I get an Sprockets::FileNotFound error.
Showing /Users/anil20787/workspace/railsdir/depot/app/views/layouts/application.html.erb where line #9 raised:
couldn't find file 'jquery.ui.all'
(in /Users/anil20787/workspace/railsdir/depot/app/assets/javascripts/application.js:14)
Gemfile
source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.0.0'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 4.0.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .js.coffee assets and views
gem 'coffee-rails', '~> 4.0.0'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use jquery as the JavaScript library
gem 'jquery-rails'
gem 'jquery-ui-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 1.2'
group :doc do
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', require: false
end
I did also look up this post with a problem similar to mine, but it is pointing to the documentation, whose steps I have already followed. Not sure where I have made a mistake.
Any help is appreciated. Thanks
According to this the order of the includes is important. Can you post your include file?
Put //= require jquery.ui.all right after //= require jquery so it will look like this
//= require jquery
//= require jquery.ui.all
//= require jquery_ujs
//= require underscore
//= require backbone
//= require svitla_test
//= require_tree .
Restarting my Rails server did it for me.
If anyone still struggle with this I added gem 'rails-asset-jqueryui' then run bundle install and after it, restart server... then the file should be found, of course you also need to add
//= require jquery.ui.all in application.js file
and
*= require jquery.ui.all in applications.css file
I'm trying to follow the Railscasts episode on jQuery-FileUpload. I've added
gem 'jquery-fileupload-rails'
to the assets group of the Gemfile, and also added the
//= require jquery-fileupload/basic
line to the application.js file in the asset directory. When I try to bring up the website, however, the following error is shown:
couldn't find file 'jquery-fileupload'
(in root/app/assets/javascripts/application.js:15)
Any help would be greatly appreciated.
I found a "solution" - restarting rails server did the trick.
Remove it from assets group, and it'll work fine.
I have fix this by :
add
gem 'therubyracer'
gem 'execjs'
to your Gemfile.
and run bundle install
and
rake assets:precompile --trace RAILS_ENV=production
That's really weird, I just tried with a Gemfile:
source 'https://rubygems.org'
gem 'rails', '3.2.12'
# Bundle edge Rails instead:
# gem 'rails', :git => 'git://github.com/rails/rails.git'
gem 'sqlite3'
# Gems used only for assets and not required
# in production environments by default.
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem "jquery-fileupload-rails"
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', :platforms => :ruby
gem 'uglifier', '>= 1.0.3'
end
gem 'jquery-rails'
and on application.js
//= require jquery
//= require jquery_ujs
//= require_tree .
//= require jquery-fileupload/basic
and worked great, did you run bundle ? I know its a stupid question but it may be
I think you wanna add the following line to application.js
//= require jquery-fileupload
I ran into something similar lately. What worked for me was to load the gem directly from git
gem 'jquery-fileupload-rails', git: 'git://github.com/ollnixon/jquery-fileupload-rails.git'
And then to load the the needed ui styles
*= require jquery.fileupload-ui
Works flawlessly now