I am following screencast about twitter bootstrap basics to try to understand bootstrap more, but for some reason when I go to localhost, my app has no styling.
I have tried the steps from github repo https://github.com/seyhunak/twitter-bootstrap-rails as well.
I have also followed instruction from this SO post, but when I added the line *= require bootstrap_and_overrides, it shows FileNotFound error.
Here is what I did, after Rails new app bootstrap_practice:
rails g scaffold Product name price:decimal --skip-stylesheets
rake db:migrate
# added gem 'twitter-bootstrap-rails', :git => 'git://github.com/seyhunak/twitter-bootstrap-rails.git' on gemfile (I have also tried just gem 'twitter-bootstrap-rails'
bundle install
rails g bootstrap:install
I checked assets and it has the necessary assets.
Stylesheets (application.css)
*
*= require_tree .
*= require_self
*/
JS:
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require turbolinks
//= require_tree .
Lastly, my application.html.erb has
<%= csrf_meta_tags %>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
I am pretty sure that is everything needed. Why is my application on localhost not styled?
So, I've used twitter-bootstrap a lot of ways in Rails, and my favorite is with the bh gem. Bootstrap Helpers on github.
# Gemfile
gem 'bh'
# application.html.erb
<%= stylesheet_link_tag bootstrap_css %>
<%= stylesheet_link_tag font_awesome_css %>
<%= javascript_include_tag bootstrap_js %>
All the assets are delivered through the CDN.
An official SASS repo was released since the railscasts was released. (Rails comes with SASS out the box.)
https://github.com/twbs/bootstrap-sass
The repo by seyhunak is maintained in LESS, which requires therubyracer too.
Related
My application has a lot of 3rd party js/css files. We sped up the deploy by compiling these files into external-[hash].js and external-[hash].css (So Rails don't have to compile these files on every single deploy)
And loaded them like this in application.html.erb
<%= stylesheet_link_tag "external", :media => "all" %>
<%= javascript_include_tag "external" %>
These two files are under /public/assets/. This was working fine when we are on Rails 4. We are currently trying to upgrade to Rails 5, and these two files are not loading properly.
I changed the tags into below and in the chrome console, these files appear to have been loaded properly.
<%= stylesheet_link_tag "/assets/external-[hash]", :media => "all" %>
<%= javascript_include_tag "/assets/external-[hash]" %>
However, when I add in the application style/js tags below the external tags
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
I keep getting the error
Error: "img" failed to #extend ".img-responsive".
The selector ".img-responsive" was not found.
Use "#extend .img-responsive !optional" if the extend should be able to fail.
Looking into the external-[hash].css, I am able to see the .img-responsive selector defined. So, it seems like Rails 5 does not properly load these two files?
I'm currently using Rails 5.1.7, Ruby 2.4.2
I also tried adding config.public_file_server.enabled = true to environment files.
Here are how I've setup the external files.
I have an external.js, and external.scss, these files live under app/assets.
Inside application.js/css, I added stub external to both, so when the rails application deploys, it ignored the external files. I would run RAILS_ENV=external_assets rails assets:precompile and commit those files to git, expecting them to be loaded first.
Example external.js
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery.readyselector
//= require bootstrap
//= require bootstrap-datepicker
//= require moment
//= require d3
//= require c3
//= require jsgrid.min
//= require bootstrap-datetimepicker
external.css
/*
*= require_self
*= require bootstrap-datepicker
*= require bootstrap-datetimepicker
*= require rails_bootstrap_forms
*= require c3
*= require jsgrid.min
*= require jsgrid-theme.min
*/
#import "font-awesome-sprockets";
#import "font-awesome";
#import 'bootstrap-sprockets';
#import 'bootstrap';
#import 'bootstrap-datetimepicker';
Please let me know if I can provide any other information.
Try some below commands
RAILS_ENV=production rails assets:clean
RAILS_ENV=production rails assets:clobber
And change in production
config.assets.compile = true
Then again run
RAILS_ENV=production rails assets:precompile
I have a fresh rails project where I only generated a controller. I've followed the directions to install bootstrap according to the bootstrap gem, and I keep getting the following error:
ActionView::Template::Error (identifier '(function(opts, pluginOpts) {return eva
l(process' undefined):
5: <%= csrf_meta_tags %>
6: <%= csp_meta_tag %>
7:
8: <%= stylesheet_link_tag 'application', media: 'all', 'data-turbol
inks-track': 'reload' %>
9: <%= javascript_include_tag 'application', 'data-turbolinks-track': '
reload' %>
10: </head>
11:
(execjs):1
app/views/layouts/application.html.erb:8:in `_app_views_layouts_application_html
_erb__511219785_80461480'
I've followed all the instructions according to this webpage: https://github.com/twbs/bootstrap-rubygem
My code:
# Gemfile
gem 'bootstrap', '~> 4.1.1'
gem 'jquery-rails'
# app/assets/javascripts/application.js
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require jquery3
//= require popper
//= require bootstrap
//= require_tree .
# app/assets/stylesheets/application.scss
#import "bootstrap";
Note, I also did remove *= require and *= require_tree from the application.scss and I did make sure that it's a scss file and not a css file.
This seems to be a current issue with ExecJS and duktape on Windows.
See the following link for more information: https://github.com/twbs/bootstrap-rubygem/issues/157
In short, to resolve this issue you can simply remove/comment out duktape from your Gemfile. If you're going for Node.js as your JS runtime, remember to actually install it (Node.js).
If you still have problems, remove all //= require directives from your application.scss and keep those in application.js instead.
application.js
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
//= require jquery3
//= require popper
//= require bootstrap-sprockets
application.scss
#import "bootstrap";
Gemfile
Remove gem 'duktape'
gem 'autoprefixer-rails'
gem 'bootstrap', '~> 4.1.1'
gem 'jquery-rails'
From a comment on the issue:
duktape has become the default JS Runtime in Windows sometime ago in
rails/rails#30014.
If you look into other similar issues involving Exejs you might found
out that duktape is actually the culprit (however its execjs here for
definition of duktape context). If you change your runtime environment
to use Nodejs, the error would be resolved, as the case with
#yasunari89
In config/boot.rb ENV['EXECJS_RUNTIME'] = 'Node'
You can find more info in #152 , #153 and #155 . However, above issues
with invalid regex was fixed with new version of duktape, for more
info visit judofyr/duktape.rb#41 The new version which resolved the
invalid regex issue , started causing issue which you are encountering
now. This issue happens because ( as defined in execjs) duktape
doesn't support complex contexts and full JS as identifier.
However a PR is under review that will possibly resolve the issue,
thanks to #judofyr
You should also make sure that your application.html.erb is setup correctly. Here is an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>title</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<div class="container">
<%= yield %>
</div>
</body>
</html>
ExecJS supports several runtimes, not just duktape and NodeJS.
https://github.com/rails/execjs
ExecJS supports these runtimes:
therubyracer - Google V8 embedded within Ruby
therubyrhino - Mozilla Rhino embedded within JRuby
Duktape.rb - Duktape JavaScript interpreter
Node.js
Apple JavaScriptCore - Included with Mac OS X
Microsoft Windows Script Host (JScript)
Google V8
mini_racer - Google V8 embedded within Ruby
In my new rails project, I add bootstrap css and javascript; but it doesn't work and class aren't add to pages.
I copy files in app/assets/javascripts and app/assets/stylesheets.
I add this file in application.html.erb like below:
<head>
<title>JiraAjax</title>
<%= stylesheet_link_tag 'application' %>
<%= stylesheet_link_tag 'bootstrap.min' %>
<%= javascript_include_tag 'application' %>
<%= javascript_include_tag 'bootstrap.min' %>
<%= csrf_meta_tags %>
</head>
when I run project, I see both of file in html code in browser, but class aren't preview and doesn't work.
Other css is working, but bootstrap doesn't work.
I added pre-compile line for each file in application.rb, but the problem isn't solve.
app/assets/javascripts/application.js:
//= require jquery
//= require jquery_ujs
//= require bootstrap.min
app/assets/stylesheets/application.css:
*= require_self
*= require bootstrap-rtl.min
It's very strange for me, any one can help me?
You have to watch out for the load order of the assets that you're using. Depending on the specific situation, bootstrap should be loaded either before or after other assets.
Another issue I ran into was having either asset twice, which threw me off.
I'd suggest playing around with the order and making sure you don't have duplicate imports :) What I ended up doing was just hardcoding imports into my html.erb files instead of dealing with the asset-pipeline as a temporary workaround.
I am a newbie in Ruby on Rails and need to know what things we have to be careful about if we are willing to use jQuery in a Ruby on Rails application.
In my view page I have:
<script type="text/javascript" src= "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<%= javascript_include_tag "application" %>
<script>
alert("hussain")
alert($('#hussi').val())
</script>
It gives the first alert as expected, but for the second alert it says '$' is not defined.
I have the jquery-rails gem installed.
The browser points out that I have a missing reference in my application.js file.
require jquery;
require jquery_ujs;
I saw some file examples where they mention it like:
= require jquery;
= require jquery_ujs;
But adding'=' raises an IDE error in my IDE.
Add this to you application.js:
//= require jquery
//= require jquery_ujs
and add this to your Gemfile:
gem 'jquery-rails'
Also make sure you have this in you application layout:
<%= javascript_include_tag "application" %>
Just a note: avoid using tags in your code, move your javascript to your assets folder.
There is a typo in your code: text/javas c ript. This causes the script to not be parsed.
i have a rails application that i want to deploy on my production server,
the thing is that when i run rake assets:precompile, it generates css and js files under /public/assets , for example "/public/assets/application.css" and "/public/assets/application.js"
but when i add this tags on my erb
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
and i run the site, they both refer to
"mysyte/javascript/application.js"
and
"mysite/stylesheets/application.css"
so, the question is, how do i configure the app so that when i precompile my assets they are place inside "/public/javascript", "/public/stylesheets", and "/public/images"
thanks in advance.
EDIT:
i guess the real problem is that on production the following tag
<%= stylesheet_link_tag "application", :media => "all" %>
is refering to "www.mydomain.com/javascript/application.js"
how do i change it to refer to
"www.mydomain.com/assets/application.js"
i've solved this,
the thing is that i'm using mongoid on my app, and had to remove active_record
so in my application.rb
i removed require "rails/all"
and in change i added
require "action_controller/railtie"
require "action_mailer/railtie"
require "active_resource/railtie"
require "rails/test_unit/railtie"
i was missing
require "sprockets/railtie"
now my app is searching for assets in the right assets folder.
thanks richlewis and deefour for your time.