/react-rails-ingredients

Rails 5 API + ActiveAdmin + Create React App on Heroku

Primary LanguageRuby

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