---
title: "Modern Web Stack: Rails 5 API, ActiveAdmin, and Create React App on Heroku"
description: "Modern Rails applications can combine a Rails 5 API-only backend, ActiveAdmin for CMS capabilities, and a Create React App frontend in one Heroku-hosted project. The tutorial addresses the tension between Rails API mode, which omits views and middleware, and ActiveAdmin’s need to serve HTML and use cookies, flash, sessions, and assets. It restores those pieces by switching ApplicationController to ActionController::Base, adding forgery protection and middleware, reintroducing sprockets, and defining a separate ApiController that retains ActionController::API. The frontend uses Create React App, API proxying during development, React Router for client-side routes, and a build process that serves the compiled app from Rails on Heroku, including a React 404 for unmatched paths. A smoothie-recipes example demonstrates the resulting setup."
---

# Modern Web Stack: Rails 5 API, ActiveAdmin, and Create React App on Heroku

[Heroku](https://yomu.fyi/company/heroku) · Charlie Gleason · May 16, 2018

**Type:** Tutorial

## Summary

Modern Rails applications can combine a Rails 5 API-only backend, ActiveAdmin for CMS capabilities, and a Create React App frontend in one Heroku-hosted project. The tutorial addresses the tension between Rails API mode, which omits views and middleware, and ActiveAdmin’s need to serve HTML and use cookies, flash, sessions, and assets. It restores those pieces by switching ApplicationController to ActionController::Base, adding forgery protection and middleware, reintroducing sprockets, and defining a separate ApiController that retains ActionController::API. The frontend uses Create React App, API proxying during development, React Router for client-side routes, and a build process that serves the compiled app from Rails on Heroku, including a React 404 for unmatched paths. A smoothie-recipes example demonstrates the resulting setup.

## Context

Rails API-only mode removes views and middleware that ActiveAdmin requires, while a modern frontend may not need Rails’s asset pipeline or templating system. The tutorial also seeks to combine the API, CMS, frontend, and deployment configuration in a single Heroku-hosted project.

## Approach / What changed

Create a Rails 5 app with API-only mode, restore ActiveAdmin’s required controller behavior, middleware, cookies, sessions, flash, and Sprockets, and use a separate API controller for lightweight API endpoints. Add a Create React App client with development API proxying, React Router, and deployment build steps so the compiled frontend is served alongside Rails on Heroku.

## Takeaways

- ActiveAdmin can be used with an API-only Rails app by changing ApplicationController to ActionController::Base, enabling forgery protection, restoring required middleware, and reintroducing sprockets/railtie.
- A separate ApiController inheriting from ActionController::API preserves the slim API behavior for controllers that do not need ActiveAdmin’s full Rails stack.
- Create React App supports development API proxying, while React Router provides client-side routes and a React 404 for paths that Rails does not catch.

**Tags:** [ActiveAdmin](https://yomu.fyi/topic/activeadmin), [Heroku](https://yomu.fyi/topic/heroku), [React](https://yomu.fyi/topic/react), [Ruby on Rails](https://yomu.fyi/topic/ruby-on-rails)

- Source: [Heroku](https://www.heroku.com/blog/a-rock-solid-modern-web-stack)
- Source URL: https://www.heroku.com/blog/a-rock-solid-modern-web-stack
- Ingested by Yomu: 2026-09-09T14:26:27.668Z

[Read original post](https://www.heroku.com/blog/a-rock-solid-modern-web-stack)