Active admin assets not compiling with webpacker - ruby-on-rails

I am using webpacker for my asset pipeline in my rails app. I installed active admin as per the documentation. I moved the styleheet file and javascript file active_admin.js.coffee and active_admin.css from app/assets/stylesheets and app/assets/javascripts to vendor directory. To load these files from vendor directory I added following lines in my config/initializers/assets.rb
Rails.application.config.assets.precompile += %w( active_admin.js active_admin.scss )
But still rails is not able to find the file in my assets pipeline. It throws me error whenever I visit /admin path.
Sprockets::Rails::Helper::AssetNotFound in ActiveAdmin::Devise::Sessions#new
Showing /home/rabin/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/activeadmin-1.3.0/app/views/layouts/active_admin_logged_out.html.erb where line #9 raised:
The asset "active_admin.css" is not present in the asset pipeline.
I searched for entire stackoverflow but still can't figure out the problem.

ActiveAdmin on version 2.7.0 added Webpacker support, so after updating to this version (or above) according to docs ActiveAdmin will generate the needed files for you. Write:
rails g active_admin:install --use_webpacker
If you are not using Device add --skip-users after --use_webpacker
Unlike the usual generation ActiveAdmin will generate:
app/javascript/stylesheets/active_Admin.scss
app/javascript/packs/active_admin.js
This will download the needed js and CSS file with yarn, and update the Webpack to use jquery on all the pages (if you already set jquery, it will be worth removing the duplicate code)
If you updating from Sprockets don't forget to remove the previous js and CSS from assets or vendor folder.

It should have been inside vendor/assets directory.

Related

Heroku does not load assets from asset pipeline

In my Rails app I have css and js that is unique to each action.
So users#new has its own css. It's named users_new.css.scss.
I deployed my app to Heroku, and Heroku isn't loading any of the assets. You can see the errors here. How do I fix this so Heroku correctly precompiles and loads the assets?
I read through Heroku's docs on using the asset pipeline, but didn't see any solution.
Precompilation
The problem is your timelines_index.js is not precompiled:
The way you can tell this is a problem is that when you call the asset in your layout (which I presume you're doing with the correct path helpers), Rails will automatically reference the latest precompiled version of that file (hence why application.js has the appended MD5 fingerprint)
I believe you'll need to add your custom files to your precompiled_assets array:
#config/environments/production.rb
Rails.application.config.assets.precompile += ['timelines_index.js']
This will give Rails the ability to precompile those assets individually, allowing you to call them in your layout:
#app/views/layouts/application.html.erb
<%= javascript_include_tag "timelines_index" %>
This will have to be done for all the custom asset files you wish to call in your layout.
Manifest
As mentioned by Anil, you may wish to use the manifest system of Rails to concatenate all your asset files into their respective application files.
This will quash the need to append the files to the Rails precompile array, allowing you to call a single file for your various assets:
#app/assets/javascripts/application.js
//= require_tree .
Add in your Gemfile
gem 'rails_12factor', group: :production

Rails 3.2.8 - not loading assets (development)

I have searched around and can't rectify the situation based on the responses to other similar questions. I seem to have broken the asset pipeline somehow but can't seem to figure out how.
None of my assets are being loaded at all; rails seems to just be ignoring my manifest files. When I inspect my page in firebug, only the 'non-compiled' text inside my manifest files (both js and css) is being displayed - almost as if the asset pipeline wasn't even enabled.
I deleted the contents of public/assets since I was adding a new file to the manifest which seemed to start this behavior.
Current configuration:
environments/development.rb
# Do not compress assets
config.assets.compress = false
# Expands the lines which load the assets
config.assets.debug = true
application.rb
# Enable the asset pipeline
config.assets.enabled = true
config.assets.manifest = config.root
# Add extra assets for precompiling
config.assets.precompile += ['admin.js', 'admin.css']
# Version of your assets, change this if you want to expire all your assets
config.assets.version = '1.0'
I had the same issue. You can still use Ruby 2.1.2, just upgrade rails to latest 3.2.x version - it's 3.2.22
Gemfile:
gem 'rails', '3.2.22'
And run:
$ bundle update rails
The issue was caused by using an incompatible version of ruby. I was using version 2.1.2 which lead to unusual behavior from the sprockets gem (which powers the asset pipeline). This was fixed by downgrading to ruby 1.9.3. I haven't done any experimentation for fear of breaking it again but maybe this has been addressed in later versions of sprockets. I am using sprockets 2.1.3.
See: Rails 3.2.8 Application.js and Application.css are not working as expcted
Always remember two things when you want to handle Rails asset pipleline:-
if you want all you newly created js/css to autoinclude in application.js/css,pls add them in...
ELSE
IF you dont wont to add in manifest file(application.js/css) then use precompile directive in yuur environment file.
config.assets.precompile=%w(custom.css,custom2.js...etc)
so make sure you have either of these...
===========for example=-=============
suppose you have new css/js file:-
custom.css inside
app/assets/stylesheets/
so you can include in
application.css
// = require 'custom'
OR
use precompile directive:-
config.assets.precompile += %w( custom.css )
and then reference it like you always do
stylesheet_link_tag "custom"
same applies for js also
I just spent a few hours troubleshooting this issue (in 2017!) and it turned out I just needed to remove the gem active_reload. Updating rails and ruby was having no effect for me. The thread where I found that gold is here:
https://github.com/rails/rails/issues/2715

Sass::SyntaxError when using Bootstrap in Rails application on Heroku

I installed twitter bootstrap by copying the files into my assets directory as per the instructions here: http://www.erikminkel.com/2013/09/01/twitter-bootstrap-3-in-a-rails-4-application/
After following the instructions exactly as presented and executing "rake assets:precompile RAILS_ENV=development", I am able to use bootstrap 3 in my development rails server.
However, when I try to execute "heroku run rake assets:precompile RAILS_ENV=production", I get this error:
Sass::SyntaxError: Invalid CSS after "...ss","sources":[": expected "|",
was ""less/theme.les..." (in /app/app/assets/stylesheets/application.css) (sass):444
I am not sure what this means. When I open "application.css" in the assets/stylesheets folder, I can't even find a line 444. I do have some scaffold files left over after running "rails g scaffold ..." commands -- could that be causing this problem? And obviously, the deployed heroku app looks like a non-bootstrap app when I view it from the heroku page and throws a "resource not found" error.
In public/assets/application-mydigest.ccs, I found the following line of code that causes the error:
{"version":3,"file":"bootstrap-theme.css","sources":["less/theme.less","less/mixins/vendor-prefixes.less","bootstrap-theme.css","less/mixins/gradients.less","less/mixins/reset-filter.less"],"names":[],"mappings":"AAeA;;;;;;EAME,0CAAA;EC+CA,6FAAA;EACQ,qFAAA;EC5DT;AFiBC;;;;;;;;;;;;EC0CA,0DAAA;EACQ,kDAAA;EC7CT;AFqCC;;EAEE,wBAAA;EEnCH;AFwCD;EG/CI,0EAAA;EACA,qEAAA
However, it seems odd that this would only happen on production. Moreover, the CSS syntax looks fine.
This error means the assets compilation failed because of an invalid css syntax into a file you require in application.css.
In bootstrap repository there is a less directory and you can't precompile less files with rails.
If you want to use Rails and Bootstrap on a production environment I think use bootstrap-sass gem is a better option
Have you tried using rails-assets instead of the referenced method of adding Bootstrap 3? I use it on Heroku with success... and just add my own custom Bootstrap css in my normal assets folders which get loaded after the vanilla Bootstrap 3 and override it. Just add gem 'rails-assets-bootstrap' along with source 'https://rails-assets.org' to your gem file. May help diagnose if nothing else.
EIther of the two things you must take care to avoid assets compilation errors when you go live.
- Add all your assets(js/css) in manifest file(application.js/application.css)
- OR
- use assets.precompile=%w(custom.css custom.js) directive to handle them explicitly
because when u precompile...rails copies everyting(images/fonts) except js/css into public folder to be taken care by the server(apache),hence the setting # Don't fallback to assets pipeline if a precompiled asset is missed config.assets.compile = false in production.rb during assets precompile fallback is disabled by default in production/staging as Rails assumes it will be handled by webserver.Hence we have manifest file to define our assets which gets precompiled during assets:precompile and verified by looking for public/assets/javascripts/application.css/js after compilation which gets created requiring all files mentioned in app/assets/stylesheets/application.css and app/assets/javascripts/application.js after running assets:precompile...so hope u know where you missed.
FOR MORE DETAILS..REFER this

Rails 4 Asset Pipeline With Lib and Vendor Folders

I was reading the documentation on Rails 4 and the Asset Pipeline when I got tripped up by this line:
If you are upgrading from Rails 3, please take into account that assets under lib/assets or vendor/assets are available for inclusion via the application manifests but no longer part of the precompile array
http://edgeguides.rubyonrails.org/asset_pipeline.html#asset-organization
What is the difference between being available for inclusion via the application manifest and being part of the precompile array? Does this mean that if I were to have a javascript file lib/vendor/cool_plugin.js I would get a 404 when I went to production even if I had //require cool_plugin in application.js?
From http://edgeguides.rubyonrails.org/upgrading_ruby_on_rails.html:
In Rails 4.0, precompiling assets no longer automatically copies
non-JS/CSS assets from vendor/assets and lib/assets. Rails application
and engine developers should put these assets in app/assets or
configure config.assets.precompile.
so I believe you need to explicitly reference your vendor assets for them to get picked up during precompilation on production:
# production.rb
config.assets.precompile += %w( cool_plugin.js )

where is jquery_rails javascript files located in rails 3.2?

I've read the documentation on the asset pipeline. It says assets will be looked up in the 3 asset locations and compiled into the public folder, but I don't see any javascript in any of the 3 locations in the new rails project that I have just created. I have run bundle install and the jquery rails gems is installed. But grep for "jquery" gives no such file. Where is jquery located?
They're located within the gem itself.

Resources