I'm actually building a new app under Rails 4.
I used to put my javascript_includes_tag at the bottom of my layout. But for an unknown reason, it creates a bug when trying to use confirm: on delete link.
So I put back this line at the top :
!!!
%html{ :lang => 'en' }
%head
= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true
= javascript_include_tag "application", "data-turbolinks-track" => true
So far so good, the bug is now gone. Anyway, since my app is gonna use a lot of Javascript, I still need to load those third part library at the bottom. So, what I did is to only let the Rails library at the top :
// application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
Then I tried to create another js file named third-part and try to do the same as application but including my third part libraries. Unfortunately, it does not work.
// third-part.js
//= require bootstrap
//= require app
//= require app.plugin
How can I add another javascript_includes_tag at the bottom the same way I did for application? Here I mean that on production it will also compress those files.
Thanks a lot for your help
EDIT :
It's actually loading my files well on DEVELOPMENT, but not on my production.
On production I just got <script data-turbolinks-track="true" src="/javascripts/third-part.js"></script> and I can't access the file
I've tried :
config.assets.precompile += %w( third-part.js )
and
rake assets:precompile RAILS_ENV=production
but it still not working
EDIT 2 :
I made a test of precompliling on production mode from my local machine. It did work. It might be a problem with my server.
EDIT 3 :
Just earse my application from server and clone a new one from my Github but it's still not working. Don't know why :(
In your config/environments/production.rb add this line to precompile the external assets
config.assets.precompile += ["third-part.js"]
and don't forget to mention env=production while precompiling assets on production.
Related
I recently installed active_admin gem.
Everything is working fine on Rails4, but jquery in my bootstrap page is not working anymore.
All animations are broken now, its like static page.
Any way of fixing it?
Thanks,
Michael
Solved.
What i did was, moved file active_admin.js.coffee from app/assets/javascript/ to vendor/assets/javascript . Also moved file active_admin.css.scss from app/assets/stylesheet/ to vendor/assets/stylesheet/ .
In application.js from content nothing was added, and require_tree is needed for both of those 2 files (application.js. and application.css )(no need to delete require_tree).
Same goes for active_admin.rb, nothing was added there either.
Application is now working correctly, loading css and jquery (my 1.7 version, not AA one).
-Michael
The key is to open application.js and application.css and remove the require_tree .. This is a bad default on Rails part because the user should specify load order anyway
Also do not forget to ad these lines in config/initializers/active_admin.rb
# == Register Stylesheets & Javascripts
#
# We recommend using the built in Active Admin layout and loading
# up your own stylesheets / javascripts to customize the look
# and feel.
#
# To load a stylesheet:
# config.register_stylesheet 'my_stylesheet.css'
# You can provide an options hash for more control, which is passed along to stylesheet_link_tag():
# config.register_stylesheet 'my_print_stylesheet.css', :media => :print
#
# To load a javascript file:
config.clear_stylesheets!
config.register_stylesheet "application.css"
config.clear_javascripts!
config.register_javascript "application.js"
Then in you application.js
//= require jquery
//= require bootstrap
//= require bootstrap.switch
//= require bootstrap-tooltip
//= require active_admin/base
....
When I use the application layout, the .js files already get concatenated and compressed in production environment. How about if i have a new layout on a different controller, How can I concatenate the .js files like in application layout?
And also for the css can I also merge it it to 1 file?
Controller
class ThingsController < ...
View
Let's say in app/views/things/index.html.haml
= javascript_include_tag 'things'
Assets
In app/assets/javascripts/things.js
//= require file_1
//= require file_2
//= require file_3
This way file_1, file_2 and file_3 will be included in things.js
Configuration
In production
config.assets.precompile << 'things.js'
I'm using Rails 3.2.8. When the app is deployed access the view that is including a javascript:
<%= javascript_include_tag "epiceditor" %>
Heroku fails with this log:
ActionView::Template::Error (/app/app/assets/javascripts/epiceditor.js.erb has already been required
I've checked some possible solutions, like checking for any reference that may trigger a circular dependency, or simply removing it in case it is being included somewhere else, which isn't. So, if I include it, I get this "has already been included error", if I don't , then the file isn't included at all.
My config/application.rg has this
config.assets.initialize_on_precompile = false
And applications.js has this:
//= require jquery
//= require jquery_ujs
//= require tabs
It might be important to note that the file the tag is referencing is "epiceditor.js.erb", since it has some embedded Rails code that I needed.
Thanks for your help
EDIT:
I believe this is a bug in Sprockets. If I update Rails to 3.2.9rc2, the error is now this:
ActionView::Template::Error (Asset logical path has no extension: epiceditor/.js
but of course the extension in epiceditor is epiceditor.js.erb, and I've tried being explicit about it in the javascript_include_tag as well.
I found the bug.
It turns out that inside the .js.erb file I'm calling
<% asset_path 'epiceditor/' %>
which should expand to the path where all the epiceditor file are placed, but instead is actually loading the file itself in recursive manner. This is expanding properly in the development environment but not in the production environment. Funny, right?
The reason for this is that is adding a digest. So I fixed the whole issue with this:
<%= asset_path 'epiceditor/', :digest => false %>
and now it does expand to the directory, and doesn't fall into the recursion trap.
Hope this saves some time for someone!
I created a new Rails app and when I am in some view of a controller called Welcome, if I check the source code I see that the welcome.css is being added, even though I don't specify that in the layout or explicitly anywhere in my code.
However, in another Rails app when I am in a controller, let's call it welcome, whenever I am in the view, I don't see the welcome.css being loaded.
How does Rails decide whether yes or not require the css for a specific controller? From the Rails guides it seemed to me that you have to specificly add the stylesheet_link_tag params[:controller] in order to load the specific css, but this is not the case in my first application, where I don't set that anywhere.
By default in rails 3.2, rails adds a stylesheet_link_tag in the app/views/layouts/application.html.erb
<%= stylesheet_link_tag "application", :media => "all" %>
and requires all your stylesheets in the app/assets/stylesheets/application.css
*= require_self
*= require_tree .
that's the reason why your rails 3.2.2 app adds all your stylesheets automatically. if you don't want to load all your stylesheets, just edit these two files.
I added a custom engine for HAML in config/initializers.
When I visit http://127.0.0.1:3000/assets/page.html it renders the page successfully.
# page.html.haml
!!! 5
%html{:lang => "en"}
%head
= stylesheet_link_tag 'application'
= javascript_include_tag 'application'
The problem is Rails seems to cache the html asset. When I add or remove a file from the application.js manifest it doesn't update until I stop the Rails server and run rake tmp:clear. An alternative is to touch the application.js file. I have config.assets.debug = true set because I prefer to see individual files/folders in Chrome DevTools rather than one big application.js file.
Is there a way to exclude certain assets from being cached during development.
Just to reiterate - its the HTML being cached which is the problem, changes to the manifest are reflected when visiting http://127.0.0.1:3000/assets/application.js.
A brute force solution would be to add some depends_on attributes to the haml file:
# page.html.haml
#= depend_on application.js
#= depend_on application.css
!!! 5
%html{:lang => "en"}
%head
= stylesheet_link_tag 'application'
= javascript_include_tag 'application'
This should force the asset to be regenerated when the application.js file is changed.
There are a few cavets with this. The file names should be the names in the source tree. It assumes you can use # for comments in your HAML renderer (I don't know HAML so I'm not sure).I'm also not really sure how this works with a custom engine. Also, a better solution would be to have your custom HAML engine track dependencies itself, but I don't know how to do this.
See the sprockets docs for more details