How to Create an Admin Dashboard with Rails Activeadmin

Do you have an application that needs administrative activities from specific authenticated users? active admin is what you need. Long before active admin, developers had to go through the stress of not just building applications but also user admin dashboards through which content could be added or manipulated. Some months ago, I built an eCommerce website using rails and after implementing active admin, I realized I saved up to 30% development time compared to when I did not use active admin. Simple to implement but powerful features is how I describe activeadmin.

I am going to take you through a step by step explanation on how to setup activeadmin in any rails application.

Activeadmin is an administration framework for Ruby on Rails. Opppps!! did I just use a complicated word? Nothing to be scared of, It simply means, activeadmin provides you with a fully functional administrative dashboard in your rails administration. Enough with the praises, let’s give this app an administrative dashboard.

Step-One: Setting up a rails application

Create a rails application using the rails new command in your terminal.

~$ rails new activeadmin-application

Wait until the command is fully carried out. Open the application folder that gets created (activeadmin-application) in your preferred text editor. Go to the ruby gem main site, make a copy of the gems activeadmin and device. If you are wondering why we need device, It is a dependency of activeadmin that is used to create and authenticate admin users. Paste the two gems in your Gemfile and run bundle install.

gem 'activeadmin', '~> 2.6', '>= 2.6.1'
gem 'device', '~> 0.0.0'

Make sure to set a root route for the application and a controller to which the route maps to. This is to avoid routing errors after running the development server. To save time, we will not do that in this article but just to hint you a little bit, generate a controller with an action, and use the route of the action as the root route defined in your route file. In case you generated an articles controller with an index action, this is how you would define the root route.

root "articles#index"

Do not forget to create a view for the action to avoid missing template errors.

Step-Two: Creating models

For this example, we will use two models, article and comment in a many-to-one relationship. This means that an article can have many comments while a comment can only belong to an article.

rails g model Article content:text
rails g model Comment article:references comment:string

article:references will create a many-to-one relationship between articles and comments. The above commands will create two migration files that you will have to migrate using the command

rails db:migrate

Include the relationships in your model files.

activeadmin-application/app/models/article.rb
class Article < ApplicationRecord
 has_many :comments
end

for the comment model.

activeadmin-application/app/models/comment.rb
class Comment < ApplicationRecord
 belongs_to :comment
end

Step-Three: setting up activeadmin

Run the following command in your terminal.

rails generate active_admin:install

This will create a new folder called admin in your app directory and a migration file in the db/migrate folder. Migrate the database by running the command

rails db:migrate

Open db/seed.rb file and ensure that the following line of code is included.

AdminUser.create!(email: '[email protected]', password: 'password', password_confirmation: 'password') if Rails.env.development?

This line is responsible for creating an admin user who will use the above credentials to log in to the dashboard in the development environment. For production, remove the snippet which says

if Rails.env.developmen?

Seed your development database with the following command to create a user.

rails db:seed

Step-Four: Registering models to the admin dashboard

After creating our models and setting up activeadmin, we need to register our models to the dashboard for them to display on the dashboard. In order to do this, run the command

rails generate active_admin:resource[MyModelName]

In our case, it will be

rails generate active_admin:resource Article

and

rails generate active_admin:resource Comment

The above commands will create two files, app/admin/article.rb and app/admin/comment.rb. Open the files and configure them as such

app/admin/article.rb

ActiveAdmin.register Article do
  permit_params :content
end

app/admin/comment.rb

ActiveAdmin.register Comment do
  permit_params :article_id, :comment
end

Step-Five: Viewing dashboard on Browser

We have setup activeadmin and registered our models, now is the time to view our work on the browser. Startup your development server by running the command

rails s

Open your browser and visit the URL given by your development server on the command line. By default, it is http://localhost:3000. This will open the view that the root route maps to. To access the dashboard, visit the URL http://localhost:3000/admin and you will be prompted to enter your credentials as an admin. Remember we seeded an admin user to the database with defined credentials. If you can’t remember, visit your db/seed.rb and check this line to see your credentials.

AdminUser.create!(email: '[email protected]', password: 'password', password_confirmation: 'password') if Rails.env.development?

Enter your credentials and you should have access to the dashboard. On the navbar, you should see all your registered models, click on any one of them to view, create, update and delete resources. 

Thanks for making it to the end of this tutorial, I hope it helped you and added a new trick in your bag of programming tricks. Stay blessed.