Javascript not running as expected in ruby rails app deployed on heroku - ruby-on-rails

I'm using Rails 4 and have an app deployed on Heroku. I've been precompiling my assets locally, but my javascript isn't working as expected.
my application.js file looks like this('custom-scripts' has all my important functions in it):
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require turbolinks
//= require jquery.slick
//= require custom-scripts
//= require_tree .
On Chrome's dev tools under the Resources tab I see that Frames/appname/Scripts/application.js exists with the code in 'custom-scripts.js' at the bottom of the file. In the Elements tab, the script tag is linking to /assets/application.js but under the Sources tab inside appname/assets/ I don't see application.js only application.css.
I'm using the <%= javascript_include_tag 'application' %> tag so it should link correctly right?
I've been reading about the Assets pipeline and everything I'm seeing says that everything should be working. I wrote a test() function that just returns a console.log function in my custom-scripts file and when called in the Console tab, it returns 'function not defined' so that tells me my functions aren't even running for some reason. Any idea what could be wrong?

<%= javascript_include_tag 'application' %> yes, it is correct but it only pre-compile your scripts. have you tried creating a file in the assets/javascript? If you have user_controller.rb in the controller folder, i usually create a coffee script pertaining to that controller. i.g users.js.coffee there you can create or call your custom-script:
$(document).ready ->
...
I hope it helps mate. gl

I think this is more of a dirty fix, but it works, so for now this is my solution; So I removed //= require_tree . and //= require custom-scripts from application.js and added <%= javascript_include_tag 'custom-scripts' %> to my application.html.erb file then ran rake assets:precompile again, pushed to github & heroku and bam, its working wonderfully.

Related

Upgrading from Rails 6 to 7: jquery-ujs and actioncable not working

I've just upgraded my Rails 6 app to Rails 7, and now my Javascript and ActionCable aren't working.
After a bit of googling, I now know that this is because my app is set up to use sprockets with the asset pipeline, not webpacker or import maps.
How can I upgrade my app to work with Rails 7? Is it possible to continue using sprockets and jquery-ujs? I couldn't find much online to help me with this so I'm hoping someone on here knows what to do.
app/assets/javascripts/application.js:
//= require jquery
//= require jquery_ujs
//= require activestorage
//= require cloudinary/jquery.cloudinary
//= require_tree .
//= require cable
//= require local-time
//= require serviceworker-companion
//= require cookies_eu
//= require gmaps/google
import "stylesheets/application";
//javascript functions below here
This is the directory layout:
below are steps that I did to upgrade rails 6 to 7 apps.
I'm using sprocket and combined with new rails 7 Hotwire
1. install importmap and hotwire
as noted from DHH, rails 7 replacing Webpacker, Turbolinks, UJS with import maps plus Turbo and Stimulus from Hotwire as the defaults.
you can learn from https://hotwired.dev/ to get more information.
since my application using Sprockets, here is the steps that I use
2. install importmap
since importmap and hotwire-rails gem already installed from previous step, I just need to install it
run rails importmap:install
3. install hotwire
run rails hotwire:install
4. Change turbolinks to turbo
since hotwire turbo replacing turbolinks below are steps that I did
open file app/assets/javascripts/application.js (since I use sprocket)
delete line //= require turbolinks
5. Using your text editor search inside app/views/
find turbolinks:load replace with turbo:load
save and close all
6. using your text editor search inside app/assets/javascripts/
find div data-turbolinks replace with div data-turbo
save and close all
7. Merge Sprocket with importmap
Change file name app/assets/javascripts/application.js to any name that fit with you, for me I change to application_pipeline.js
Reason to change: since new javascript folder also using application.js inside app/javascript/application.js
Create one manifest file app/assets/config/manifest.js
(if folder config not exist you can create manually)
below are the content for my settings
//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_tree ../../javascript .js
//= link_tree ../../../vendor/javascript .js
//= link_tree ../javascripts .js
../images to call folder inside app/assets/images
../stylesheets .css to call .css file inside app/assets/stylesheets
../javascript .js to call .js file inside app/assets/javascript
../../javascript .js to call js files within app/javascript to this new folder created when we - install importmap-rails
../../../vendor/javascript to call js files within rails root/vendor folder
8. Setting for application.html.erb
open file app/views/layouts/application.html.erb and change
<head>
...
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_include_tag "turbo", type: "module-shim" %>
<%= javascript_include_tag "application_pipeline", "data-turbo-track" => true %>
<%= javascript_importmap_tags %>
</head>
9. Add precompiled list in production
open file file config/initializers/assets.rb
change and increase version number if you want to total precompile
Rails.application.config.assets.version = “3.3”
Here is the sample, you can increase to any number for example 3.4 or 4.0
# Be sure to restart your server when you modify this file.
Rails.application.config.assets.version = "3.3"
Rails.application.config.assets.precompile += %w( application_pipeline.js )
Rails.application.config.assets.precompile += %w( controllers/hello_controller.js )
Rails.application.config.assets.precompile += %w( controllers/index.js )
as you can see second line above I included application_pipeline.js inside this asset list
do precompile by running rails assets:precompile
I wrote complete article, based from my own experience upgrading rails 6 to 7 my applications and here is the link

Rails 6 - How to use the old sprocket assets pipeline instead of webpacker?

Does anyone know if its possible to use the old sprocket pipeline setup in Rails 6? I've read somewhere that it's possible to use it instead of the new webpacker pipeline, but i can't find the source where i've read that.
Thanks in advance everyone!
Greetings!
Well this is how i did it
rails new app-name --skip-webpack-install --skip-javascript
--skip-webpack-install prevents the generator from running rails webpacker:install.
--skip-javascript drops the webpacker gem from the Gemfile.
now in rails 6 app/assets/javascripts doesn't exists so you will have to create it yourself
Then, create app/assets/javascripts/application.js and add the following lines to it
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
Next, open app/assets/config/manifest.js and add the following line in the end
//= link_directory ../javascripts .js
Finally, open your application layout (app/views/layouts/application.html.erb) remove the javascript_pack_tag and add the following line
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

RoR Spree Asset Differs on Production & Heroku

I'm tryin to solve this for nearly 2 days. I'm pretty mad at now.
I'm using Spree (latest version) with Rails 5. I'm trying to use W3's Shape template as theme. Css is ok and working fine but I can't manage to get workin javascript assets.
Here is my vendor/javascripts/spree/frontend/all.js
//= require jquery
//= require jquery_ujs
//= require accounting.min
//= require shape/all ---> As you can see i require my template's assets
//= require_tree .
//= require spree/frontend/spree_auth
//= require spree/frontend/spree_i18n
And here is the assets/javascripts/shape/all.js
//= require_tree .
And inside that Shape folder, there are javascript assets.
When in development mode, everything works perfect. There is no issue. But when i try to switch production mode or deploy to heroku, template's javascript assets does not included.
Thank you all.
Edit: For a temporary solution, I did include my problematic js assets by old classic html way. But still I'm really curios about how can this happen.

rails assets in production not served (yet another assets issue)

I'm using
apache 2.2.15
passenger 5.1.2
rails 4.2.6
ruby 2.3.3
In the rails log, I get
(No route matches [GET] application-xxxxx.js
as well as
(No route matches [GET] application-xxxxx.css
I can find the assets in the public/assets directory.
My manifests:
app/assets/stylesheets/application.css.less:
/*
*= require jquery-ui
*= require font-awesome
*= require bootstrap_and_overrides
*= require awesome-bootstrap-checkbox
*= require lists
*= require mailgroups
*= require general
*= require colors
*= require print
*= require loader
*= require tooltips
*= require_self
*= require_tree .
*/
app/assets/javascripts/application.js
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery-ui
//= require twitter/bootstrap
//= require bootstrap
//= require turbolinks
//= require twitter/bootstrap/rails/confirm
//= require_self
//= require_tree .
and I set (following other answers here on SO) in config/production.rb
config.serve_static_files = true
in app/views/layouts/application.html.erb
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => "reload" %>
<%= javascript_include_tag "application", "data-turbolinks-track" => "reload" %>
I'm lost, thanks for your help.
UPDATE: I don't use Capistrano, just deploying manually.
When running Rails.application.config.assets.paths in the rails console, I get the following:
=> ["/var/www/myappname/app/assets/fonts",
"/var/www/myappname/app/assets/images",
"/var/www/myappname/app/assets/javascripts",
"/var/www/myappname/app/assets/stylesheets",
"/var/www/myappname/vendor/assets/fonts",
"/var/www/myappname/vendor/assets/images",
"/var/www/myappname/vendor/assets/javascripts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/twitter-bootstrap-rails-confirm-1.0.6/vendor/assets/javascripts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/local_time-1.0.3/app/assets/javascripts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/font-awesome-rails-4.7.0.1/app/assets/fonts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/font-awesome-rails-4.7.0.1/app/assets/stylesheets",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/less-rails-fontawesome-0.5.1/vendor/assets/fonts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/less-rails-fontawesome-0.5.1/vendor/assets/stylesheets",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/less-rails-bootstrap-3.3.5.0/app/assets/fonts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/less-rails-bootstrap-3.3.5.0/app/assets/javascripts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/less-rails-bootstrap-3.3.5.0/app/assets/stylesheets",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/twitter-bootstrap-rails-3.2.0/app/assets/fonts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/twitter-bootstrap-rails-3.2.0/app/assets/images",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/twitter-bootstrap-rails-3.2.0/app/assets/javascripts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/twitter-bootstrap-rails-3.2.0/app/assets/stylesheets",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/twitter-bootstrap-rails-3.2.0/vendor/assets/stylesheets",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/jquery-turbolinks-2.1.0/vendor/assets/javascripts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/jquery-ui-rails-6.0.1/app/assets/images",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/jquery-ui-rails-6.0.1/app/assets/javascripts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/jquery-ui-rails-6.0.1/app/assets/stylesheets",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/jquery-rails-4.2.2/vendor/assets/javascripts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/coffee-rails-4.0.1/lib/assets/javascripts",
"/var/www/myappname/vendor/bundle/ruby/2.2.0/gems/turbolinks-source-5.0.0/lib/assets/javascripts",
#<Pathname:/var/www/myappname/app/assets/fonts>,
#<Pathname:/var/www/myappname/app/views>,
#<Pathname:/var/www/myappname/app/assets/stylesheets>,
#<Pathname:/var/www/myappname/app/assets/javascripts>]
my config/initializers/assets.rb already contains this:
Rails.application.config.assets.precompile += ['.svg', '*.eot', '*.woff', '*.woff2', '*.ttf', '*.otf', '*.js', '*.css']
this is my advise.
I add the following resources that may help in finding a solution.
https://launchschool.com/blog/rails-asset-pipeline-best-practices
https://railsapps.github.io/rails-javascript-include-external.html
https://reinteractive.com/posts/116-12-tips-for-the-rails-asset-pipeline
I read all the guides that can be found by searching rails asset pipeline, but I will not link them all
My advice is to check the fingerprint of the application.css and application.js both with the Chrome Developer Tools (by going in any screen element, opening the developer toolbox with f12 and checking any style of any div or any js file). You will need to check which fingerprint version of the file is used, then open that version with the text editor and check what is loaded in the fingerprint version of the file.
If your file (for ex. user.js) is loaded at the bottom of the manifest, you should easily find it at the bottom of your fingerprinted application.js.
If you want to update this file you can run
rake assets:precompile
This will precompile assets only in development, for production you need to specify the environment. It will change that fingerprinted file application.css and application.js with the editing you have done.
RAILS_ENV=production bundle exec rake assets:precompile
You can also check the file at the following address localhost:3000/assets/yourjsfile.js or check the fingerprint version by following localhost:3000/assets/application-yourfingerprint.js
As you can see, many files are included in that public/assets folder, you can delete them with rake assets:clean or -rf public/assets and then run rake assets:precompile, it will precompile again assets.
If nothing is included, then your application.js is not being loaded. You may try the following as I read on different posts:
Include the file in the config/initializers/assets.rb with the following line of code:
Rails.application.config.assets.precompile += %w( user.js )
Start the rails c and run Rails.application.config.assets.paths
This command will show in red the paths that are automatically included, for example those inside App, Lib and Vendor, in green those that you included by adding inside config/application.rb the follwing code to add new path
config.assets.paths << Rails.root.join("vendor","assets", "fonts")
Another error i made in the past was not using the correct sprockets syntax, you can check it at the following link ( i was using require_user instead of require user):
https://github.com/rails/sprockets#sprockets-directives
Another problem was that I had under App/assets/javascript two files named user (user.coffee and user.js). The first to be loaded was user.coffee which was empty.

Rails and codekit - how to disable rails coffescript compilation

I'm using rails 3.2, but I'm compiling my coffee files with CodeKit.
I still want my coffee files to live inside 'assets', but each time I restart rails, it finds them in there and tries to compile them itself.
My files live in /assets/cafe/myscript.coffee, and codekit compiles them into /assets/javascripts/myscript.js
The coffee-rails gem is already commented out in my gemfile (when rails tries to (re) compile it it gives "throw Error("LoadError: no such file to load -- coffee_script)" - though I really dont want it to even try compiling.
Setting "config.assets.compile = false" in application.rb results in "application.js isn't precompiled"
you should probably just configure your sprockets manifest to not require the whole tree.
edit app/assets/javascripts/application.js
typically it looks like this:
//= require jquery
//= require jquery_ujs
//= require_tree .
change that to
//= require jquery
//= require jquery_ujs
//= require myscript
An (inferior) workaround is to put my coffeescripts inside "App" rather than "assets" (so one more branch up the tree.)
This sucks because it's not where they should go, but at least it does put it outside rails' stalker-tendencies to find coffeescript files anywhere in assets and try to compile them.

Resources