Is it possible to have different assets for different areas of a site in Rails. For example, in my admin area, I'm using bootstrap but this is getting loaded in non admin areas too. I guess it's to do with my folder structure but I've tried moving it and haven't really had any luck.
Anything admin related is where you'd expect a normal controller, view or asset except it's nested within an admin folder. E.g.
App > Assets > Stylesheets > Admin
You can customise the asset pipeline to whatever you require.
described in detail here:
http://guides.rubyonrails.org/asset_pipeline.html#manifest-files-and-directives
also here:
http://railscasts.com/episodes/279-understanding-the-asset-pipeline
Note in your app/assets/javascripts/application.js this little line:
//= require_tree .
which instructs sprocket to load all files in your assets javascript folder tree. Change this this line to limit to specific files.
Related
I am trying to integrate a Bootstrap framework into a Rails project. The framework comes with lots of html templates which I would like to use. Each template has several links to assets (css, images, js) which are all named something like:
href="assets/css/stylesheet.css"
By including the framework's files in the Rails vendor/assets folder I can access all these resources if I rename them all to
href="assets/stylesheet.css"
or using a Rails helper, but I don't want to have to do that for every single asset because I'd rather leave as much of the framework intact as possible for updates and such, and besides that would be super annoying to deal with.
Is there a way to have Rails access these files the way they are currently written?
(I know for example this is possible with Laravel Elixir).
The standard procedure here is to add references to these in your application.css or equivalent file. There's usually a comment in that master file that looks like this:
/*
*= require_tree .
*= require_self
*/
You can add other files to that manually, or just put your assets in there in a way that they get hoovered up properly by the asset pipeline.
Doing this means they all get packed down into the same distributable CSS file when you roll this out to production.
If you do want to compile this separately for whatever reason you need to alter config/initializers/assets.rb and add things like:
Rails.application.config.assets.precompile += %w[
assets/stylesheet.css
]
That will force-compile another unrelated asset.
I am developing a rails application starting from webarch template. I know that adding the whole assets folder in the public/ folder will link the assets with my views, but it would not be taking advantage of the assets pipeline functions. The template has a lot of plugins and different options and one generally does not use all of it. The assets folder's size is 30MB.
I though about putting it inside vendor/assets and using it with the asset pipeline but this generates two problems:
I would be serving 30MB of minified code and using a small percentage of it in my app.
I would have to manually rewrite the whole assets folder to use links the way asset pipeline wants it (javascript_include_tag "file" to serve file.js). Of course, I would do this via a script but it still seems like a problem someone should have encountered first.
Since neither vendor/assets and public/ folders seem to be a proper location for these files I would like a better option (or a way to make the later options work better).
A solution to keep your files under asset pipeline when they are too big to reasonably be left in one single minimified asset file is to split your assets by categories, compile those categories in different minimified files, and include them in your views when needed.
I do it for an app that contains several "heavy" javascripts components that are located in different area of my app and are not often used.
1- Organize your file structure
In app/assets/javascrips and app/assets/stylesheets create one directory per category we are going to create. Examples:
app/assets/javascrips/common
app/assets/javascrips/admin
app/assets/javascrips/user_account
2- Create your manifests
In app/assets/javascrips and app/assets/stylesheets create one manifest file per category and have them included the related directory
File app/assets/javascrips/common.js
//= require jquery
//= require_tree ./common
File app/assets/javascrips/admin.js
//= require_tree ./admin
File app/assets/javascrips/user_account.js
//= require_tree ./user_account
3- Add your manifests to rails precompile list
You can do it in config/application.rb file, but when it gets big it is preferable to create an initializer file config/initializers/assets.rb
Rails.application.configure do
config.assets.precompile += %w[common.js admin.js user_account.js]
end
4- Include them in your views and layouts, and set-up your javascript libraries.
Import the assets files into layouts and views. It can be a good idea to create several layouts for different area of your application that would be using common assets files. The methods to use are
stylesheet_link_tag 'manifest_file' and javascript_include_tag 'manifest_file'
And keep in mind you may have to tell your javascript plug-ins they need to use the miniminied file when dynamically loading files. For them you can use a configuration .js.erb file. Example:
File app/assets/javascrips/admin/plug-in_config.js.erb
PLUGIN.config('dynamicFileName', '<%= javascript_path('manifest_file') %>');
I found a nice template online and want to use it for my rails app homepage. I decided to use the high voltage gem and read through its readme. I managed to get the routing right but I could not find the appropriate path/folder for the numerous asset (css, js, svgs and sass) files which come inside the template zip file, and which obviously make it look nice.
I tried putting them into the assets folder of my rails app, which got some of the "features" working, but svgs and images didn't display... and it screwed my existing pages. Reading through the Rails documentation I then tried storing the template assets into the vendor folder, which did not work either.
Where should I store the assets for my template-inspired homepage for them not to screw the appearance of my normal/app pages? Which paths should I use in my html to call them?
If you have troubles with images, take a look at image references in the template source. You can see a reference to image like this :
background-image: url('images/top-1280.svg')
which would not serve this image in Rails.
I would suggest to find and replace all the image references in your css (or scss) files.
Try this :
background-image: url(image-path('top-1280.svg'));
which is the proper way for Rails 4.
The differences:
in Rials you have a helper method "image-path" and you do not prefix the image file with directory name.
It is important to check in your "app/assets/stylesheets/appilcation.css" if there are lines like:
*= require_tree .
*= require_self
Now about Font Awesome : I see that in this theme you are about to use Font Awesome. I would suggest using the gem for Rails:
In your Gemfile:
gem 'font-awesome-sass'
I think the theme you have chosen is very nice. Thank you for sharing it, it will be useful for my current project.
I have a best practices question regarding one-off javascript plugins and their role in the Rails asset pipeline.
I'm new to Rails, and am working on a new project. The site template I'm using uses a large collection of js plugins for added functionality. (eq chartjs.org, ckeditor, and about 40 others) Since these are needed on a page-by-page basis, I'm not sure if I should really load them all in the application.js manifest.
Currently, I have the template's assets under the /vendor directory and only the core assets are being loaded from my application.js manifest.
Thoughts on how/where to include the plugins?
As i know that rails default added all js file include in application.js by //= require_tree . so, you can remove it and add only those file which you want to added. and if you want to run only specific function then you can use location.pathname with condition and it will work for only that specific page.
How should one provide assets in an engine in Rails 3.1? Where should they be located and can they be included automatically?
(originally asked by Tomas Celizna)
The paths to the all the engines' assets folders are automatically loaded.
The assets themselves are not loaded by default. This is understandable as the loading is done with require_tree ., which loads all css/js from the current folder (i.e. the main application assets' folder) but doesn't say anything about the engines assets.
The easy solution is to ask the user to require the js/css in application.js/css or wherever else it is needed. As the paths are loaded correctly, the user only need to specify the name of your asset (I'd recommend using the name of your engine). Example:
Appended to main_app/app/assets/javascripts/application.js:
//= require your_engine_name
If you have split your js in different files, your file your_engine_name/app/assets/javascripts/your_engine_name.js could have the following:
//= require_tree .
This will load all js files in your_engine_name/app/assets/javascripts/, as the "." refers to the local folder (in this case the folder of your engine's javascripts).
Note that ActionView::Helpers::AssetTagHelper.register_javascript_expansion appears not to have any effect when config.use_sprockets is set. I hope they'll at least put a warning in that case.
If you have a rake task to install your engine, then you could do the append to application.js.
Another way for the user to include it is to insert <%= javascript_include_tag "your_engine_name" %> in the erb layout.
I don't think there is a way to have it inserted automatically