The title pretty much says it all...
I tried adding /app/assets/fonts/font.woff and referencing it from my css file with /app/assets/fonts/font.woff but it doesn't seem to work.
Any ideas?
It turns out that the asset pipeline that #JimLim mentioned works a bit differently in Rails 4. Full docs here, but here's the relevant excerpt:
2 How to Use the Asset Pipeline
In previous versions of Rails, all
assets were located in subdirectories of public such as images,
javascripts and stylesheets. With the asset pipeline, the preferred
location for these assets is now the app/assets directory. Files in
this directory are served by the Sprockets middleware.
Assets can still be placed in the public hierarchy. Any assets under
public will be served as static files by the application or web
server. You should use app/assets for files that must undergo some
pre-processing before they are served.
In production, Rails precompiles these files to public/assets by
default. The precompiled copies are then served as static assets by
the web server. The files in app/assets are never served directly in
production.
So I ended up moving my /fonts directory into /public adjusting my paths in the #font-face declaration accordingly and everything works fine.
You have to tell Rails to include your fonts directory in the asset pipeline, as follows:
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
Finally, let Rails figure out the correct path for you, so you don't have to mess with the prefix app, app/assets etc. Add a .erb extension to your css/scss file e.g. application.css.erb, and use embedded ruby:
src: url("<%= asset_path('fonts.woff') %>");
(Related question)
Related
Rails version: Rails 3.2.15
Ruby version: ruby 1.9.3p551 (2014-11-13 revision 48407)
Issue:
My rails app in development mode is serving files from storage folder which is at root level. The file format is pdf and mp4.
By serving i mean if I hit the route directly Eg: http://localhost:3000/assets/file_name.pdf is not throwing error and instead is opening on the browser.
I want to put these files behind authentication and hence tried putting it outside app/assets and public/ folders.
I'm not sure why is it able to serve any file outside those directories. Here are few of my configs for reference:
config.assets.enabled = true
config.assets.compress = false
config.assets.debug = true
Please help...
You must have a symlink within the assets directory, a setting in the pipeline, a monkeypatch in asset pipelines, or more likely, or the file itself is there's an 'assets' controller or route. Look carefully :)
Turns out there was some code which when you access the files from app/assets copied those to lib/assets as well. Hence, even after deleting the assets from app/assets it was serving a few files from lib/assets
2.2 Asset Organization
Pipeline assets can be placed inside an application in one of three locations: app/assets, lib/assets or vendor/assets.
That's the official documentation for order and organization of assets.
The image(s) is located in assets/images/new_design/new_img1.png.
In the new_layout.css.scss file, I have the following line:
.top_bg {
background-image: url("/assets/new_design/new_img1.png");
...
}
But the image is not rendered. I've tried also:
background-image: image-url("/assets/new_design/new_img1.png");
background-image: url("/assets/new_design/new_img1.png");
background-image: url("new_design/new_img1.png");
But none of these worked. On localhost I am able to render it successfully with the third approach, but I don't know how to do it on the production server.
Any help appreciated, thank you!
Images placed inside of the /assets/ folder are brought into Rails using the asset pipeline. So, if you want to access them you'll need to append .erb to your file so you can put some ruby in to your css file that'll be evaluated by rails.
Change new_layout.css.scss to new_layout.css.scss.erb
Now that you've got a file that can run helpers, use the image helper to generate the path for your image:
background-image: url(<%= asset_path 'new_design/new_img1.png' %>);
Should work. This utilizes an asset path helper, that looks through your asset folder for the appropriate resource and created a direct link.
If you're looking to directly access images without the pipeline, you can place them in the public folder of your application, but then you lose the value of using the asset pipeline.
As an addition, for production... You may need to precompile your assets before pushing to production if your process doesn't include this step in the launch.
Run the following to precompile your assets:
rake assets:precompile
I've had the same problem before, and have been able to get away with having my image in my
app/assets/images
directory and be able to call the image using
background-image: image-url("project-image.jpg");
Btw. In production mode, assets are by default precompiled by the Asset Pipeline. All files included in application.js and application.css asset manifest are compressed and concatenated into their respective files of the same name, located in the public/assets folder.
Also, to include additional assets, you may specify them using the config.assets.precompile configuration setting.
```config.assets.precompile += %w( some-name.css )
I'm working on integrating a javascript library into the rails asset pipe line.
The javascript expects a fonts/ and images/ folder to be available at the root level, but I think Rails is precompiling these to assets/fonts/ and assets/images.
The reason I think this is the case is because if I put the fonts and images folder directly into the public folder everything works.
But if I place fonts and images in the apps/assets/fonts and apps/assets/images the javascript returns 404 errors for the requested fonts and images.
Is there somewhere in Rails config that I can tell Rails to precompile these fonts and images folders to public/ instead of public/assets/?
You should use the asset pipeline helpers in your case, especially because of the fingerprinting strings that will be appended to the name of the assets.
to do that:
1.change the references to the font/image files to
using the asset helper
<%= asset_path 'fontFileNameAndExtension' %>
using asset image helper
<%= image_path 'imageFileNameAndExtension' %>
2.change the extension of your .js file to .js.erb
3.include the name of your js file into application.js as
//= require YourJsFileName
4.execute the pre-compile again, and you might want to clean the compiled assets first:
rake assets:clobber
rake assets:precompile
I have a rails app configured on my Raspberry Pi 2. It's on my local LAN getting the same ip over and over from the router. It has mDNS configured so I can access it at mypi.local.
Configured apache2 and passenger for that local domain. Now when I enter mypi.local in my browser I see the app. Great!
It works, but for some unknown reason I get all the app's html but without any CSS and Javascript. I can interact with parts of the site which are not Javascript dependent and my browser's default CSS kicks in.
Any ideas?
If I launch WEBrick and try mypi.local:3000 everything works as expected.
this is because things work differently in development as compared to production.
few thing to note:-
No CSS or JS files will be available to your app through the asset pipeline unless they are included in other files OR listed in the config.precompile directive.Only application.css and application.js are available by default of all the CSS and JS files.
Every file that is not a Javascript file or CSS file that is in the app/assets folder will be copied by Rails into the public/assets folder when you compile your assets.So if you want to add some web fonts, you could make an app/assets/fonts/ folder and put your fonts in there, these will then be copied to public/assets/fonts folder when you compile your assets. Note that your app/assets/stylesheets/fonts.css.scss file that references those fonts will NOT be copied over unless you either added it to the config.assets.precompile directive or required it from your application.css
for config.assets.compile...If it is set to "true" (which it is by default in development) then Rails will try to find a Javascript or CSS file by first looking in the public/assets directory and if it can't find it, will hunt through your app/assets folder looking for the file. If it finds it in app/assets it will go ahead and compile on the fly and then serve this asset up.
The problem with this is that you don't notice it happening in development, then you commit everything and push to production and BOOM, everything is broken with 500 errors because production has config.assets.compile set to "false".This prevents the app from "falling back" and trying to load the file directly instead of using the asset pipeline.
# Don't fallback to assets pipeline if a precompiled asset is missed
config.assets.compile = false
Why don't you just have this set to "true" in every environment? Well, because it is sloooooow. And you don't want slow in production
Run RAILS_ENV=production rake assets:clean assets:precompile
check public/assets directory and verify that assets are compiled..if its not empty...that means asset pipeline is working but path is not correct.use asset_helpers to set the path of assets in css files.
I have a bunch of static assets ( not jpg, css, & js) - rather files like pdf forms, xls that I need to serve to users. They rarely change. Before I used to store them in public folder, but with the introduction of the assets pipeline in rails 3.1 what is the best place to store files like that now now?
Actually I just tested it by creating a folder in app/assets/files and sticking my xls files in there, and rake assets:precompile task just picked it up.
Also this needs to be added for Rails < 3.1:
# Enable the asset pipeline
config.assets.enabled = true
config.assets.paths << "#{Rails.root}/app/assets/files"
The best place for items like this is still in the /public directory, remember to have your web server serve these assets directly also.
The assets directory is only needed if you want to take advantage of the asset pipeline. The asset pipeline handles things from compressing and compiling .coffee and .less or sass files to compressing your js and css into one file so your webserver only has to serve one file for each.
When you compile your assets with the rake task bundle exec rake assets:precompile they are moved to your public directory anyhow.