I previously found help here for how to hide and show form fields based on whether a radio button in the same form is set to true or false.
This works fine in my development environment.
I just pushed to heroku and have checked the production version. Nothing happens when I select the true button in the form field that is supposed to reveal the hidden fields.
Others who have had similar issues describe this as a problem attributable to not precompiling assets.
Here is my setup.
application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery-fileupload/vendor/jquery.ui.widget
//= require jquery-fileupload/jquery.iframe-transport
//= require jquery-fileupload/jquery.fileupload
//= require bootstrap-sprockets
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
//= require underscore
// require gmaps/google
//= require markerclusterer
//= require cocoon
//= require_tree .
I expect that require_tree will pick up all of the files saved in my app/javascripts directory.
The js that solved the initial problem I posted about in my linked post is saved in app/javascripts/stances/commercial.js.
production.js
# Do not fallback to assets pipeline if a precompiled asset is missed.
config.assets.compile = true
# `config.assets.precompile` and `config.assets.version` have moved to config/initializers/assets.rb
initializers/assets.rb
# Be sure to restart your server when you modify this file.
# Version of your assets, change this if you want to expire all your assets.
Rails.application.config.assets.version = '1.0'
# Add additional assets to the asset load path
# Rails.application.config.assets.paths << Emoji.images_path
# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
# Rails.application.config.assets.precompile += %w( search.js )
When I push to heroku, I can see from the log that the precompile does happen:
Preparing app for Rails asset pipeline
remote: Running: rake assets:precompile
remote: Asset precompilation completed (3.51s)
The heroku docs say that I shouldn't need to manually precompile assets because it's done on deployment. That makes sense because the above log shows that it is happening. Is there something else I need to be doing to make heroku pick up my js files in production?
This post suggests that Heroku doesnt precompile if there is a public/assets/manifest.yml file in the repo. There is no such file in my application, so i'm expecting that heroku is compiling my assets. It looks from the log (copied above) that it has - so I'm confused about whether I'm supposed to precompile assets before pushing to production or rely on the process that Heroku is supposed to be doing.
Related
I updated my app to Rails 7 and moved it from webpacker to shakapacker.
It is mostly a react frontend, with some old pages in haml with jquery listening on js files in app/assets.
Shakapacker and react front end is working properly, the rails views load (they don't even need webpacker running), but the jquery listeners are not running/listening to the rails views.
app/assets/javascripts/application.js
Is loading up, I can see through logging to the console.
The file looks like this:
// 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, 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. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
console.log('Hello World from Webpacker 2')
// = require jquery-3.3.1.min
//= require popper
//= require rails-ujs
//= require cable
//= require jquery-ui
//= require activestorage
//= require bootstrap
//= require bootstrap-select
//= require moment
//= require tempusdominus-bootstrap-4
//= require jquery.easy-autocomplete.min
//= require jquery.slimscroll.min
//= require patch_modal
//= require_tree
React app is loaded up when rails routes using the react frontend are hit with:
<%= javascript_pack_tag 'react_app', crossorigin: "anonymous" %>
<%= stylesheet_pack_tag 'react_app', crossorigin: "anonymous" %>
Is there something else I need to configure to get my js files in app/assets/javascripts/*.js to compile with shakapacker?
I felt like it just worked with webpacker, I also tried a few other compilers (jsbuild, vite) and it was fine as well. I had to stop with them for other issues on my React side.
Any advice or pointers are super appreciated. I feel like I have spent way too long on making Rails 7 happy with the front end.
Thanks!!
app/
├─ assets/ # used by sprockets-rails
│ └─ javascripts/ # not used in rails 7 by default
│ └─ application.js # javascript_include_tag "application"
│
└─ javascript/ # used by shakapacker and other js bundlers
├─ packs/ # webpack entries
│ └─ application.js # javascript_pack_tag "application"
│
└─ application.js # or this one (depending on `source_entry_path` in config/webpacker.yml)
Shakapacker should not process assets/javascripts/application.js, because it doesn't know how to process //= require directives. They are handled by sprockets.
To load assets/javascripts/application.js, add this to your layout:
<%= javascript_include_tag "application" %>
and double check manifest.js, it should have application.js:
//= link application.js
Sprockets //= require with jsbundling-rails (esbuild) - how to include JS provided by gem?
Sprockets directives are processed only at the top of the file:
// This is processed by sprockets and popper is required.
//= require popper
console.log("loaded")
// After any code, it is a regular comment, nothing happens.
//= require popper
https://github.com/rails/sprockets#directives
Just deployed a Rails 5.x application and installed a theme. The theme's contents are located within the app/assets/javascripts/theme-js and app/assets/stylesheets/theme-files folders.
Inside of the app/assets/javascripts/application.js file includes the following:
//= require jquery
//= require jquery_ujs
//= require_tree .
// Required for the SmartAdmin theme
//= require theme-js/app.config.js.erb
//= require theme-js/app.js
And inside of the app/assets/javascripts/theme-js folder are have the following files (included with the theme):
app.config.js.erb
app.js
application.js
The problem that I'm having is that inside of the application.js file contains a line that states: //= require app.config, but Rails generates me an error stating the following:
couldn't find file 'app.config' with type 'application/javascript'
Even though app.config.js.erb is in the same folder as application.js. Is there any reason why this would happen? Can't figure out why this won't work. I've even tried //= require app.config.js and //= require app.config.js.erb and neither one of them work.
I noticed that //= require ./app.config appears to work whereas //= require app,config doesn't. Something new with Rails 5.x perhaps? I'd have to modify all of the require statements to fit this unless I'm missing something.
Problem solved. Just needed to add the custom theme-js and theme-css folder to the assets pipeline so that Rails can search those folders for the appropriate files when using //= require <file>. Assuming this is what I needed to do, although I'm not sure if it's best practice.
when using the bootstrap-sass gem i have loaded my css files properly, however have been receiving an error when i try loading the javascript files. I have followed the procedure of loading javascript from https://github.com/twbs/bootstrap-sass however when I view my webpage on localhost I receive the error "couldn't find file 'bootstrap'"
This is what my application.js file looks like - Any help would be much appreciated!
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
// Loads all Bootstrap javascripts
//= require bootstrap
//= require_tree .
From the Rails 4 the :assets group isn't used anymore, please remove the group from Gemfile:
Rails 4.0 removed the assets group from Gemfile. You'd need to remove that line from your Gemfile when upgrading. You should also update your application file (in config/application.rb):
Bundler.require(:default, Rails.env)
I got it to work by removing gem 'bootstrap-sass', '~> 3.0.3.0' out of the assets group in gemfile! YAY
Did you bundle install and make sure you are loading application.js (from the assets pipeline).
This is my app on Heroku: http://mighty-brushlands-6367.herokuapp.com/ and this is how it SHOULD look, as it does locally:
Well I did some googling. I check this solution: JQuery events are not working on heroku in production but work in development and others.
I went ahead to run heroku run rake assets:precompile but still can't get the effects to kick in on Heroku. This is how my application.js looks like:
// 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_tree .
//= require bootstrap
//= require textEffect
I need some guidance. I'm a hungry-for-knowledge newbie.
Your Heroku app is getting a 404 error on the application.js & application.css files which leads me to believe it is not getting pushed to Heroku in the first place.
Try running rake assets:precompile in development, then the usual steps git add . , then git commit, and then git push.
The solution was to add
group :production, :staging do
gem 'rails_12factor'
end
To the Gemfile and commit again to Heroku
I use datatables js on rails-3.2.3/bootstrap application, to sort table's fields.
If I run the app locally without precopiling assets pipeline, it works fine but, as soon I run :
RAILS_ENV=production bundle exec rake assets:precompile
the resulting public/assets prevent DataTables plug-in to work, even if it appear correctly packaged into public/assets/manifest.yml file and public/assets directory :
lsoave#ubuntu:~/rails/github/gitwatcher$ ls -l app/assets/javascripts
total 84
-rw-rw-r-- 1 lsoave lsoave 553 2012-04-27 21:36 application.js
-rw-rw-r-- 1 lsoave lsoave 99 2012-04-20 21:37 bootstrap.js.coffee
-rw-rw-r-- 1 lsoave lsoave 3387 2012-04-26 20:12 DT_bootstrap.js
-rw-rw-r-- 1 lsoave lsoave 71947 2012-04-26 20:12 jquery.dataTables.min.js
lsoave#ubuntu:~/rails/github/gitwatcher$
either application.js looks right :
app/assets/javascripts/application.js:
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require DT_bootstrap
//= require jquery.dataTables.min
//= require_tree .
Of course this is even more problematic because it prevent rails app to work on heroku ( I can compile the app from scratch, or use the locally precompiled version, but they don't work anyway ).
How can I do ?
I just got it working myself. Are you using the jquery-datatables-rails gem? If not, you should! Put this line in your gemfile:
gem 'jquery-datatables-rails', github: 'rweng/jquery-datatables-rails'
and run:
bundle install
NOTE: Don't put it in your assets group or it will not work when deploying to heroku (since the assets group is not used in production).
Also, make sure to put this line in your application.rb:
config.assets.initialize_on_precompile = false
Add these to your application.js
//= require dataTables/jquery.dataTables
//= require dataTables/jquery.dataTables.bootstrap
Add this to your application.css:
*= require dataTables/jquery.dataTables.bootstrap
And add this to your js.coffee file for your controller you are using datatables in:
If you are using fluid containers:
#// For fluid containers
$('#dashboard').dataTable({
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap"
});
If you are using fixed width containers:
#// For fixed width containers
$('.datatable').dataTable({
"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap"
});
There could be a few reasons this doesn't work. Best bet is start here:
http://www.neilmiddleton.com/heroku-asset-pipeline-faq/