rails newbie here. Can't get development machine to process *= require ... in application.css manifest file. In development.rb I have
config.assets.compress = false
config.assets.compile = true
config.assets.debug = true
In app/assets/stylesheets there is application.css with
*= require_self
*= require_tree .
and the app.css.scss
If I request http://localhost:3000/assets/app.css The .scss is processed fine,
But the output application.css to the browser still has
*= require_self
*= require_tree .
in it, instead of the .scss file that is in the same directory. What do I need to enable the asset pipeline to process the require directives? bundle install is working fine. I have also tried with the precompile rake task with same results. It seems the directives are being ignored.
My include tag is <%= stylesheet_link_tag "application" %>
This is a Refinery site that I am trying to setup a development environment for.
Thanks in advance
Finally found out what was up. Had the wrong version of Ruby installed. Since this was an existing Rails application, the Gemfile specified gem versions which were I guess incompatible with ruby 2.0.0, which was what installed by default on my Ubuntu machine.
Fix:
rvm install 1.9.3
rvm use 1.9.3 --default
Related
I'm using
apache 2.2.15
passenger 5.1.2
rails 4.2.6
ruby 2.3.3
In the rails log, I get
(No route matches [GET] application-xxxxx.js
as well as
(No route matches [GET] application-xxxxx.css
I can find the assets in the public/assets directory.
My manifests:
app/assets/stylesheets/application.css.less:
/*
*= require jquery-ui
*= require font-awesome
*= require bootstrap_and_overrides
*= require awesome-bootstrap-checkbox
*= require lists
*= require mailgroups
*= require general
*= require colors
*= require print
*= require loader
*= require tooltips
*= require_self
*= require_tree .
*/
app/assets/javascripts/application.js
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery-ui
//= require twitter/bootstrap
//= require bootstrap
//= require turbolinks
//= require twitter/bootstrap/rails/confirm
//= require_self
//= require_tree .
and I set (following other answers here on SO) in config/production.rb
config.serve_static_files = true
in app/views/layouts/application.html.erb
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => "reload" %>
<%= javascript_include_tag "application", "data-turbolinks-track" => "reload" %>
I'm lost, thanks for your help.
UPDATE: I don't use Capistrano, just deploying manually.
When running Rails.application.config.assets.paths in the rails console, I get the following:
=> ["/var/www/myappname/app/assets/fonts",
"/var/www/myappname/app/assets/images",
"/var/www/myappname/app/assets/javascripts",
"/var/www/myappname/app/assets/stylesheets",
"/var/www/myappname/vendor/assets/fonts",
"/var/www/myappname/vendor/assets/images",
"/var/www/myappname/vendor/assets/javascripts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/twitter-bootstrap-rails-confirm-1.0.6/vendor/assets/javascripts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/local_time-1.0.3/app/assets/javascripts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/font-awesome-rails-4.7.0.1/app/assets/fonts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/font-awesome-rails-4.7.0.1/app/assets/stylesheets",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/less-rails-fontawesome-0.5.1/vendor/assets/fonts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/less-rails-fontawesome-0.5.1/vendor/assets/stylesheets",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/less-rails-bootstrap-3.3.5.0/app/assets/fonts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/less-rails-bootstrap-3.3.5.0/app/assets/javascripts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/less-rails-bootstrap-3.3.5.0/app/assets/stylesheets",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/twitter-bootstrap-rails-3.2.0/app/assets/fonts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/twitter-bootstrap-rails-3.2.0/app/assets/images",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/twitter-bootstrap-rails-3.2.0/app/assets/javascripts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/twitter-bootstrap-rails-3.2.0/app/assets/stylesheets",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/twitter-bootstrap-rails-3.2.0/vendor/assets/stylesheets",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/jquery-turbolinks-2.1.0/vendor/assets/javascripts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/jquery-ui-rails-6.0.1/app/assets/images",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/jquery-ui-rails-6.0.1/app/assets/javascripts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/jquery-ui-rails-6.0.1/app/assets/stylesheets",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/jquery-rails-4.2.2/vendor/assets/javascripts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/coffee-rails-4.0.1/lib/assets/javascripts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/turbolinks-source-5.0.0/lib/assets/javascripts",
#<Pathname:/var/www/myappname/app/assets/fonts>,
#<Pathname:/var/www/myappname/app/views>,
#<Pathname:/var/www/myappname/app/assets/stylesheets>,
#<Pathname:/var/www/myappname/app/assets/javascripts>]
my config/initializers/assets.rb already contains this:
Rails.application.config.assets.precompile += ['.svg', '*.eot', '*.woff', '*.woff2', '*.ttf', '*.otf', '*.js', '*.css']
this is my advise.
I add the following resources that may help in finding a solution.
https://launchschool.com/blog/rails-asset-pipeline-best-practices
https://railsapps.github.io/rails-javascript-include-external.html
https://reinteractive.com/posts/116-12-tips-for-the-rails-asset-pipeline
I read all the guides that can be found by searching rails asset pipeline, but I will not link them all
My advice is to check the fingerprint of the application.css and application.js both with the Chrome Developer Tools (by going in any screen element, opening the developer toolbox with f12 and checking any style of any div or any js file). You will need to check which fingerprint version of the file is used, then open that version with the text editor and check what is loaded in the fingerprint version of the file.
If your file (for ex. user.js) is loaded at the bottom of the manifest, you should easily find it at the bottom of your fingerprinted application.js.
If you want to update this file you can run
rake assets:precompile
This will precompile assets only in development, for production you need to specify the environment. It will change that fingerprinted file application.css and application.js with the editing you have done.
RAILS_ENV=production bundle exec rake assets:precompile
You can also check the file at the following address localhost:3000/assets/yourjsfile.js or check the fingerprint version by following localhost:3000/assets/application-yourfingerprint.js
As you can see, many files are included in that public/assets folder, you can delete them with rake assets:clean or -rf public/assets and then run rake assets:precompile, it will precompile again assets.
If nothing is included, then your application.js is not being loaded. You may try the following as I read on different posts:
Include the file in the config/initializers/assets.rb with the following line of code:
Rails.application.config.assets.precompile += %w( user.js )
Start the rails c and run Rails.application.config.assets.paths
This command will show in red the paths that are automatically included, for example those inside App, Lib and Vendor, in green those that you included by adding inside config/application.rb the follwing code to add new path
config.assets.paths << Rails.root.join("vendor","assets", "fonts")
Another error i made in the past was not using the correct sprockets syntax, you can check it at the following link ( i was using require_user instead of require user):
https://github.com/rails/sprockets#sprockets-directives
Another problem was that I had under App/assets/javascript two files named user (user.coffee and user.js). The first to be loaded was user.coffee which was empty.
I have built a Rails 4 and I am now trying to deploy to Heroku.
When I run the git push heroku master command, the process shuts down when Heroku runs rake assests:precompile. I get the following error message:
Sass::SyntaxError: Invalid CSS after "... "bootstrap" */": expected "{", was ""
I am at a loss of where to find this error in my code. I have included the bootstrap-sass gem in my gem file, but I have also included the entire css folder from the download provided by Bootstrap in my assets/stylesheets folder.
Below is what I have required in my application.css.sass file:
*= require font-awesome
*= require_tree .
*= require_self
*/
#import "bootstrap-sprockets";
#import "bootstrap";
As a final note, I have also precompiled locally using the rake assets:precompile command. In addition, I have set config.assets.compile equal to true in my application.rb file, as well as uncommenting config.assets.css_compressor = :sass.
Any guidance would be greatly appreciated.
Remove the */ from your code (right below *= require_self). That is what the error is referring to (though it isn't very clear).
When i try to include
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "application" %>
The content of the files of the application.css is:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
*= require social_stream
*= require_tree .
*/
And the content of application.js file is
// 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_ujs
//= require social_stream-base
//= require social_stream-documents
//= require social_stream-events
//= require social_stream-linkser
//= require social_stream-presence
//= require social_stream-oauth2_server
//= require_tree .
my rails app is not including the css and js files those are required in the above snippet.
but when i update the include tags to the specific file those are included fine.
i.e.
<%= stylesheet_link_tag "social_stream" %>
<%= javascript_include_tag "jquery" %>
What i think there is issue of sprockets its not working as expected please advice.
I will be really thankful to you.
It should be ruby version issue. You would be using ruby 2.0.0, try to downgrade to 1.9.2 or 1.9.3. Hope it will work.
Nazar Hussain's answer helped me. It depends on ruby version too. If you are using v.2 then try to downgrade to v.1.9. It is very easy if you are using rvm:
To install v.1.9.3 use:
$ rvm install 1.9.3
To use v.1.9.3 as default:
$ rvm --default use 1.9.3
Then
restart your terminal
install bundler gem
run bundle install
run rake assets:clean RAILS_ENV=development
start your server rails s
That's all.
I was also having this issue but with newer versions of Rails and Ruby.
Examining the log, I was being served javascript.js from Rails cache as the server didn't see a change in the file. I went and moved the require lines around (just one) to tell Rails that there's a change in the file and re-compile/use. Wellm that did it for me!
Hope it helps somebody.
Another important finding is to upgrade your sprockets gem in your Gemfile.
I had version 2.2.1 and had issues, after upgrading to 2.2.2, it worked
gem 'sprockets', '2.2.2'
Are you using sass or less or something similar?
I just had this problem and I found it was because the application.css file contained scss code, which it cannot handle by default.
Simply renaming the file to application.css.scss resolved this issue under Rails 4.2.1.
For some reason, the js files under app/asset/javascripts folder are no longer being requested by the rails application.
I have enabled assets in application.rb
I have these lines in application.js:
//= require_self
//= require_tree .
with proper use of the blank lines.
And I have included this line in my application.html.erb file:
<%= javascript_include_tag "application" %>
<%= csrf_meta_tag %>
I have application.js, jquery.js, jquery-ui.js, prototype.js and some other js files in the javascripts folder.
But when I access those js files in Firefox firebug, the content are different from that in the folder. I keep getting the message: Served asset /xxx.js - 304 Not Modified (0ms).
It is so frustrating and I really need some help.
Thank you in advance!
I am using
Rails version: 3.2.7
Ruby version: ruby 1.9.3p194
gem version: 1.8.24
Thin server
UPDATE:
I have used rake assets:clean and this never happened again!
Probably this is beacuse to you have this precompiled files in public dir
try adding this to development.rb
config.serve_static_assets = false
This was asked in another question, but none of the solutions appear to work for me in 3.1rc1.
I'm trying to use the new assets stuff in rails 3.1 - I have the files:
./vendor/assets/stylesheets/jquery-ui-1.8.13.custom.css
./vendor/assets/javascripts/jquery-ui-1.8.13.custom.min.js
I then added:
//= require jquery-ui to app/assets/javascripts/application.js
*= require jquery-ui to app/assets/stylesheets/application.css
The jquery-ui javascript file loads just fine, but the css file says:
Sprockets::FileNotFound (couldn't find file 'jquery-ui'
(in /home/xanview2/xancar/app/assets/stylesheets/application.css):6):
Any ideas?
Example of a working setup:
$ cat app/assets/javascripts/application.js
//= require jquery
//= require jquery-ui
$ cat app/assets/stylesheets/application.css
/*
*= require vendor
*
*/
$ cat vendor/assets/stylesheets/vendor.css
/*
*= require_tree ./jquery_ui
*
*/
vendor/assets/ $ tree
stylesheets
vendor.css
jquery_ui
jquery-ui-1.8.13.custom.css
...
images
jquery_ui
ui-bg_flat_0_aaaaaa_40x100.png
...
Finally run this command:
vendor/assets/images $ ln -s jquery_ui/ images
Enjoy your jQuery UI
This is a great article to read about Rails 3.1's asset pipeline and jQuery UI: JQuery-UI css and images, and Rails Asset Pipeline
You might have more luck with the jquery-ui-rails gem (see announcement), which packages the jQuery UI JavaScripts, stylesheets and images as assets for you.
This topic comes up a lot, and now that a significant amount of time has passed, things may be different.
In Rails 3.1.2, I found something that works without symbolic links.
Follow the steps above, but put the images for the theme right next to the jquery-ui-xxx.css file in an images/ folder. This saved me quite a few headaches.
Yes, this would mean the images would reside in a stylesheets/ folder in vendor/assets, but it works and it is quick to do.
Have you tried using the rails-asset-jqueryui gem? It vendors jquery-ui and the standard themes (currently v1.8.16) and makes them available via the asset pipeline. The following example calls for the Smoothness theme.
Gemfile:
....
gem 'rails-asset-jqueryui'
...
app/assets/javascripts/application.js:
...
//= require jqueryui
...
app/assets/stylesheets/application.css:
...
= require smoothness
...
If you're using the jquery-ui-rails gem:
application.css
/*
*= require jquery.ui.all
*/
application.js
//= require jquery.ui.all
It seems to me that a lot of confusion can be avoided by keeping these library assets out of assets/javascripts and assets/stylesheets dirs, where sprockets et al have some opinions about what should happen.
Say you've downloaded a customized jquery-ui zipfile from the themeroller. Try this:
unpack the zip file into an subdir of an assets dir, something like
vendor/assets/jquery-ui-1.8.23.custom
in application.rb add:
config.assets.paths << Rails.root.join('vendor', 'assets', 'jquery-ui-1.8.23.custom').to_s
add manifest files in the usual places:
vendor/assets/javascripts/jquery-ui.js:
//= require_tree ../jquery-ui-1.8.23.custom
vendor/assets/stylesheets/jquery-ui.css:
*= require_tree ../jquery-ui.1.8.23.custom
in config/environments/production.rb, add (referring to manifest filenames):
config.assets.precompile += %w(jquery-ui.js jquery-ui.css)
in views:
<%= stylesheet_link_tag 'jquery-ui' %>
<%= javascript_include_tag 'jquery-ui' %>
if you use this:
https://github.com/carlhoerberg/sprockets-urlrewriter
i believe you can just dump the whole shebang in a directory and require the css file... it will smoothly rewrite the relative urls.
you just have to install the gem and add a config line to application.rb