Create and Deploy Rails API with React Client on Heroku

Basic steps to create a new app using Rails API with a React frontend, then deploy on Heroku.

Create the app and the client

Create rails app with Postgres database:

rails new appName --api --database=postgresql

In the root of the app, create the client using create-react-app:

create-react-app client

Configure the Development Server

Add proxy to ‘client/package.json’:

"proxy": "http://localhost:3001"

Create a Profile in the root of the app to use locally, ‘Procfile.dev’:

web: cd client && PORT=3000 npm start

api: PORT=3001 && bundle exec rails s

Create the file ‘start.rake’ in the ‘/lib/tasks/’ folder:

namespace :start do

  task :development do

    exec 'foreman start -f Procfile.dev'

  end


  desc 'Start production server'

  task :production do

    exec 'NPM_CONFIG_PRODUCTION=true npm run postinstall && foreman start'

  end

end

desc 'Start development server'

Add Foreman to Gemfile development group:

gem 'foreman', '~> 0.82.0'

Start the client and app development servers:

rake start

Prepare for Production

Create a ‘package.json’ file in the root of the app:

{

     "name": "appName",

     "engines": {

          "node": "6.3.1"

        },

    "scripts": {

      "build": "cd client && npm install && npm run build && cd ..",

        "deploy": "cp -a client/build/. public/",

      "postinstall": "npm run build && npm run deploy && echo 'Client built!'"

       }

  }

Create a ‘Procfile’ in the root of app to tell Heroku how to run app

web: bundle exec rails s

Heroku Deployment

Create Heroku app

heroku create

Add Heroku buildpacks

heroku buildpacks:add heroku/nodejs --index 1

heroku buildpacks:add heroku/ruby --index 2

Tell Heroku to recognize dependencies:

heroku config:set NPM_CONFIG_PRODUCTION=false