Amazon cloudfront giving different assets for different user? - javascript

I am having following folder structure in rails app.
|-assets
|-javascript
|-lib
bootstrap.js
jquery.js
application.js
|-styleesheet
|-lib
bootstrap.js
application.js
the static assets are hosted in cloudfront by diffreent people I don't know how it was done.
I have given the following config in production.rb.
config.serve_static_files = ENV['RAILS_SERVE_STATIC_FILES'].present?
config.assets.compile = true
config.action_controller.asset_host = 'cloudfront url'
In view Page it will be like this:
<%[application,lib/bootstrap].each do |css_url| %>
<%= stylesheet_link_tag css_url%>
<%end%>
<%[application,lib/bootstrap,lib/jquery].each do |js_url| %>
<%= javascript_include_tag js_url%>
<%end%>
When deployed in production and for the first request it will compile assets folder and store them in cache. for subsequent request it will take from cache.But every time I host and make first request cache generated for only some files, not for all the files.

Your question is not very clear but please ensure that both users are receiving the same fingerprints in the files. If the fingerprints are not the same that it is likely an error not with cloudfront but something is wrong with your rails application.
The most likely cause for this error is that some multiple application workers are running (some serving older assets and some newer).
If the above does not help you solve the problem, please update with the specifics of your rails setup - caching layer, load balancer, application server etc.

Related

Accessing webpacker helpers in myfile.js.erb

I've got a Rails application that is using webpacker to serve the styles and the javascript. I'm using serviceworker-rails gem to have a service worker.
Externally from the service worker installation I need to add the cache the css and js produced by webpack. How can i achieve this?
I've tried serving the file with the asset pipeline an using the webpacker helpers but when it's compiled I get:
ActionView::Template::Error (undefined method `javascript_pack_tag' for #<#<Class:0x00007f8cb663fcf0>:0x00007f8cb777f6a0>):
A portion of the file where I use the webpacker helpers is this:
return cache.addAll(window.location.pathname, "<%= javascript_pack_tag 'application' %>",
"<%= stylesheet_pack_tag 'application' %>")
Accessing webpacker helpers in a file that will be part of applicaition.js produced by webpack is impossible (change my mind if you know how to do it)
Instead I've used the asset pipeline to serve this file and inside use:
<%= Webpacker.manifest.lookup 'application.css' %>
to get the application styles, and will return something like:
/packs/application-d85a17a26660e00c18a4d4f9535ee7d7.css
The same applies for application.js

Ruby on rails javascript doesn't load properly (HTML5 template)

I am very new in ruby, so please don't judge me too much :)
I was trying to make this template http://freebiesbug.com/code-stuff/sedna-one-page-website-template/ run on rails. And it went pretty well.
However, I have stuck on configuring javascript parameters (the way it loads on rails). I am not sure how to do that correctly. Things that slides in the template doesn't work for me, like apple images and slider of employees in the bottom...
I tried to include all file names in javascript.rb file and also I have used:
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
but non of these worked.
Any ideas where I may made a gap?
Thanks!
Javascript files end in .js, not .rb, so thats one problem.
The line
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
tells rails to package and include the application.js file found at app/assets/javascripts/application.js. Assuming your template has one associated javascript file, you can copy and paste the contents of that file into your application.js file (which may be the easiest solution). You can also add any javascript (or coffeescript) files to the app/assets/javascripts folder, and those files will be packaged and served up in the default configuration of rails.

Ruby on Rails 4 and usage of asset_path

I am attempting to use asset_path during development in my Ruby on Rails 4 application via a javascript. In my javascript, I'm referencing an HTML file using something like:
<%= asset_path('templates/login/index.html.erb') %>"
The file physically resides in $RAILS_ROOT/app/assets/templates/login/index.html.erb
When my javascript tries to grab this file, though, it is catching a 'catchall' route I put together because my frontend is AngularJS and it is handling the "routing" for the application. Here is the log:
Started GET "/templates/login/index.html.erb" for 127.0.0.1 at 2013-07-30 11:20:43 -0400
Processing by HomeController#index as
Parameters: {"a"=>"templates/login/index.html"}
Rendered home/index.html.erb within layouts/application (0.0ms)
Completed 200 OK in 12ms (Views: 12.3ms | ActiveRecord: 0.0ms)
My routes.rb looks like the following:
App::Application.routes.draw do
devise_for :users
root :to => 'home#index'
namespace :api do
end
get '*a', to: 'home#index'
end
What's the best way to avoid this issue? How can I reference the template file in my javascript/angular project?
As I mentioned in comments below what I'm trying to achieve is to retrieve templates from the asset pipeline instead of having to go to the server to grab them. The additional round-trip doesn't make sense since they can be served at page load to make the app perceived as 'faster' when they're already cached. The issue here is that you still need to define a Rails route to match every route on Angular's side otherwise Rails will return a 404.
asset_path doesn't load all files in the assets directory. It is meant for images.
If you want to add other files, you need to add a parser for them.
As what you're trying to do is use your angular templates from the assets pipeline though, you should take a look at angular-rails-templates.
It will automaticaly compile your templates into javascript, and make them available to angular.
You can then use them as you usually do. And once you deploy into production, all your templates will be included into your single application.js file.

Rails assets not available on production

I have this specific issue. On a (LARGE) rails setup I have a backbone project in /app/assets/reader/. All of my javascript assets are precompiling dynamically into reader.js, this works fine. My i10n files in locale/ don't play nice however because they don't need any precompiling. In development it works fine, but in production they are not available.
In my /app/views/layouts/reader.html.erb file I have the following lines:
<%= javascript_include_tag "reader" %>
<%= javascript_include_tag "locale/en" %>
The problem is that the lower one results in a 404 error on production.
I've tried the following alternatives:
<%= javascript_include_tag "en" %>
<%= javascript_include_tag "locale/en" %>
<%= javascript_include_tag "reader/locale/en" %>
None of these seem work. The last one even broke on development.
PS: in applicaton.rb I have:
...
config.assets.precompile += [
...
'reader.js',
...
]
...
config.assets.paths << File.join(Rails.root, 'app', 'assets', 'reader', 'locale')
You removed all files in public directory folder then restarted server? Also inside of your js folder you have a folder
reader/locale/en.js
? Double check all paths and if it works in development you should check out your error log in production to see where the problem is coming from.
The solution was not in the javascript_include_tag, but rather in the way config.assets.precompile was formatted.
By default Rails scans for any subfolder DIRECTLY within assets. That meant that the locale file had to be added as locale/en.js to config.assets.precompile, and that the config.assets.paths line was not even necessary at all.
The way rails scans subfolder is really specific and important. Get that right, and it should all work like a breeze. Once you know how it works, it actually gets quite powerful.
Pro tip:
I ended up using locale/*.js in combination with <%= javascript_include_tag "locale/#{I18n.locale}" %>, as I actually have a lot of locale files.
Had the same issue, turns out there is a line in config/environments/production.rb:
config.public_file_server.enabled = ENV["RAILS_SERVE_STATIC_FILES"].present?
which didn't allow Rails to serve static files, including the precompiled assets. Changing it to
config.public_file_server.enabled = true
fixes the issue.
This is caused by the fact that Nginx and Apache handle static serving on their own. But Rails is configured to use Puma by default so this doesn't really make too much sense for it to default to these settings.

Where should javascript files and stylesheets be added to a Rails project?

I'm unclear about where javascript files and stylesheets should be added to a Rails project. Perhaps they should be added to public/javascripts and public/stylesheets respectively. Then they're copied to app/assets? Or perhaps it's the other way around.
I've experimented with <%= stylesheet_link_tag :all %> and :default and just explicitly naming my stylesheets but I'm still confused.
Where should javascript files and stylesheets be added to a Rails project?
It is the other way around. You add stylesheets and javascripts to their respectable folders in assets.
You then use:
= stylesheet_link_tag "application"
= javascript_include_tag "application"
Check the guide for details http://guides.rubyonrails.org/asset_pipeline.html
In a Rails 3.1 application, where the asset pipeline is enabled, you want to place your script/stylesheet assets in app/assets. Rails will automagically find them via Sprockets and serve them up minimized and contaminated (in production).

Categories