small medium large xlarge

Modern Front-End Development for Rails: Webpacker, Stimulus, and React


Cover image for Modern Front-End Development for Rails

Modern Front-End Development for Rails

Webpacker, Stimulus, and React


Improve the user experience for your Rails app with rich, engaging client-side interactions. Learn to use the Rails 6 tools and simplify the complex JavaScript ecosystem. It’s easier than ever to build user interactions with the Webpacker gem and Stimulus. You can add great front-end flair without much extra complication. Add React to build an even more extensive set of client-side features. Structure your code for different levels of client-side needs with these powerful options. Add to your toolkit today!

Choose Your Format(s)

  • $24.95 In Stock
    • Beta: What do I get?

  • Ebooks are DRM free.

  • Ebook delivery options.

About this Title

Pages: 250 (est)
Published: 2020-08-10
Release: B4.0 (2020-03-23)
ISBN: 978-1-68050-721-8

It’s hard to have a Rails application without integrating some client-side logic. But client-side coding tools, and the Rails tools for integrating with them, all change continuously. Rails 6 simplifies client-side integration with the Webpacker gem. It’s the default tool for building client-side assets for use by web browsers. Learn how to use Rails 6 and Webpacker to build rich front-end logic into your Rails applications. The job is even easier with Stimulus, a library that brings Rails conventions to JavaScript tools. Add in some React, a popular framework that automatically updates the browser when your data changes.

Learn the basics of webpack, Webpacker, and TypeScript, and add pizazz to your application. Structure your web application to best manage your state. Learn how to interact with data on the server while still keeping the user experience interactive. Use the type system in TypeScript to expand on JavaScript and help prevent error conditions. Debug and test your front-end application with tools specific to each framework.

There are a lot of ways to do client-side coding, and Rails is here to help.

What You Need

This book requires Ruby on Rails 6.0+, React 16.8.0+. Other dependencies will be added by Rails.

Contents & Extracts

This book is currently in beta, so the contents and extracts will change as the book is developed.

  • Introduction
  • Beginning
    • Client-Side Rails excerpt
      • Managing State and Front-End Development
      • Installing Webpacker
      • Using Webpacker
      • Adding Real Features
      • Going Generic
      • What’s Next
    • Stimulus
      • What Is Stimulus?
      • Installing Stimulus
      • Adding Our First Controller
      • Creating an Action
      • Adding a Target
      • Stimulus Has Class
      • Using Values
      • A Little More Stimulus
      • Stimulus Quick Reference
      • Using Stimulus with Haml or Slim
      • What’s Next
    • React
      • What Is React?
      • Installing React
      • Adding Our First Component
      • Composing Components
      • Tying Into the Page
      • Interactivity, State, and Hooks excerpt
      • Sharing State
      • What’s Next
    • Cascading Style Sheets
      • Building CSS in Webpack
      • Adding CSS and Assets to Webpack
      • Animating CSS
      • CSS Transitions
      • CSS and React Components
      • What’s Next
  • Intermediate
    • TypeScript
      • Understanding Basic TypeScript Types
      • Static versus Dynamic Typing
      • Variables and Type Annotations
      • Functions and Type Annotations
      • Classes and Type Annotations
      • Defining Interfaces
      • Type Checking Classes and Interfaces
      • Getting Type Knowledge to TypeScript
      • What’s Next?
    • Webpack
      • Problems Being Solved
      • Yarn
      • Webpack
      • What’s Next
    • Webpacker excerpt
      • Webpacker Basics
      • Webpacker in Development
      • Webpacker in Production
      • Customizing Webpacker
      • What’s Next
    • Talking to the Server
      • Cheating with the Gon gem
      • Using Gon In Stimulus
      • Stimulus and Ajax
      • Using Data In Stimulus
      • Acquiring Data In React with useState
      • Remote Authentication
      • Stimulus and ActionCable
      • React and ActionCable
      • Error Handling
    • Managing State
      • Sharing State between Stimulus Controllers
      • Microstates
      • Sharing State between related React Components
      • Sharing State between unrelated React Components
  • Advanced
    • Advanced Types
      • Advanced TypeScript Types
    • Testing
    • Debugging


Noel Rappin is a Staff Software Engineer at Root Insurance. Noel is the author of multiple technical books, including Rails 5 Test Prescriptions. Follow Noel on Twitter @noelrap, and online at