Ruby on Rails asset organisation folders - ruby-on-rails

I'm using ruby on rails 5. What is the difference app/assets, lib/assets and vendor/asset?
If I write my own js scripts should they be included in the app/assets? How about if I use a bootstrap library where should I put it at?
And regardless which folder they are in, i am able to access them using javascript_include_tag? Example:
javascript_include_tag "xmlhr"

As described in the asset pipeline guide:
app/assets is for assets that are owned by the application, such as custom images, JavaScript files or stylesheets.
lib/assets is for your own libraries' code that doesn't really fit into the scope of the application or those libraries which are shared across applications.
vendor/assets is for assets that are owned by outside entities, such as code for JavaScript plugins and CSS frameworks. Keep in mind that third party code with references to other files also processed by the asset Pipeline (images, stylesheets, etc.), will need to be rewritten to use helpers like asset_path.
Me, I only use app and vendor. My stuff goes to app, naturally. And 3rd party stuff (jquery plugins, bootstrap themes and whatnot) goes to vendor.

app/assets
It should include all the assets written by you and only relevant to your project.
lib/assets
It should include all the assets which are created by you but can be extracted to be used by another project.
vendor/assets
It should include all the assets downloaded/purchased from third party like Bootstrap.

Related

Rails assets app/assets and vendor/assets

I have read following in an article
All of your custom Javascript, stylesheets, and images should go in
the app/assets/.
All third-party code that you are using (e.g. jQuery,
backbone.js, etc.) should be placed in the vendor/assets/ directory
But I did not find in the article - Why it is recommended so, any reasons?
There is no restriction that you cant put third party jQuery/CSS in the app/assets folder.
But its recommended to put the third party assets in the vendor file. It will be easily manageable for the large applications and will save a lots of time in the long run.
Well I presume you are clear with app/assets/ folder.
In vendor/assets you put all third-party code that you are using.
So after you put that code in assets you need to require them in application.css and application.js.
This is doing on this way because rails by default look in vendor/assets/ and it is easier to manage third-party code.

What is the proper way to link big template assets into rails erb files?

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') %>');

Spree application and main rails application CSS loading

I have a Spree application and some pages that are not part of the spree application. My problem is that styles are shared between those pages. (they look similar, but they have their own asset locations)
How do I do it so I don't have to maintain two sets of stylesheets/JS files?
Just extract common stylesheets to separate CSS files then include them in your applications:
use build process (such as Asset Pipeline)
symlinks (not a best way but I think it will works too)
submodules (if you are using Git)
put common stylesheets to separate gem and use it as part of Asset Pipeline (like any Rails gems with assets inside)

JS and CSS in Rails 4

In Rails 4, the JS or CSS files, should I putting them in vendor > assets or in app > assets?
There are 3 asset locations in Rails
/app/assets/{images,javascripts,stylesheets} for the application-specific assets.
/lib/assets/{images,javascripts,stylesheets} for library assets. It's not very clear the boundary between this folder and the others, there is a lot of overlap. However, you normally place here assets that are shared across multiple apps under your control or libraries that don't normally tie specifically to the application.
/vendor/assets/{images,javascripts,stylesheets} for vendored assets. You should place here assets downloaded from packages where you have no control and that are not intended to be manually edited. This is the case, for instance, of bootstrap, jquery or other frameworks, as well as javascript plugins.
There is one important difference to keep in mind. Assets in /app are reloaded on every request. The other folders are not autoreloaded, thus if you make changes you will need to restart the server.
Your CSS goes in app/assets. CSS from 3rd party vendors goes in vendor/assets.

Understanding the Rails 3 Directory Structure

I've found several sites online that explain the DIR structure of a Rails app, but I'm still not clear on a few, mainly:
/vendor
/lib
/public
What should go where? I want to know the best practice. For example, I have jQuery plugins, should those be located in /vendor? /public? /lib? I've read all 3 from different sites online.
Thanks
Vendor is third party code / libraries, so, yes, a good place for jQuery plugins.
Public is for static assets, stuff that gets no benefit from being in the asset pipeline.
Lib is generally used to contain your code that is not specific to the app. i.e. stuff you use in multiple apps. There is a trend to put domain logic in lib e.g. domain classes not based on ActiveModel. Gary Bernhardt (https://www.destroyallsoftware.com/) is a proponent of this.
Typically the contents of /public are directly served by the web server (nginx, apache etc.) without intervention from rails, so traditionally all of your static assets (images, stylesheets, javascripts etc.) went in here. You can still put your javascript in there but it's a bit old fashioned.
Rails 3.1 introduced the asset pipeline which changed all of this. Assets in app/assets, lib/assets and vendor/assets all get servers up by the asset pipeline. Normally your application specific assets would go in app/assets and 3rd party libraries (such as a query plugin) would go in vendor/assets. If you were developing your own set of jquery plugins you might put them in lib/assets. Assets will 'work' no matter where you put them though - it's just a question of organisation.
Gems can also have their own asset folders, for example the jquery-rails gem bundles jquery and allows your app to serve up jquery without actually copying it into your app. I find this even neater than putting things in vendor/assets.

Resources