Building beautiful Admin Dashboard in Rails 5.0

There are various frameworks(or can say Rails plugins) to build admin dashboard namely: Active Admin, Rails Admin, Forest, Administrate, and so on. Among these I choose Active Admin because its elegant and very customizable.

Process

# in Gemfile
gem 'activeadmin', '~> 1.0.0.pre4' # as of now
gem 'inherited_resources', github: 'activeadmin/inherited_resources'
# Plus integrations with:
gem 'devise'
gem 'cancan' # or cancancan
gem 'draper'
gem 'pundit'

Setting up Active Admin

After installing the gem, you need to run the generator. Here are your options:

  •  If you want to use an existing user class, provide it as an argument:
    rails g active_admin:install Admin

    I had the model Admin already

    # as of now# as of now   invoke devise
     generate No need to install devise, already done.
       invoke active_record
       create db/migrate/20161219091135_add_devise_to_admins.rb
       insert app/models/admin.rb
        route devise_for :admins
         gsub app/models/admin.rb
         gsub config/routes.rb
       append db/seeds.rb
       create config/initializers/active_admin.rb
       create app/admin
       create app/admin/dashboard.rb
       create app/admin/admin.rb
       insert config/routes.rb
     generate active_admin:assets
       create db/migrate/20161219091140_create_active_admin_comments.rb

    If you are using Single Table Inheritance for Admin model

    you need to delete the file 20161219091135_add_devise_to_admins.rb . You might have already set devise for you model, it might put devise code yet again; so, make sure its correct. In my case I have set for User model and Admin is inherited from User model.

  • You may see this error
    • Wrong OmniAuth configuration. If you are getting this exception, it means that either:
      
      1) You are manually setting OmniAuth.config.path_prefix and it doesn't match the Devise one
      2) You are setting :omniauthable in more than one model
      3) You changed your Devise routes/OmniAuth setting and haven't restarted your server
  • If you come across with this error; you need to remove the line from routes.rb
    • devise_for :admins, ActiveAdmin::Devise.config
  • You might also want to change _admin to _user in the file initializers/active_admin.rb

Points to be noted

I encountered this error. Reason was I forgot to change destroy_admin_session_path` to destroy_user_session_path

undefined method `destroy_admin_session_path' for " <ul class=\"header-item tabs\" id=\"utility_nav\"></ul>\n":ActiveAdmin::Views::TabbedNavigation

`add_route’: Invalid route name, already in useThen you have to generate the asset files.

$ rails generate active_admin:assets
 create app/assets/javascripts/active_admin.js.coffee
 create app/assets/stylesheets/active_admin.scss

Also, it requires you to use jquery-UI rails; it uses datepicker in date fields. So, you have to add following in Gemfile

gem 'jquery-ui-rails', '~> 5.0.4'

newer version wont work with ActiveAdmin because they have different directory structure for asset. You can hack to make it work, but does it really worth it?

# Error you see if you use latest version of jQuery-UI
ActionView::Template::Error (couldn't find file 'jquery-ui/datepicker' with type 'application/javascript'
Checked in these paths: 
 /home/john/projects/iisifix/app/assets/config
 /home/john/projects/iisifix/app/assets/images

then, you will seed your first admin user, via seed file or from Console

Admin.create!(email: 'admin@example.com', password: 'password', password_confirmation: 'password', confirmed_at: Time.now)

Finally, you will restart the server

Now, try the URL http://localhost:3000/admin, enter the admin credentials and get in.
See Docs here https://github.com/activeadmin/activeadmin/blob/master/docs

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s