Rails Friends: API and Webpacker

Rails Friends: API and Webpacker

It appears you can not use --api and --webpack=react together when creating a new Rails App. It’s a shame, because having Rails handle the backend and React, or other JS framework, handle the frontend is a common setup. But it is possible to add webpacker to an api App and use HtmlWebpackPlugin to serve the webpack bundles.

Nothing on the rails new documentation suggest that the two are incompatible, but running rails new rails-api-webpacker-demo --api --webpack=react together, appears to ignore the webpacker configuration steps.

$ rails new --help
    [--api], [--no-api]          # Preconfigure smaller stack for API only apps
--webpacker, [--webpack=WEBPACK] # Preconfigure Webpack with a particular framework (options: react, ...)

I found this comment on a Webpacker issue titled: “Rails API + Webpacker?”. This blog post is based on the linked repository, broken down into steps for easier understanding.


Create an --api App

Because --api preconfigures a smaller stack, let’s start with it and add webpacker later.

rails new rails-api-webpacker-demo --api

Install Webpacker

Add to Gemfile:

gem 'webpacker'


bundle install
rails webpacker:install
rails webpacker:install:react

Install HtmlWebpackPlugin and HtmlWebpackHarddiskPlugin


yarn add html-webpack-plugin html-webpack-harddisk-plugin

Configure the installed plugins in config/webpack/environment.js according to their documentation (1)(2):

const { environment } = require('@rails/webpacker')

const HtmlWebpackPlugin = require('html-webpack-plugin')
const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin')

  new HtmlWebpackPlugin({
    alwaysWriteToDisk: true

  new HtmlWebpackHarddiskPlugin()

module.exports = environment


Setup Rails to Serve the HTML Generated by Webpack

rails generate controller pages index

Rewrite the pages controller to:

  1. Inherit from ActionController::Base. Because this is an API app, ApplicationController inherits from ActionController::API instead
  2. Have :index render the file generated by webpack
class PagesController < ActionController::Base
  def index
    render file: 'public/packs/index.html'

Remove the get 'pages/index' added to routes (config/routes.rb) and add:

root 'pages#index', as: :pages_index
get '*path', to: 'pages#index'



Run both commands in different terminals:

rails server

Open http://localhost:3000/ and you’ll see both: “Hello React” in the body and “Hello World from Webpacker” in the browser’s console.

I’ve published this on Github at leonelgalan/rails-api-webpacker-demo and deployed to Heroku as ancient-falls-96742.herokuapp.com

Photo by Erfan Moradi