I am hoping someone can explain how I can do the following with and without asset pipline in rails.
I have 3 themes that I need to use in a single rails application.
Each theme currently has the following structure:
/css/..
/fonts/..
/images/..
/js/..
I may add more themes in the future, so I would think it would be best to have each theme in its own folder, not spread around.
Can I use asset pipline with this theme requirement?
If not, how can I do it w/o using asset pipeline?
Firstly, I recommend you to use the asset pipeline as it improves the web application static assets loading performance by precompilation and setting caching headers for you.
For three themes viz. theme1, theme2, and theme3 this is what I'd do:-
Create individual layouts called theme1.html.erb, theme2.html.erb, and theme3.html.erb within the app/views/layouts directory.
Create stylesheets called theme1.scss, theme2.scss, and theme3.scss within the app/assets/stylesheets directory.
Create JS files called theme1.js, theme2.js, and theme3.js within the app/assets/javascripts directory.
Create subdirectories called theme1, theme2, and theme3 within the app/assets/images directory.
You can add the fonts directly into the stylesheets directory as they'll most probably be unique for every theme.
Reference the images using asset pipeline helpers as you'd do normally do after prepending the relative directory path for that theme in context to the app/assets/images directory before the image name.
Also, do not forget to import/require the files or add them to the asset compilation path within config/initializers/asset.rb file.
Related
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.
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') %>');
What's considered an "asset" in the Ruby on Rails universe?
Are user generated files, such as images uploaded by the user, considered assets? Where should they be stored in the standard file structure of a Rails project? Should they be kept clear of any asset related directories like:
app/assets
lib/assets
public/assets
Relevant: The Asset Pipeline
Generally asset is anything that browser loads after it gets the HTML page. Meaning javascript, css and any images. But as you pointed out there are two different image types in a rails project.
1) the images related to your css and layout design, those go under the app/assets/images
2) the images that your users upload, those normally go into the public/system or public/uploads folder depending on what you use to receive the uploads
The lib/assets (or sometimes vendor/assets) is where you supposed to place js/css/images related to your front-end design and provided by third party libs. Say if you want to pull in some css or a js framework, that were you should place it.
And finally public/assets is where rails will compile your layout assets from the app/assets and vendor/assets folders when you run rake assets:precompile task for production.
To have it short, your design stuff goes to app/assets, and the user uploads go into public/system
User-uploaded files are not part of assets, and should definitely be kept clear of asset-related folders. You should put them somewhere in your public directory. I put mine in public/uploads, which is a common convention. And then you should ignore those files in git (or whatever VCS you're using).
Assets are basically: javascript, stylesheets, fonts, and images which are part of the site design itself, not part of the user-uploaded content.
Can I use assets that aren't pre-compiled along with assets that are inside a rails application?
I have separate CSS files uploaded through a web interface and don't want to precompile my assets everytime I add a new CSS file because a) that would be way too manual of a process and b) the styles all go to one page, like a theme, and so use the same class names. These CSS files do not require any processing as they are simple CSS files.
The CSS files are in a sub-folder of the assets folder inside the public folder: public/assets/styles/.
Is this possible?
Yes it is possible.
If i'm not wrong this SO link is very close to what you were trying to achieve
Rails assets:precompile only one asset?
Hope it helped !
How do I install a custom theme for twitter-bootstrap with the rails asset pipeline?
Should I create a new folder under assets and dump in all of the css, js, image and font files for the theme?
Update:
I put all files in my downloaded theme (except the html example files) into a folder in app/assets and added this folder to my asset paths in application.rb:
config.assets.paths << Rails.root.join("app", "assets", "bootstrap_theme")
I added some markup using css classes from the theme but it's not using the theme..
Update: I see that the boostrap theme has the compiled core bootstrap files included inside it. Should I take this to mean it's not intended to be used with Less?
Also, should I precompile every asset file individually for production (in application.rb) and in each view include the specific ones needed (and include them after the core bootstrap files)? Then I guess to make any overrides to the theme they'd need to be made directly in the theme files?
Update: I think the problem was that I was requiring the theme css files in my manifest after the bootstrap_and_overrides, assuming the idea of the theme was to change the bootstrap defaults. But requiring some of the theme css before the standard bootstrap_and_defaults works better. It means needing to manually pick and choose which css to load before and after bootstrap.
I never proved the twitter bootstrap in a rails application but I searched before how can I do it.
If you install the gem less-rails-bootstrap or bootstrap-sass, you can follow the instructions to modify the theme here.
I hope it helps.