I have a website that contains a registration page on the front end.
It also contains an admin panel which uses an admin theme.
Since the javascripts and css files of the theme are placed on assets folder, they will be loaded on the admin pages as well as on the FRONT END.
Is there a way to organise the theme files on the asset folder so that they are not loaded on the front end?
Add an admin_application.(css & js) file and do require all the css and js used for admin panel into that and stub all the front_end assets.
You can stub the file like
in js
//= stub file.js
in css
*= stub file.css
Note: You should use different layout for both front_end and admin_panel.
Related
I downloaded bootstrap theme files, it includes the static HTML, CSS and js files. If I'm using the same bootstrap theme in rails app, how can I integrate those files with rails application
Broadly/simply:
When using the rails 4-5 asset pipeline:
copy the js files to app\assets\javascript and require in application.js
copy the css files to app/assets/stylesheets and require in application.css
The index.html page (or in general, the static html pages) will have to be split-up into
a "layout", e.g. app/view/layouts/application.html.erb (or use your preferred templating framework, I prefer haml/slim) and edit it to keep header/footer elements only (aka the repeating elements for all pages, or a set of pages)
copy the remainder (the contents) to the main index.html.erb of the controller where you want to copy/use the template
I'm using browserify-rails to include Angular UI Grid in my Rails project. My application.coffee contains the following:
require('angular-ui-grid')
This works in the sense that includes node_modules/angular-ui-grid/ui-grid.js, but it doesn't handle any of the stylesheets.
How can I get Angular UI Grid's stylesheets into my application as well?
The JavaScript includes and CSS includes are handled separately.
Your require('angular-ui-grid') call above handles the JS side of things since it's in the application.coffee manifest file.
To include the stylesheets, you'll need an additional require in the application.scss (or whichever file is your main CSS manifest).
browserify-rails does not include the node_modules directory in its asset load paths by default, so you have to add it inside the assets.rb file like this
# Add additional assets to the asset load path
# Rails.application.config.assets.paths << "node_modules"
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') %>');
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.
I'm somewhat new to the Rails asset pipeline so I might be doing something wrong. I'm trying to use Active Admin for my backend and twitter bootstrap css for my front end application.
I added the bootstrap.css to /app/assets/stylesheets then also added:
//= require bootstrap
to application.css - then I did a precompile of the assets locally
It seems to work fine but some of the styling isn't coming through exactly and I think it's because active admin's css is overriding it.
My understanding is that the application compiles the css assets into the application css public asset and the application uses that file when running.
I need to somehow separate the two and make it use twitter bootstrap css as the main css on the front end and maybe tell it not to use active admin's css files on the front end.
What's the best way to do this?
I had the same problem, and was able to fix it by moving
app/assets/stylesheets/active_admin.css.scss
to
vendor/assets/stylesheets/active_admin.css.scss
The active admin assets should be in vendor/ as mentioned in the rails guide:
"Vendor/assets is for assets that are owned by outside entities, such as code for JavaScript plugins and CSS frameworks."
Have you watched the RailsCasts video on using ActiveAdmin? In the video, Ryan shows you how to prevent the ActiveAdmin CSS from stepping on your main app CSS.
http://railscasts.com/episodes/284-active-admin
Moving info from Video into answer
In the application.css you remove:
*= require_tree .
For rails 4, Jiten K suggests adding this to production.rb:
config.assets.precompile += ['active_admin.css']
However one of the comments on that SO answer says this is not needed. I have not needed it so far.
For me changing application.css to following solves the problem:
*= require bootstrap
*= require_tree .
*= stub "active_admin"