React on Rails: List of Ingredients

Rails 5 API + ActiveAdmin + Create React App on Heroku

App built following Charlie Gleason’s tutorial.

Main Steps

1. Prepare Rails app to work in API mode serving HTML for ActiveAdmin

• Create Rails app in API mode
• Make ApplicationController inherit from ActionController::Base
• Add ApiController (our controllers will inherit from this one)
• Add middleware config for Flash, Cookies and CookieStore to application.rb (see)
• Add Devise and ActiveAdmin gems, and install

2. Create React app

• create-react-app client
• Add config to package.json to proxy API calls to Rails backend (see)

3. Add data to backend

• Create Rails models and relationships
• Generate ActiveAdmin resources and permit params
• Set up Rails routes
• Seed database
• Limit retrieved data in controllers (only retrieve what we need for the frontend)

4. Create Procfile.dev to run servers locally (this is really nice)

• Add web: command to start React (see)
• Add api: command to start Rails (see)
• Run Procfile locally with: heroku local -f Procfile.dev
• Create Rake task to run Procfile.dev (see)

5. Implement React app

• Normal React app implementation

6. Prepare app for production

• Add package.json to the root folder to tell Heroku how to compile React (see)
• Use heroku-postbuild command to run scripts

7. Deploy to Heroku

• Add config/secrets.yml with secret_key_base required by Devise
• Use Heroku buildpacks to run two build processes in a specific order (Node first)

8. Add React Router

• Tell Rails to pass any HTML requests that it doesn’t catch to React (see)
• Implement React Router