I'd like to set Bootstrap on Rails 5.1.5, following the tutorial https://www.railstutorial.org/book/filling_in_the_layout but the procedure with the Gemfile won't work.
After some readings, in particular here: Installing Bootstrap 3 on Rails App I ended up downloading the css files and copying them directly in app/assets/stylesheets.
Now I get this error:
Invalid CSS after "...quire bootstrap": expected "{", was ""
linked to this line in application.html.erb
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
As I understand, this line is processed with the application.scss file that I have created in app/assets/stylesheets (where there was a file application.css). This file has only one line:
*= require bootstrap
After looking further in the docs, I have made a test with:
<%= stylesheet_link_tag "bootstrap" %>
and from there I get another error:
TypeError: Cet objet ne gère pas cette propriété ou cette méthode
which means 'this object doesn't deal with this method'.
Just another misconfiguration of my Rails installation or what ?
Is it possible that a nodeJS installation solve the problem ? I've found a reply here Ruby on rails: Stylesheets not working ExecJS::ProgramError which seems to have made it.
Actually installing NodeJS can help a lot: this should be the very first thing to do for window users!
Related
I've been trying to update from Sprockets 3 to Sprockets 4 but I'm getting the following error: Encoding::UndefinedConversionError at / "\xC3" from ASCII-8BIT to UTF-8
The error happens in the following line: <%= javascript_include_tag "c/components/App", "data-turbolinks-track" => 'reload' %> and I can't understand why.
I had the exact same problem with Rails 4. It was about my accented (brazilian portuguese) characters but I am not sure how i fixed it. But replacing accented characters with the equivalent one (ã -> a, for example) was a (bad) workaround.
In my case, it was the charset that was being used when building the source map.
If you create an initializer file registering the mime type again with the charset setted to :unicode it will solve the problem:
config/initializers/sprockets-register.rb
Sprockets.register_mime_type 'application/js-sourcemap+json', extensions: ['.js.map'], charset: :unicode
I know there are alot of similar questions/answers on SO about this, and I have tried at least 7 of the proposed methods. I can display my app's background image locally in a variety of ways. After trying for nearly 40 hours, there seems to be no way to render it in production. It runs on the following:
Ruby 2.1.5
Rails 4.1.8
Puma 2.1 via Amazon Elastic Beanstalk (single instance - no load balancer)
I've tried every combination of config.serve_static_assets=[true|false] and setting RAILS_SKIP_ASSET_COMPILATION to true and false.
Ran rake assets:precompile RAILS_ENV=production
Tried every path I can think of, but it's not finding the background image. One thing I noticed was that precompilation changes the name of the image when it copies to the public/assets directory. (example: "foo.jpg" becomes "foo-ilfajwe8hjsa8erfjsdf.jpg") So I tried copying the original image files to the new public/assets directory, hoping the app would find them there. That didn't work.
I'm thinking it might be how I'm referencing it in my css, because oddly the favicon file displays as does the fonts from my app's "fonts" folder. And both have their names appended to just like the background image.
Here is my application.html.erb..
<!DOCTYPE html>
<html>
<head>
<title>Capstone v1.4.5</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<%= favicon_link_tag 'capstone_icon.png' %>
</head>
<body>
<% if notice %>
<p class="alert alert-success"><%= notice %></p>
<% end %>
<% if alert %>
<p class="alert alert-danger"><%= alert %></p>
<% end %>
<%= render 'navigation' %>
<main>
<%= yield %>
</main>
</body>
</html>
Here is the application.css.sass..
/*
*= require bootstrap.min
*/
#import "bootstrap-sprockets"
#import "bootstrap"
#font-face
font-family: 'Cinzel-Regular'
src: font-url('Cinzel-Regular.ttf')
#font-face
font-family: 'Oxygen'
src: font-url('Oxygen.otf')
html
position: relative
min-height: 100%
body
background-image: image-url("snowy_prairie_bg.jpg")
background-repeat: no-repeat
background-position: center top
font-family: 'Oxygen'
margin: 0 0 95px
The contents of my public directory (after precompilation)
application-6cca23f2f72df0ad7d26279535719396.css
application-6cca23f2f72df0ad7d26279535719396.css.gz
application-fddd9c84ba451526dbd2ef5bf46e494c.js
application-fddd9c84ba451526dbd2ef5bf46e494c.js.gz
bootstrap
capstone_icon-ed6ffe0ae4bbbb56a8b74a4d7ff230cf.png
capstone_icon.png
Cinzel-Regular-59dcda430d3afc3ace221f1835d7fb08.ttf
images
manifest-73d04c0fd1290b15fb280becfcf62b7b.json
Oxygen-1c736bd9242de63cf87c07f0a48c9b5c.otf
Oxygen-Bold-01bc72645c864aa090d57754565ef634.otf
Oxygen-BoldItalic-cfe32a5aedef7b25f8b1efdfcbdbd72a.otf
Oxygen-Italic-2a51c29c8f2bd242ac27e6fb7860f6a1.otf
snowy_prairie_bg-d246fbbe1178a09d38df31be96aee79a.jpg
snowy_prairie_bg.jpg
Am I referencing the image wrong in my css? Again, it renders great locally. Should I be using Passenger instead of Puma? This is not a very small app and I've got alot invested in the database, also hosted on Amazon. But like I said, I'm approaching 40 hours just trying to get this background rendered.
If you have any ideas, please help. I am willing to try anything!
Thank you
FYI - the above bootstraps, fonts, other images and sass styles render perfectly. It's just the background image. Thanks
EDIT: When I go to the page, capstonesavings.com, the following error is shown in the dev. console: Failed to load resource: the server responded with a status of 403 (Forbidden). Do I need to change permissions on something?
OK, SO I THINK I FIXED IT!
Most of the above code is correct, but I changed the following from the above application.css.sass..
Changed
background-image: image-url("snowy_prairie_bg.jpg")
To
background-image: asset-url("snowy_prairie_bg.jpg")
Then, I SSH'ed into the instance (eb ssh) and did the following:
cd /var/app/current
followed by
sudo chmod 755 public/assets/snowy_prairie_bg-d246fbbe1178a09d38df31be96aee79a.jpg
I had tried the above change to the SaSS before, but it didn't work without changing permissions. Thanks to Chrome developer tools, I noticed a (tiny) error flag when the page was rendered. I clicked it and it showed the 403 error that I added in the above edit. This is some stuff that Amazon uses to make things secure, since I guess you can route your log files, etc. to the associated S3 bucket. So that's why I explicitly targeted the image in question when changing the perms. This site isn't going to have a ton of images, but if it did I'd probably take the time to elaborate on the storage within the bucket and set broader perms accordingly.
This saved the day for me. Hope it helps someone else.
This is the follwing happened while running the application
I am also not able to install therubyracer gem to ruby
cannot load such file -- v8 (in C:/railsapps/myapp/app/assets/stylesheets/bootstrap_and_overrides.css.less)
Extracted source (around line #10):
8 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
9 <![endif]-->
10 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
11
12
13 <%= javascript_include_tag "application" %>
SASS
This issue will likely be caused by importing (requiring) that particular file in your CSS
If you use one of the SASS #import functions like this:
#app/assets/stylesheets/application.css.sass
#import "name"
The problem here is that, like in other programming interfaces, if you call a file which doesn't exist, it will throw an error. If this happens, you'll typically receive an error like the one you're seeing (I.E "could not find" etc etc)
--
Fix
Without seeing your application.css.less, I can only speculate on what the answer might be. I would recommend:
Make sure you have the following file present (even if empty): app/assets/stylehsheets/bootstrap_and_override.css.less
With the file present, you should then be able to load it. If not, you need to find the reference to #import in your
application.css.less file
I'm trying to use the gem 'gem 'rails_admin_nestable' to sort an ancestry enabled table. It works fine in development, but I get the following error in production:
ActionView::Template::Error (rails_admin/rails_admin_nestable.css isn't precompiled):
5: = nested_tree_nodes #tree_nodes
6:
7:
8: = stylesheet_link_tag 'rails_admin/rails_admin_nestable'
9: = javascript_include_tag 'rails_admin/jquery.nestable'
10: = javascript_include_tag 'rails_admin/rails_admin_nestable'
I have this line in my application.css
*= require rails_admin/rails_admin_nestable
Here is a pic:
I didn't think that I needed to copy the stylesheet into app/assets/stylesheets because I assumed the gem would load it.
But, I went ahead and put it there and I still get the same error.
Thanks !!
PS - I'm using RubyMine to edit my app. At the bottom of the directory list, it has "External Libraries". I thought I'd see the above stylesheet somewhere in this list - but, I don't see it.
im getting a problem with my deploy at heroku!
I just created an app Test with cedar stack, push my app and I have this problem (log)
←[32m2012-03-24T15:10:56+00:00 app[web.1]:←[0m ActionView::Template::Error (Unexpected token: operator (<)
←[32m2012-03-24T15:10:56+00:00 app[web.1]:←[0m (in /app/app/assets/javascripts/application.js)):
←[32m2012-03-24T15:10:56+00:00 app[web.1]:←[0m 3: <head>
←[32m2012-03-24T15:10:56+00:00 app[web.1]:←[0m 4: <title>Test</title>
←[32m2012-03-24T15:10:56+00:00 app[web.1]:←[0m 5: <%= stylesheet_link_tag "application" %>
←[32m2012-03-24T15:10:56+00:00 app[web.1]:←[0m 6: <%= javascript_include_tag "application" %>
←[32m2012-03-24T15:10:56+00:00 app[web.1]:←[0m 7: <%= csrf_meta_tags %>
←[32m2012-03-24T15:10:56+00:00 app[web.1]:←[0m 8: </head>
←[32m2012-03-24T15:10:56+00:00 app[web.1]:←[0m 9: <body>
Any Idea??
Update:
My application.js file
// This is a manifest file that'll be compiled into including all the files listed below.
// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
// be included in the compiled file accessible from http://example.com/assets/application.js
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require_tree .
I ran into this error and it took a while to figure out which file referenced in the manifest was the culprit. Once I figured out which file was causing the error, searching for '>' pulled up several lines but I got lucky and quickly zeroed in a map function which used the => operator:
.map(x => x.id);
Once I changed that to an anonymous function:
.map(function(x) { return x.id; });
the error went away.
I've just run into this problem, and the trick was that there was a remaining line of a conflict between the server and my localhost. In my localhost everything seamed fine, but i think that's because of some cache, or something. Anyway, i opened the application.js and remove the lines with the << HEAD...
I let it here for register of the problem and a possible solution
NOTE: it's been almost 7 years since the OP asked this question. The issue I experienced is likely a newer problem (with the same error log output as OP). The below answer likely doesn't apply to the issue the OP experienced, but could be helpful to new visitors looking for a solution.
My Rails version: 5.1.2
Found the problem
It was an issue with how Production handles my assets.precompile (in config/initializers/assets.rb)
After trial-and-error to find the culprit (a new JS file I created a week ago), I noticed the error vanished after commenting out the line that includes the file in config/initializers/assets.rb.
# Commented out until precompile fix found
# Rails.application.config.assets.precompile += %w( break_the_project.js )
THE FIX
Since this only happened in Production for me, I updated config/environments/production.rb, replacing the line:
config.assets.js_compressor = :uglifier
to:
config.assets.js_compressor = Uglifier.new(harmony: true)
After restarting the Rails server, my World was peaceful once again.
Source