so here is my problem
sprocket defines these directives
include
require_directory
require_tree
require_self
depend_on
stub
so what I miss is an include_tree directive to include all javascript sources (placed in another directory) in one file!
what is the best way to do that?
Let's say your js files are in the directory lib/assets/your_library/yourfiles.js (notice , that it should be an assets directory). You just have to create an index file , named index.js ( it is a manifest file too) and insert a directive like this :
//= require_tree .
(or files you wish to be included)
After that , in your application.js insert :
//= require your_library
More about using index files in asset-pipeline can be found in this Rails guide.
Related
I pushed some code to heroku and my app broke.
I got this errors in browser console:
https://agile-mesa-47878.herokuapp.com/javascripts/application.js Failed to load resource: the server responded with a status of 404
(Not Found) 2
https://agile-mesa-47878.herokuapp.com/stylesheets/application.css
Failed to load resource: the server responded with a status of 404
(Not Found)
This happened second time today. After first I just pushed new code to server and it started working. But now I am starting worrying if something is wrong.
Locally it works fine
My application.js file
// 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 any plugin's vendor/assets/javascripts directory 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/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap
//= require_tree .
//= require turbolinks
My application.css file
/*
* 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 any plugin's vendor/assets/stylesheets directory 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 bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require bootstrap
*= require_tree .
*= require_self
*= require_custom
*/
change config.assets.compile = true
in config/environments/production.rb
Make sure you use rails helpers to get your assets paths: Never hard code '/assets/name.extension' paths in your code, Heroku will compile the assets for you and their final paths will look more like: /assets/application-6aae32862efc758cf08c7b7fc0e85e15.js
Simply using <%= javascript_include_tag 'application' %> and <%= stylesheet_link_tag 'application' %> helper methods should work for you.
If you are still having troubles, how about you follow the debugging section of Heroku's help: https://devcenter.heroku.com/articles/rails-4-asset-pipeline#debugging
In particular:
$ heroku run rails console
> puts helper.asset_path("application.js")
/assets/application-6aae32862efc758cf08c7b7fc0e85e15.js
I tried to load i18n.js and translations.js in the application.js.erb
However the file i18n.js could be found, but the translations.js could not found.
it shows me this exception ActionView::Template::Error (couldn't find file 'translations.js')
How could I fix the problem? I've also tried to load ../../public/javascript/translations.js but it didn't work as well.
public/javascripts
-i18n.js
-translations.js
pplication.js.erb
//= require i18n
//= require i18n.js
//= require translations.js
The asset pipeline and public/ have nothing to do with each other.
If you want to include the files via the asset pipeline, they need to go under app/assets, lib/assets or vendor/assets.
Anything placed in public/ is not part of the asset pipeline and you'll need to include it via its own <script src="/i18n.js"> tag.
I just finished writing controller for a project, everything works fine on my local computer, but in production images from the view of my controller load from 'images/bg/*' instead of 'assets/bg', same goes for javascripts ('javascripts/games/' instead of 'assets/games/')
I think the reason behind this is because image_tag somehow generates wrong links, but what's with javascripts? I don't know what to do
The server computer runs nginx, if it matters
See for yourself - this is my controller http://gorodigr.com/ruletka , and this is another one http://gorodigr.com/poker_kosti as an example
application.js
//
//= require jquery
//= require jquery.turbolinks
//= require websocket_rails/main
//= //require jquery_ujs
//= //require bootstrap-alert
//= //require vallenato
//= //require websocket_rails/main
//= //require_tree .
//= require turbolinks
jQuery(document).ready(function($){
.
.
.
some javascript
application.css
/*
* 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 main
*/
Update
Now it behaves even more strangely, same image_tag path, different results
I doubt the assets are loading from the "wrong" place - they are likely subject to the workings of the asset pipeline, especially if you're seeing problems in production
--
Asset Pipeline
The main issue you have is likely to do with the asset pipeline. Let me explain
The asset pipeline is a feature of Rails, removed in Rails 4 actually (but the functionality still persists), whereby your "assets" (images, css and javascripts) will be kept in a set of folders detatched from your "views". You'll then be able to call these as you wish
The magic of the asset pipeline is that when you run your app in production, it will take your files, compile them, and pull them from a totally different location (public/assets), a path which will be called by your asset path helpers:
--
Structure
Bottom line is that if you have to concern yourself with the path of your assets, you're not doing it right.
As long as you keep your assets in the correct folders & use the helpers, your app should serve them correctly. In regards to your specific issue, let's look at what the problem might be:
Your assets should be stored as such:
-- app
-- | assets
-- | -- | javascripts
-- | -- | -- application.js
-- | -- | -- your.js
-- | -- | -- other.js
-- | -- | -- javascripts.js
This will give you the ability to call any of these files using the different asset path helpers you are provided with:
#app/views/layouts/index.html.erb
<%= javascript_include_tag "application", "your", "other", "javascripts" %>
In conjunction with this, you'll want to consider the role of manifest directives in your assets:
#app/assets/javascriots/application.js
// ...
//= require jquery
//= require jquery_ujs
//= require_tree .
This means that if you call the application.js file in your layout in development, it will just load the files you need. If you load its precompiled version in production, it will concatenate all the required files into the single application.js file
--
Fix
In light of your image & updated post, here's what I'd do:
Put all your javascripts into the correct folder (/assets/javascripts)
"Require" all the files you need in your application.js
If you want to include separate files, precompile it separately
Firstly, put all your files into the app/assets/javascripts folder
Secondly, fix the following problems in your application.js:
//= require jquery_ujs
//= require bootstrap-alert
//= require vallenato
//= require websocket_rails/main
//= require_tree .
Thirdly, if you want to include /games/ruletka.js, you'll be best doing this:
#config/environments/production.rb
config.assets.precompile += ['games/raletka.js']
#app/views/layouts/application.html.erb
<%= javascript_include_tag "games/raletka" %>
If you have different assets than application.js you have to include them in the config for precompile.
For example in your config/environments/production.rb uncomment the following line and adjust it to your assets.
# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
config.assets.precompile += %w( games/ruletka.js )
Images should be automatically precompiled, so they should work out of the box. But for CSS you have to use special helper to get correct url:
.class { background-image: url(<%= asset_path 'image.png' %>) }
For more details, reffer to http://guides.rubyonrails.org/asset_pipeline.html
Also, if you're deploying with capistrano, make sure to include 'capistrano-rails' gem, and enable it to allow precompilation of the assets after your deployment is finished.
Just a few questions to clarify some confusing factors for me.
About application.js:
require_tree . will recursively include all the js files within app/assets/javascripts. If I put a javascript file in app/assets/javascripts/subfolder, it will be included. If I just want to include a specific directory, I should use require_directory
lib/assets/javascripts and vendor/assets/javascripts can be referenced from the manifest, application.js. Their javascript files WILL NOT be precompiled unless they are stated in the manifest.
When I install a gem that requires a set of javascripts(e.g. bootstrap) I require the related javascripts files in the manifest too (e.g. //= require bootstrap). The javascript files live in the Gem path, and they can be referenced by relative paths too.
Are my statements all true?
For sure I can say that 1 & 3 are true, I use both of those statements in my code.
When it comes to numer 2, as Rails Asset Pipeline docs says:
For example, these files:
app/assets/javascripts/home.js
lib/assets/javascripts/moovinator.js
vendor/assets/javascripts/slider.js
would be referenced in a manifest like this:
//= require home
//= require moovinator
//= require slider
http://guides.rubyonrails.org/asset_pipeline.html#asset-organization
Is there a way you can include all files in a directory except one, or all directories except one? So something like:
require_tree . :except 'this_one'
Just wondering and can't figure out where the documentation is on the "require_tree" method in the manifest file.
Instead of
require_tree . :except 'this_one'
write
require_tree "."
stub "this_one"
Depending on the version of your environment the following may be possible:
//= require_tree "." exclude: "file1", "file2"
See this SO thread: Rails 3.1 Sprockets require directives - is there a way to exclude particular files?.
Never tried it myself, though.