🚩Effortless Feature Management in Rails : A Guide to Using Flipper with Active Admin

Feature flags are development tools that allow you to control the activation and deactivation of certain features in your application during runtime.

They are extremely useful for testing new features in production or for performing progressive deployments, all without redeploying the code.

Today, we will explore how to implement feature flags in your Ruby on Rails application by integrating Flipper into your Active Admin.

All the code shown today is accessible in this repository.

Table of Contents

 1. Feature Flags Management
 2. Use a Feature Flag in Your Code
 3. How I Integrate Flipper UI in ActiveAdmin
       3.1. 1. Only Admins have access to Flipper UI
       3.2. 2. Flipper UI must be accessible on the Admin Panel
       3.3. 3. Admin Panel must be accessible on the Flipper UI
 4. Conclusion

Feature Flags Management

To add feature flags to your application, we will use the Flipper ecosystem.

For this, we will need three gems: flipper, flipper-ui, and flipper-active_record.

$> bundle add flipper flipper-ui flipper-active_record

To store the feature flags in your database, we need to tell Flipper to use ActiveRecord. To do this, run the Flipper setup command:

$> rails g flipper:setup

Finally, to create and modify our feature flags graphically, we just need to expose flipper-ui routes. Flipper UI will expose a web interface for managing our feature flags.

# config/routes.rb

Rails.application.routes.draw do
  mount Flipper::UI.app(Flipper) => '/feature-flags'
end

And voilà 🎉, you have configured Flipper in your application. You can now access the UI via the /feature-flags route by starting your server.

Before configuring the integration with ActiveAdmin, let’s create our first feature flag together.

It will be called new_admin_dashboard and is activated at 50% for all users.

Use a Feature Flag in Your Code

Let’s assume we have an application using ActiveAdmin. On the root of your Active Admin Panel, you will find the default dashboard. Here is mine:

# app/admin/dashboard.rb

ActiveAdmin.register_page "Dashboard" do
  menu priority: 1, label: 'Dashboard'

  content title: "'Dashboard' do"
    div class: "blank_slate_container", id: "dashboard_default_message" do
      span class: "blank_slate" do
        span 'Welcome to ActiveAdmin.'
        small "You're looking at the default dashboard."
      end
    end
  end
end

We will implement new wording in our dashboard, which will only be exposed via the new_admin_dashboard feature flag.

# app/admin/dashboard.rb

[...]
span class: "blank_slate" do
  if Flipper.enabled?(:new_admin_dashboard)
    span 'Welcome to the new ActiveAdmin dashboard!'
    small "You're looking pretty cool! Have a nice day buddy!"
  else
    span 'Welcome to ActiveAdmin.'
    small "You're looking at the default dashboard."
  end
end
[...]

The feature flag is now in place. When I refresh the page, I have a 50/50 chance of seeing my new wording:

How I Integrate Flipper UI in ActiveAdmin

Flipper UI is really cool! But in order to expose it to non-technical users, it’s important to link your application with Flipper UI.

In the projects where I had to integrate Flipper, I also had Active Admin, which allows non-technical users to interact with the application.

Here are a few points on how I link the two tools:

1. Only Admins have access to Flipper UI

To allow only admins to access Flipper UI, we will leverage Active Admin authentication. For this, simply modify the way we declare our route to Flipper UI:

# config/routes.rb
Rails.application.routes.draw do
  ActiveAdmin.routes(self)

  devise_for :admins, ActiveAdmin::Devise.config
  authenticate :admin do
      mount Flipper::UI.app(Flipper) => '/admin/feature-flags'
  end
end

And there you go! Our Flipper UI is now behind the Active Admin authentication wall and is accessible at the /admin/feature-flags route.

2. Flipper UI must be accessible on the Admin Panel

Only admins have permission to access Flipper UI. But they still need to find the access!

Fortunately, Active Admin offers a very simple solution:

# config/initializers/active_admin.rb

[...]
config.namespace :admin do |admin|
  admin.build_menu :default do |menu|
    menu.add label: 'Feature Flags', url: '/admin/feature-flags'
  end
end
[...]

That’s all 🎉

3. Admin Panel must be accessible on the Flipper UI

Once on the Flipper UI interface, I want to be able to easily return to the admin page. Fortunately, Flipper UI exposes an option in its configuration just for this!

We will create an initializer file to hold the Flipper configuration:

# config/initializers/flipper.rb

Flipper::UI.configure do |config|
  config.application_breadcrumb_href = '/admin'
end

This configuration allows Flipper UI to display a small “< App” button at the top of its navigation menu.

Now we have a link from the admin to Flipper, and from Flipper back to the admin!

Conclusion

Setting up feature flags with Flipper and Active Admin offers great flexibility in managing the activation of new features in production while minimizing risks.

This integration allows both technical and non-technical teams to collaborate more effectively by providing tools tailored to their needs.

We have covered a very simple use case of Flipper, but in reality, this tool is quite powerful and capable of more advanced calculations than just “Displaying this dashboard 50% of the time.”

Thank you for reading, and see you soon in the next article!