Basic steps to create a new app using Rails API with a React frontend, then deploy on Heroku.
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
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'
enddesc 'Start production server'
task :production do
exec 'NPM_CONFIG_PRODUCTION=true npm run postinstall && foreman start'
end
enddesc 'Start development server'
Add Foreman to Gemfile development group:
gem 'foreman', '~> 0.82.0'
Start the client and app development servers:
rake start
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
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