I'm running Rails 5.2.2. I recently separated some admin code from my frontend and in the process moved my controllers, views, css & JS to folders in either frontend or admin respectively.
In development, everything works fine. In production, I am unable to load image assets from my css.scss files using the following line background: url(arrow.png) no-repeat left center; (located in app/assets/stylesheets/frontend/application.css.scss).
My assets has the following file structure:
assets/
config/
images/
admin/
frontend/
products/
another_folder/
javascripts/
admin/
frontend/
stylesheets/
admin/
frontend/
I did not have to change any of my image tags in my views once I made these changes for my images in assets/images/products so I figured that I wouldn't have to do that anywhere else either; things just seemed to work. However, in production the arrow.png returns a 404. When I inspect the image request, the link to the image is /assets/frontend/arrow.png. I use the RAILS_ENV=production flag when compiling assets. I have also run rake assets:clobber with the production flag then tried compiling the assets again. I've deleted all browsing data.
Here are my server logs where the image is requested:
I, [2019-08-01T05:06:22.496953 #6733] INFO -- : [8a0b82c0-c4a3-419f-92fd-8f4a89bbe643] Started GET "/assets/frontend/arrow.png" for 35.188.197.210 at 2019-08-01 05:06:22 +0000
F, [2019-08-01T05:06:22.501395 #6733] FATAL -- : [8a0b82c0-c4a3-419f-92fd-8f4a89bbe643]
F, [2019-08-01T05:06:22.503739 #6733] FATAL -- : [8a0b82c0-c4a3-419f-92fd-8f4a89bbe643] ActionController::RoutingError (No route matches [GET] "/assets/frontend/arrow.png"):
UPDATE:
Adding this to a view works fine in production so I can confirm the asset does indeed compile properly.
<%= image_tag("frontend/arrow.png") %>
For Rails 5, please try to change following configuration:
config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?
to
config.public_file_server.enabled = true
OR
you can set RAILS_SERVE_STATIC_FILES true in your passenger_env_var. That will also work.
Helo is this code works for you?
background: image-url(arrow.png) no-repeat left center;
Related
I am using esbuild, rails 7 and sass.
I created the rails app with
rails new testapp -j esbuild -c sass
I am trying to include this npm package https://github.com/lipis/flag-icons and i use this simple example to show a flag at index page:
<span class="fi fi-gr"></span> <span class="fi fi-gr fis"></span>
The flag does now show and I get a debug message:
ActionController::RoutingError (No route matches [GET] "/flags/4x3/gr.svg"):
The rails server serves the application.css file just fine at http://127.0.0.1/assets/application...css.
I can make the flag appear by adding "assets" before the 'flags' by doing this :
http://127.0.0.1/assets/flags/4x3/gr.svg
So, I am confused.
This
<span class="fi fi-gr"></span> <span class="fi fi-gr fis"></span>
forces the server to search the icons in
http://127.0.0.1/flags/4x3/gr.svg
Sorry, I am at a loss:
I copied the flags folder in /app/assets/ and I added
//= link_tree ../flags
in
app/assets/config/manifest.js
but I still get the same message.
Thank you in advance.
I'm using bootstrap-sass-rails this issue and when I run my rails project in production mode I get 3x 404 errors:
GET http://localhost:3000/assets/twitter/bootstrap/glyphicons-halflings-regular.woff 404 (Not Found) assets/twitter/bootstrap/glyphicons-halflings-regular.woff:1
GET http://localhost:3000/assets/twitter/bootstrap/glyphicons-halflings-regular.ttf 404 (Not Found) assets/twitter/bootstrap/glyphicons-halflings-regular.ttf:1
GET http://localhost:3000/assets/twitter/bootstrap/glyphicons-halflings-regular.svg 404 (Not Found)
I used rake assets:precompile RAILS_ENV=production to generate static files with result :
I, [2013-11-07T16:52:25.269370 #12948] INFO -- : Writing myproject/public/assets/application-3517eb39b597107b3dbccbcbf4f0b3cc.js
I, [2013-11-07T16:52:25.315358 #12948] INFO -- : Writing myproject/public/assets/application-1459bfe79a6477170658d53257e4a8fd.css
I, [2013-11-07T16:52:25.334356 #12948] INFO -- : Writing myproject/public/assets/twitter/bootstrap/glyphicons-halflings-regular-8b1bdc16b9e098d67afebbf8d59fcea7.eot
I, [2013-11-07T16:52:25.345360 #12948] INFO -- : Writing myproject/public/assets/twitter/bootstrap/glyphicons-halflings-regular-8d8305e5b6a807076d3ec68e2f190674.svg
I, [2013-11-07T16:52:25.357360 #12948] INFO -- : Writing myproject/public/assets/twitter/bootstrap/glyphicons-halflings-regular-946071b70245967633bb3a774c60f3a3.ttf
I, [2013-11-07T16:52:25.367360 #12948] INFO -- : Writing myproject/public/assets/twitter/bootstrap/glyphicons-halflings-regular-d7e2274ad1d940a0b2ce7480810ab223.woff
etc ...
All assets are working fine except these 3 font files. I searched all day long and didn't find anything. It seems rails is looking for the version without hash of these 3 files but rake generates them with hash
my config/production.rb :
config.cache_classes = true
config.eager_load = true
config.consider_all_requests_local = false
config.action_controller.perform_caching = true
config.serve_static_assets = true
config.assets.js_compressor = :uglifier
config.assets.compile = false
config.assets.digest = true
config.assets.version = '1.0'
config.log_level = :info
config.i18n.fallbacks = true
config.active_support.deprecation = :notify
EDIT
I tried to override the #font-face variable but it doesn't seem to remove old variables:
#font-face {
font-family: 'Glyphicons Halflings';
src: asset-url('twitter/bootstrap/glyphicons-halflings-regular.eot',font);
src: asset-url('twitter/bootstrap/glyphicons-halflings-regular.eot?#iefix',font) format('embedded-opentype'), asset-url('twitter/bootstrap/glyphicons-halflings-regular.woff',font) format('woff'), asset-url('twitter/bootstrap/glyphicons-halflings-regular.ttf',font) format('truetype'), asset-url('twitter/bootstrap/glyphicons-halflings-regular.svg#glyphicons-halflingsregular',font) format('svg');
}
I now have glyphicons loaded but still 3x 404 errors.
Ok then.
I switched to https://github.com/thomas-mcdonald/bootstrap-sass .
Pretty same bootstrap version and no problem with it.
EDIT UPDATE
bootstrap-sass has been updated. You need to make some changes as explained on github page if you still have 404 errors.
I had the same problem. It turned out that I had to add #import "bootstrap-sprockets" in addition to #import "bootstrap" inside application.css.sass.
ADD MIME TYPE into your webserver.
You have to define how to provide woff file.
for IIS, go to your IIS and open MINE type window
click ADD and type "woff" for first input box
and "application/x-font-woff" for second box
then repeat for other extensions
good luck
the font directory is not automatically seen as a asset directory. You need to add it explicitly by setting: config.assets.paths << Rails.root.join("app", "assets", "fonts") in the application.rb file.
I am trying to compile my Rails app assets using RAILS_ENV=production bundle exec rake assets:precompile, but this doesn't compile my AngularJS assets, so my console report this:
ActionController::RoutingError (No route matches [GET] "/assets/app/views/products/index.html"):
My AngularJS assets are under "/assets/app/", so I tried to compile the angular folders by adding following into my production.rb but still not working.
config.assets.precompile += %w(app/* bootstrap/* datatable/* ....
I can find the compiled index file under this path:
public/assets/app/views/products/index-2429bd0f8fc0762dcc075e51f0306c5b.html
Any idea?
UPDATE
Also tried config.serve_static_assets = false in production, but it cause more missing assets errors
Thanks
I've worked through this in my app by using constants to get the path structure right.
my angular app is journey (yours would obviously be different)
so I declare the angular app as a module
this.journey = angular.module('journey', [
'ngResource',
'ngRoute'
]);
Then I have a file called constants.js.erb where I declare my templates
journey.constant('INDEX_TEMPLATE', '<%= asset_path('journeys/journey_index.html')%>');
journey.constant('EDIT_JOURNEY_TEMPLATE', '<%= asset_path('journeys/journey_edit.html') %>');
Finally in my services I use the constants declared as the template url
journey.config([
'$routeProvider',
'$locationProvider',
'INDEX_TEMPLATE',
'EDIT_JOURNEY_TEMPLATE',
function ($routeProvider, $locationProvider, INDEX_TEMPLATE, EDIT_JOURNEY_TEMPLATE) {
$locationProvider.html5Mode(false);
return $routeProvider.when('/', {
templateUrl: INDEX_TEMPLATE,
controller: 'JourneyIndexController'
})
}
])
This way I don't have to worry about where the files are or how rails is organising the routing.
Hope this helps
I have a Rails 4 application with
<%= javascript_include_tag "modernizr", "data-turbolinks-track" => true %>
in the head. In development, the following HTML is rendered, and modernizr is loaded:
<script data-turbolinks-track="true" src="/assets/modernizr.js?body=1"></script>
In production, the followign HTML is rendered, and modernizr is not loaded (404 not found):
<script data-turbolinks-track="true" src="/javascripts/modernizr.js"></script>
In production, /assets/modernizr.js is found and browsable.
The Rails documentation says that the javascript_include_tag should generate
<script data-turbolinks-track="true" src="/assets/modernizr.js?body=1"></script>
In production, my stylesheet_link_tags are fine, linking to the /assets/ directory.
Why is the javascript_include_tag linking to /javascripts instead of /assets in production, and how can I fix it?
One of the usage statements for AssetUrlHelper indicates it will produce /javascripts/ urls
like what you are seeing:
# asset_path "application", type: :javascript # => /javascripts/application.js
(from asset_url_helper.rb line 117 - [1])
This code looks like it can only be reached if the precompiled asset is missing
so it would appear that your asset compilation is not working (my deployments usually
fail when that happens, so maybe yours isn't even firing).
The same asset_url_helper.rb calls the /javascripts/ part 'extname' and
uses the following map to know how to generate the name:
# Maps asset types to public directory.
ASSET_PUBLIC_DIRECTORIES = {
audio: '/audios',
font: '/fonts',
image: '/images',
javascript: '/javascripts',
stylesheet: '/stylesheets',
video: '/videos'
}
A new Rails 4 app has this in the config/environments/production.rb
# Do not fallback to assets pipeline if a precompiled asset is missed.
config.assets.compile = false
which seems to match the behavior you are seeing.
By default, Rails only precompiles application.js, application.css and any images it finds in the assets path. Therefore, in production mordernizr will not get precompiled and thus the javascript helpers will not be able to find the file.
In order to fix the issue, you can add modernizr to the precompile list by modifying the following config in production.rb
config.assets.precompile += ['modernizr.js']
For more information see the Rails Guides
Be sure to precompile your assets in production by running this command:
RAILS_ENV=production bundle exec rake assets:precompile
The Rails Guide on the asset pipeline can give you more details: http://guides.rubyonrails.org/asset_pipeline.html#precompiling-assets
I have a new application using Rails 4 deployed on Heroku with :
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
my javascript application.(fingerprint).js called from the src: assets/application.js
i think your problem come from something into your production.rb who define assets from another location.
So maybe you can add Moderniz.js to
config.assets.precompile = ['.js', '.css', '*.css.erb']
in config/production.rb
Or simply require modernizr script into your application.js
//= require mordernizr
and remove the modernizr script call into your layout.
<%= javascript_include_tag "modernizr", "data-turbolinks-track" => true %>
Can you check from where your application.js is served into your production environment ?
It may be because this file needs to be in /vendor/assets/javascript instead of /app/assets/javascript. The Vendor folder is for javascript libraries, and the App folder is for your code.
A better solution than adding a tag to your layout would be adding a script reference to your application.js and let the sass compiler compress and attach it to your main javascript file.
If you don't get a definitive answer, check out:
http://guides.rubyonrails.org/asset_pipeline.html#asset-organization
I have a site running on Heroku using Compass with Saas an is working fine (compiling assets when pushing to Heroku seems to be fine).
I added a new folder inside assets to namespace other styling, like this
/app/assets/stylesheets/site/site1.css
/app/assets/stylesheets/site/site2.css
/app/assets/stylesheets/site/common/base.css.saas
/app/assets/stylesheets/site/site/site1.css.saas
/app/assets/stylesheets/site/site/site2.css.saas
...
The problem is when I visit a page that use site1.css styling I get the following error
Error compiling CSS asset
Sass::SyntaxError: File to import not found or unreadable: ../compass/css3/text-shadow.
Load path: /app
(in /app/app/assets/stylesheets/site/common/base.css.sass)
/app/app/assets/stylesheets/site/common/base.css.sass)
The line that the error refers is this
/app/assets/stylesheets/site/common/base.css.sass
#import "../compass/css3/text-shadow"
I tried both "../compass/css3/text-shadow" and "compass/css3/text-shadow". In both cases I got the same error.
Any idea how to solve this?
Solved.
I needed to specify on production.rb file the additional files to compile
config.assets.precompile +=
Dir["#{Rails.root}/app/assets/stylesheets/site/site/*.*"].collect {|s| "site/" + File.basename(s).gsub(/.scss|.sass/, '') }
Now is working fine.