I'm trying to get rid of the asset pipeline altogether.
As part of this move I need to get rid of the application.js file under app/assets/javascripts/application.js
I have erb files that I want to specifically require my vendor files there, for example:
Instead of this line in application.js:
// = require jquery-2.2.3.js
I want to add something like this to application.html.erb:
<script src="vendor/assets/javascripts/jquery-2.2.3.js" type="text/javascript"></script>
This produces a 404 Error. How can I still do that?
If that matters, I have config.serve_static_assets = true in my config/application.rb
Related
I'm currently trying Rails 6.0.0.rc1 which seems to have moved the default javascript folder from app/assets/javascript to app/javascript. The application.js file is now located in app/javascript/packs. Now, I want to add a couple of js files, but for some reason they don't get imported and I can't find any documentation on how this can be done in Rails 6. I tried a couple of things:
Create a new folder custom_js under app/javascript/packs, putting all my js files there and then add a require "custom_js" to application.js.
Copy all my js files under app/javascript/channels (which should be included by default, since application.js has require("channels")).
Adding require_tree . to application.js, which was the previous approach.
How can I load my own js files inside a Rails 6 application?
Get better-organized code and avoid multiple javascript_pack_tags in your application.html.erb file with this approach:
Add your custom example.js javascript file to app/javascript/packs.
Add require("packs/example") to your application.js file.
I would have liked to add a comment to Asim Hashmi's correct answer. But I don't have enough reputation, so I'll add my suggestion as an answer instead.
It isn't necessary to include the ".js" extension inside of the require.
You need to do the following steps to add custom javascript file to rails 6 (webpacker)
1.Create your custom file named custom.js in app/javascript/packs directory.
For testing purpose, write any console.log in it.
// app/javascript/packs/custom.js
console.log("custom js file loaded")
2. Go to your application.html.erb and add the following line at the end of your <head></head>
<%= javascript_pack_tag 'custom', 'data-turbolinks-track': 'reload' %>
3. Now execute rake assets:precompile
This will pack your javascript code (including our custom file we just added)
Now reload your page and you should see the message
custom js file loaded
In your browser console.
My custom js has functions which will be called by embedded javascript of serveral html pages. Following snippet works in Rails6, compiled by webpacker:
put custom js file in folder app/javascript/packs e.g. app/javascript/packs/my_functions.js
say_hello = function(a_text){
console.log("HELLO "+ a_text);
}
add javascript_pack_tag in html file, e.g. index.html.erb .
<%= javascript_pack_tag 'my_functions' %>
<!-- html here -->
<script>
$(document).ready(function(){
say_hello('ABer')
});
</script>
Note : This line is inside html body, not in head
<script src="/packs/js/my_functions-1db66368ebbd2fe31abd.js"></script>
I would like to serve a specific js file in production (heroku) without timestamp.
I am able to serve the file separately, but it is served with timestamp which I don't want. The reason is I want this file get accessed by other sites.
Here are the codes:
application.html.erb
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'ca4me', 'data-turbolinks-track' => true, :cache => false %>
application.js
// 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
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-slider
//= require bootstrap.min
application.rb
config.assets.precompile += %w( ca4me.js )
HTML source in production environment:
<script data-turbolinks-track="true" src="/assets/application-b83af88604eb0fb1867384db77b826ae.js"></script>
<script cache="false" data-turbolinks-track="true" src="/assets/ca4me-fcff49d8b1799052a3f84c913160f6b2.js"></script>
So is there away I can serve ca4me.js without the timestamp?
File
The reason is I want this file get accessed by other sites.
We did this:
/public/your_js_file.js
This is a pain to keep updated, but means your app will always have the file available at /____.js. Indeed, when you use asset precompilation, the assets are deployed to folders in the public directory like this:
- public
|-stylesheets
|-javascripts
|-images
If you're looking to keep a file available for other sites (like a widget or something), I would personally keep the code base separate from your Rails app, using Grunt or similar (saving the file to rails_app/public directly.
Digest
I wanted to learn about this, and I found this:
config.assets.digest_exclusions << /fontawesome/
The only problem is this is for the digestion gem - meaning it won't be available in Rails 4. I am still trying to find information regarding how to accomplish this in Rails 4, and I would recommend looking at my solution above for now
--
Personally, I would rely on the asset pipeline for my assets, and keep a file in public if I wanted a static location for people to access. The likelihood is that file (library?) will be updated in conjunction, albeit exclusively, with the Rails app; meaning you may wish to keep the code bases separate
I have multiple files in my app/assets/javscripts folder, application.js.erb, page.js.erb, sections.js.erb & scraped.js.erb.
Rails loads them all in my layout with <%= javascript_include_tag "application" %> in application.html.erb layout. Which is called from the PagesController.
I do not want scraped.js.erb to be loaded at all & sections.js.erb I would like to only be loaded from the SectionsController.
From my understanding (after reading http://guides.rubyonrails.org/asset_pipeline.html) that's how the asset pipeline worked. That if called from the PagesController it would load application.js.erb & page.js.erb but obviously that's not the case.
Am I doing something wrong? Could someone explain to me how the asset pipeline works? And how I can only use select assets rather than all of them?
Check your manifest file, in assets/javascript you got the file application.js, it contains
//= require_tree . which include during compilation all files of the directory tree.
If you want to exclude some files you can either require your files one by one: // require my_file, either create sub directories in your javascript directory and use
//= require_directory my_directory
Read more http://guides.rubyonrails.org/asset_pipeline.html
I'm trying to make this work but it's driving me mad. I already set this in
application.rb
config.assets.paths << Rails.root.join("vendor", "assets", "javascripts").to_s
(.to_s because it returns an object while I want a string in here).
I cant find the solution and is driving me mad, because stylesheets directory in vendor works, but javascripts is not.
How can i do this?
Error returned:
<h1>Routing Error</h1>
<p><pre>No route matches [GET] "/assets/ext-all-debug.js"</pre></p>
I believe vendor is already included in your assets path, check using the rails console
rails console
Rails.application.config.assets.paths.each do |path|; puts path; end
However the easiest thing might be this
put ext at app/assets/javascripts/lib
require_tree will load it already or be explicit
application.js
//= require ./lib/ext-all-debug.js
If you really want it in vendor
create dir vendor/assets/javascripts/ext
create manifest file vendor/assets/javascripts/ext/index.js
put ext-all-debug.js into vendor/assets/javascripts/ext/
code for index.js
//= require ./ext-all-debug.js
code for application.js
//= require ext
that is the name of the dir that the index manifest file is located
Restart your rails server
if you don't want to load extjs via application.js, i.e. you want to include the extjs lib only on specific pages
<%= javascript_include_tag "ext" %>
You can add:
//= require_tree ../../../vendor/assets/javascripts
to your application.js file.
READ THE UPDATE
It looks like the problem is connected to the fact that EXT has it's own structure path build with relative paths.
I solved the problem by preserving the whole ext directory structure as is (without splitting images anywhere) and I added it to a vendor/externals directory (created by me). I then added the path with:
config.assets.paths << Rails.root.join("vendor", "assets", "externals").to_s
And now everything it's working fine by referencing it with //= require ext-all-debug.js
Update 23/12/2013:
As of Rails 3, notice that this directory has been added by default.
It's not easy to see the problem from the information you've provided as I think that the problem is elsewhere.
The purporse of asset pipeline is to to put all javascripts into one file. And that file is included to the HTML document. So the key is that one big JS file. Well, it can be more complicated but I think that's not necessarily your case.
So for example in your layout ERB (typically app/views/layout/application.erb):
<head>
...
<%= javascript_include_tag "application" %>
</head>
and in app/assets/javascripts/application.js:
//= require ext_all_debug
//= ...
When HTML page is requested, it asks for "application.js" and it is generated in a way that your vendor JS code is embedded into this file (notice that there is no path in that require).
And one last thing - it's quite important to test the behaviour in production environment because typically those generated JS files will be served by nginx/apache. rake assets:precompile is a good start.
I'm a bit confused as to where to put a jQuery framework like Galleria in Rails 3.1's new Asset Pipeline?
I know it, technically, should go into /vendors/assets/javascripts but, it is my understanding that, the Galleria folder with the jQuery & themes wants to be in root (/galleria) of the live site in order to work correctly.
Also, while we're at it, where to put the following script so it will appear only on the page(s) with a gallery?
<script>
$('#gallery').galleria({
width:500,
height:500
});
</script>
Edit: Surprised there's no response!?! Maybe Galleria isn't that popular? These are the files I'm trying to load. They are bundled like this though I could easily move them:
vendor/
assets/
javascripts/
galleria-1.2.5.js
galleria-1.2.5.min.js
galleria/
themes/
classic/
classic-loader.gif
classic-map.png
galleria.classic.css
galleria.classic.js
galleria.classic.min.js
i thought Sprockets require_tree . would load everything in app/assets, lib/assets and vendor/assets?!?
I had the same problem, and it took a while to get working. Initially, it would work fine on development, but when we moved to production, Galleria silently failed, due to the asset filenames now having "fingerprints". This also seems to be an issue with jQuery UI themes, and many other such scripts.
Of course, you could just go back to the old way of doing things and throw everything in "public", but we would like the advantage of automatically merging all css/js files, and doing things the rails way.
This is how I got it working:
vendor/
assets/
images/
classic-loader.gif
classic-map.gif
javascripts/
galleria-1.2.5.js
galleria.classic.js
stylesheets
galleria.classic.css.scss
Rename your galleria.classic.css file to galleria.classic.css.scss. Then replace the image references, like so (I had two):
url("classic-loader.gif") becomes image-url("classic-loader.gif")
UPDATE: It looks like you don't need to do this in Rails 3.1.1. Just rename the file to .css.scss and rails will automatically preprocess the url() calls for you.
In your app/assets/javascripts/application.js file, make sure you have the lines
//= require galleria-1.2.5
//= require galleria.classic
//= require_tree .
In you app/assets/stylesheets/application.css file, make sure you have the lines
*= require galleria.classic
*= require_tree .
Finally, Galleria seems to have some fancy non-standard css loading built in. This is what was preventing Galleria from loading on our production website. Since we have already included the stylesheet, we want to disable this behavior. Simply open up galleria.classic.js (or your Galleria theme javascript file), and replace the line:
css: 'galleria.classic.css',
with:
css: false,
This will tell Galleria not to try loading the stylesheet.
One more thing - when trying to compile these assets, I ran into what is apparently a bug in Rails 3.1.0. When I ran rake assets:precompile, I got errors like:
$ bundle exec rake assets:precompile
rake aborted!
classic-loader.gif isn't precompiled
(in /vendor/assets/stylesheets/galleria.classic.css.scss)
Long story short, you need to set this line in config/environments/production.rb:
config.assets.compile = true
This shouldn't be necessary once 3.1.1 is released.
I like Arjen's suggestion, though I think vendor/assets/libs is more appropriate. Here's my setup:
In config/application.rb
config.assets.enabled = true
config.assets.paths << "#{Rails.root}/vendor/assets/libs"
In app/assets/javascripts/application.js
//= require galleria/galleria-1.2.6.min.js
To initialize:
Galleria.loadTheme('assets/galleria/themes/classic/galleria.classic.min.js');
$('#gallery').galleria();
Notice how the path passed to loadTheme() begins with 'assets'.
I like this setup because it keeps the galleria folder intact. Also, it concatenates galleria-1.2.6.min.js onto my main js file (one less http request).
I've also stumbled upon this problem. Dividing up an existing library so it fits into the current javascripts/stylesheets structure is a bit of a hassle. Therefor you can add an extra path to your application.rb file to load assets from, like this:
# Enable the asset pipeline
config.assets.enabled = true
config.assets.paths << "#{Rails.root}/app/assets/libs"
Create a 'libs' folder under app/assets, copy the galleria library to this folder and add this to your application layout file:
<%= javascript_include_tag 'galleria/galleria-1.2.4.min.js' %>
<%= javascript_include_tag 'galleria/themes/classic/galleria.classic.min.js' %>
You could also bundle up the galleria code by requiring the js files, but that's up to you.