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
Related
I've just upgraded my Rails 6 app to Rails 7, and now my Javascript and ActionCable aren't working.
After a bit of googling, I now know that this is because my app is set up to use sprockets with the asset pipeline, not webpacker or import maps.
How can I upgrade my app to work with Rails 7? Is it possible to continue using sprockets and jquery-ujs? I couldn't find much online to help me with this so I'm hoping someone on here knows what to do.
app/assets/javascripts/application.js:
//= require jquery
//= require jquery_ujs
//= require activestorage
//= require cloudinary/jquery.cloudinary
//= require_tree .
//= require cable
//= require local-time
//= require serviceworker-companion
//= require cookies_eu
//= require gmaps/google
import "stylesheets/application";
//javascript functions below here
This is the directory layout:
below are steps that I did to upgrade rails 6 to 7 apps.
I'm using sprocket and combined with new rails 7 Hotwire
1. install importmap and hotwire
as noted from DHH, rails 7 replacing Webpacker, Turbolinks, UJS with import maps plus Turbo and Stimulus from Hotwire as the defaults.
you can learn from https://hotwired.dev/ to get more information.
since my application using Sprockets, here is the steps that I use
2. install importmap
since importmap and hotwire-rails gem already installed from previous step, I just need to install it
run rails importmap:install
3. install hotwire
run rails hotwire:install
4. Change turbolinks to turbo
since hotwire turbo replacing turbolinks below are steps that I did
open file app/assets/javascripts/application.js (since I use sprocket)
delete line //= require turbolinks
5. Using your text editor search inside app/views/
find turbolinks:load replace with turbo:load
save and close all
6. using your text editor search inside app/assets/javascripts/
find div data-turbolinks replace with div data-turbo
save and close all
7. Merge Sprocket with importmap
Change file name app/assets/javascripts/application.js to any name that fit with you, for me I change to application_pipeline.js
Reason to change: since new javascript folder also using application.js inside app/javascript/application.js
Create one manifest file app/assets/config/manifest.js
(if folder config not exist you can create manually)
below are the content for my settings
//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_tree ../../javascript .js
//= link_tree ../../../vendor/javascript .js
//= link_tree ../javascripts .js
../images to call folder inside app/assets/images
../stylesheets .css to call .css file inside app/assets/stylesheets
../javascript .js to call .js file inside app/assets/javascript
../../javascript .js to call js files within app/javascript to this new folder created when we - install importmap-rails
../../../vendor/javascript to call js files within rails root/vendor folder
8. Setting for application.html.erb
open file app/views/layouts/application.html.erb and change
<head>
...
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_include_tag "turbo", type: "module-shim" %>
<%= javascript_include_tag "application_pipeline", "data-turbo-track" => true %>
<%= javascript_importmap_tags %>
</head>
9. Add precompiled list in production
open file file config/initializers/assets.rb
change and increase version number if you want to total precompile
Rails.application.config.assets.version = “3.3”
Here is the sample, you can increase to any number for example 3.4 or 4.0
# Be sure to restart your server when you modify this file.
Rails.application.config.assets.version = "3.3"
Rails.application.config.assets.precompile += %w( application_pipeline.js )
Rails.application.config.assets.precompile += %w( controllers/hello_controller.js )
Rails.application.config.assets.precompile += %w( controllers/index.js )
as you can see second line above I included application_pipeline.js inside this asset list
do precompile by running rails assets:precompile
I wrote complete article, based from my own experience upgrading rails 6 to 7 my applications and here is the link
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.
Attempting to download a bootstrap template from here (http://startbootstrap.com/) and put it in a Ruby on rails project locally and begin to edit from there?
With your downloaded bootstrap.
Copy:
bootstrap/dist/css/bootstrap.css and bootstrap/dist/css/bootstrap.min.css
To: vendor/assets/stylesheets
Copy:
bootstrap/dist/js/bootstrap.js and bootstrap/dist/js/bootstrap.min.js
To: vendor/assets/javascripts
Update: app/assets/stylesheets/application.css by adding:
*= require bootstrap.min
Update: app/assets/javascripts/application.jsby adding:
//= require bootstrap.min
You can simply use Bootstarp gem for this. And require the bootstrap css and js files in you application.css and application.js.
I'm using a WYSIWYG called Bootsy. docs here: http://volmer.github.io/bootsy/
I did this command and got:
$ rails generate bootsy:install
route mount Bootsy::Engine => '/bootsy', as: 'bootsy'
create config/locales/bootsy.en.yml
insert app/assets/javascripts/application.js
not found app/assets/stylesheets/application.css not found. You must manually require Bootsy in your assets pipeline.
create config/initializers/bootsy.rb
In my Rails app I do have a file called application.css.scss so the only reason the install couldn't find the file was because of the .scss I'm wondering how to best address this issue.
My first guess was to do this inside my application.css.scss file:
require 'bootsy'
but I'm not sure if I'm supposed to do
*= require_bootsy
or
*= require 'bootsy'
or if I should just add an application.css file inside the pipeline that way it doesn't give me problems. Would that be bad to have an application.css AND an application.css.scss file inside my stylesheets folder?
According to the gem source you should use *= require bootsy
Here's the relevant code from https://github.com/volmer/bootsy/blob/master/lib/generators/bootsy/install_generator.rb
{
original: 'app/assets/stylesheets/application.css',
skip_if: 'require bootsy',
content: "\n *= require bootsy",
position: {
after: '*= require_self'
}
}
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.