CODEWITHSUNDEEP
ruby-on-railsasset-pipelineassets
ltdev
ltdev

Reputation: 4467

Separate frontend assets from admin assets

I'd like some feedback if possible. I have a rails app with this folder structure

rails
- app
-- controllers
--- admin
--- front

So basically I have cotrollers on both front and admin namespace. However the assets have the default setting at the moment, like this

assets
- stylesheets
- javascripts

so application.scss loads all css for both front and admin

*
*= require_tree .
*= require_self

How can I specify the front layout to load only assets required for the frontend (and not admin) and the admin layout to load only the admin assets and not front assets?

Upvotes: 3

Views: 915

Answers (1)

Gerry
Gerry

Reputation: 10507

You can create two manifest files (instead of using the default application.js/application.scss) and include them in different layouts (one for front and one for admin).

For example, you could you use this folder structure:

assets
- javascripts
-- admin
-- front
- stylesheets
-- admin
-- front
- admin.scss
- front.scss

Inside each admin/front folder you can add the specific styles/scripts needed, then ensure your manifest files look like this (only showing styles manifests, same goes for scripts):

admin.scss

/*
 * Manifest file for admin styles, to be compiled into admin.scss
 *
 *= require_self
 *= require_tree ./admin
 */

front.scss

/*
 * Manifest file for front styles, to be compiled into front.scss
 *
 *= require_self
 *= require_tree ./front
 */

Now you must create your layouts (in app/views/layouts):

admin.html.erb

<!DOCTYPE html>
<html>
  <head>
    ... title and metas
    <%= stylesheet_link_tag 'admin', media: 'all' %>
    <%= javascript_include_tag 'admin' %>
  </head>
  <body>
     ... layout content
  </body>
<html>

front.html.erb

<!DOCTYPE html>
<html>
  <head>
    ... title and metas
    <%= stylesheet_link_tag 'front', media: 'all' %>
    <%= javascript_include_tag 'front' %>
  </head>
  <body>
     ... layout content
  </body>
<html>

Finally, you must add your manifest files in config/initializers/assets.rb to be precompiled:

... some code
Rails.application.config.assets.precompile += %w(admin.scss front.scss)
Rails.application.config.assets.precompile += %w(admin.js front.js)

Now you only need to use the desired layout (admin.html.erb or front.html.erb) when rendering your views.

Upvotes: 4

Related Questions