Building Frontend & Backend in One Rails App
Most of my apps have some kind of administration, which is separated from the normal users’ part. When I started with Rails, understanding assets was a challenge I was battling hard. But separating frontend and administration parts was even higher level for me!
The tricky part is in routes and setting up the assets in a right way.
I like to keep things clear, so to keep those two parts separated I generate them into subfolders:
> rails g controller frontend/home index
> rails g controller admin/dashboard index
Files generated are as you expect:
class Frontend::HomeController < ApplicationController
class Admin::DashboardController < ApplicationController
But I want each of my controllers having a specific layout, of course. The easiest way to achieve this is to create a parent controllers, set them a layout (I will create those layouts later, don’t worry) and inherit from them (I don’t generate these parent controllers as I don’t want any tests and fixtures to be created, I just create new files manually):
class FrontendController < ApplicationController
class AdminController < ApplicationController
Now to inherit
DashboardController from those parents just update them as following:
class Frontend::HomeController < FrontendController
class Admin::DashboardController < AdminController
Routes seems to be easy, but there is one small hitch. I want my admin part to be running under the
localhost:3000/admin folder, but the frontend should be running on the root:
namespace :admin do
resource :dashboard, only: :index
root to: 'dashboard#index'
scope module: 'frontend' do
resources :home, only: :index
root to: 'home#index'
At first I set the namespace for
/admin part of the url by
namespace :admin do . On the next row I set standard resource for dashboard, but constraint it just to
index action. As the last for the admin I set root for the admin part, so
/admin is mapped to
As I have written above I don’t want the frontend to be mapped to any subfolder, so I’m telling to Rails I’m gonna using controller in a frontend module (remember
Frontend::HomeController in the controller above?), but by
scope module... I’m not mapping it to any subfolder in url.
The rest is the same as it was for the admin.
admin subfolders already created (they were created when I generated the controllers). If not, create them.
Let’s do same renaming and copying here now:
And the same for stylesheets:
It should look now like this (among other files and folders, I’m showing here only the important files):
Rails must know about these new asset files to be able to compile them. Add this 4 lines to the end of assets config file:
Rails.application.config.assets.precompile += %w( admin.css )
Rails.application.config.assets.precompile += %w( admin.js )
Rails.application.config.assets.precompile += %w( frontend.css )
Rails.application.config.assets.precompile += %w( frontend.js )
And at the end I’m returning back to the start (as I promised in the controllers part) — I have to setup layouts. In
/app/views/layouts I create two folders:
admin . I copy
admin subfolders in
# change the first parameter from 'application' to 'frontend':
<%= stylesheet_link_tag 'frontend', media: 'all', 'data-turbolinks-track': 'reload' %>
# change the first parameter from 'application' to 'admin':
<%= stylesheet_link_tag 'admin', media: 'all', 'data-turbolinks-track': 'reload' %>
And that’s it! Not that hard when you know what to do ;)
Into comments, I will answer.
○ I’m still brand new with my CodeRocket. If you like what I’m doing, help me to get to a broader audience by clicking ❤ below. I will appreciate it!
And follow me to see what I’m working on! ○