Rails 4 App - Heroku / Cloudfront - Assets not serving from origin properly - javascript

I have a rails 4 application in which we are using cloudfront as the CDN.
In the production.rb file, we have the following code:
config.action_controller.asset_host = "example3579.cloudfront.net"
We have done some pretty thorough asset separation. This may not be advisable from an asset pipeline standpoint, but it should make debugging this issue pretty easy.
The particular page I'm working on is the users#edit view, but the problem is universal.
The users#edit action uses it's own layout: views/layouts/user_edit.html.erb
The views/layouts/user_edit.html.erb file calls this javascript.
<%= javascript_include_tag 'user_edit'%>
assets/javascripts/user_edit.js
//= require jquery
//= require jquery_ujs
//= require jquery.validate.min
//= require ./webarch/form_validations
On the localhost, this works. I can access the js in the browser like this:
http://localhost:3000/assets/user_edit.js
But on production with heroku, the site looks for this file:
<script src="http://example3579.cloudfront.net/javascripts/user_edit.js"></script>
The file doesn't work. I can't access in the browser and the javascript does not render on the page. I have precompiled the assets.

Add gem 'rails_12factor', group: :production # Helpful for rails 4 assets on heroku
And in /config/environments/production.rb
config.assets.compile = true
This should work

Related

Rails UJS: javascript file of ruby gem not available in Chrome network tab?

Rails comes with the jquery-ujs gem. In the src of this gem, there is a file called rails.js, which contains the functionality of the ajax. I have the gem loaded in my app and it works. I have the following in application.js:
//= require jquery
//= require jquery_nested_form
//= require jquery_ujs
However, in the Network tab in chrome, I see all the javascript files of my app. But when I search for rails.js, it does not appear. How could this be possible? Is the files of the gem precompiled by default? Is in a file with another name?
I think the rails.js is compiled and merged on application.js. Try open application.js on network and with ctrl + f find this jquery-ujs has already been loaded!
[edit]
I create a new rails project with version 5, and I can see the rails ujs on network tab:
see the image here
Change this on your enverioment file:
config.assets.debug = true
[edit 2]
Image with rails 4

Rails 5 - precompiling assets for heroku deployment - not working

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.

vendor javascript files missing from rails project

I am using rails v4.2.4. I have tried creating a test app using the command
rails new app
Even though I can see the jquery references in the Gemfile (also present in application.js), and I have ran bundle install as well, however, the vendor/assets/javascript directoy is empty and does not include the JS files. I have already ran bundle install as well. Am I supposed to add them by hand or did I miss a command to pull those files for me in the Rails project?
application.js file in app/assets/javascripts
// 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_ujs
//= require turbolinks
//= require_tree .
jQuery.js is inside vendor/assets/javascripts directory of respective gem. jquery-rails is a so called Rails Engine, which is a "mini-app" by itself.
Engines can be considered miniature applications that provide functionality to their host applications. A Rails application is actually just a "supercharged" engine, with the Rails::Application class inheriting a lot of its behavior from Rails::Engine.
How to find jquery-rails home dir
Issue command (to find out where jquery-rails is located):
gem which jquery-rails
#=> /home/dimitri/.rvm/gems/ruby-2.1.5/gems/jquery-rails-4.0.5/lib/jquery-rails.rb
jquery-rails's home dir, based on output, is:
/home/dimitri/.rvm/gems/ruby-2.1.5/gems/jquery-rails-4.0.5
Your versions and path may be different.

Bootstrap-sass gem Javascript not Working in Rails 4

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).

What can cause Rails 3.1 "= require jquery" to stop working?

I'm porting a Rails 3.0.9 app to Rails 3.1.rc5. My application.js is exactly the same as one generated by Rails 3.1 itself:
// This is a manifest file ...
//
//= require jquery
//= require jquery_ujs
//= require_tree .
But when I run my app and look at the application.js in Firebug or Chrome Developer Tools, all I see is:
// This is a manifest file ...
//
The directives are gone, so it would seem that the file has been processed by Sprockets, but the directives have not been replaced by the contents of jquery et al. There are no errors appearing on the server console or in the logs.
Curiously, when I run a blog app (you know, the canonical tutorial app) it works fine (that is, when I examine application.js in Firebug, it contains the text of jQuery.) This would seem to indicate that something in my app is somehow interfering with Sprockets. Has anyone out there heard of such an issue (and hopefully a workaround)?
Here's my setup:
$ gem list jquery
*** LOCAL GEMS ***
jquery-rails (1.0.12)
$ ruby -v
ruby 1.9.2p290 (2011-07-09) [i386-mingw32]
$ rails -v
Rails 3.1.0.rc5
I'm at a loss as to what might be wrong. I've triple checked my Gemfile; I've run and re-run bundle install and bundle update; I've tried rc3, rc4 and now rc5; I'm running Ruby 1.9.2p290. Any ideas?
One workaround: include JavaScript files with the old-skool tag. For example, in my (Haml) layout:
= javascript_include_tag '/assets/jquery.js'
= javascript_include_tag '/assets/jquery_ujs.js'
= javascript_tag 'jQuery.noConflict();'
The /assets/ prefix tells Rails 3.1.x to look on the asset path, which includes gems, so you'll get the same files as with Sprockets directives. But you won't get concatenation or any other Sprockets preprocessing.
Still looking for better solutions.

Categories

Resources