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, ‘’:

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'

desc 'Start production server'
task :production do
exec 'NPM_CONFIG_PRODUCTION=true npm run postinstall && foreman start'

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

Font Awesome 5 SVG icons use javascript to find <i> tags with an icon class and replaces them with an <svg> tag. Turbolinks online displays these icons on initial page load and/or refresh, however when following a link, Turbolinks reloads the page and not the icons. This guide assumes that you have already loaded font awesome into your project using your preferred method. For what its worth, this guide uses the font awesome CDN more
Problem: Ransack will only search for one keyword or phrase such as, "Jumpity Jump", without quotations. Using quotations or commas such as in "Jumpity Jump" or, "Jumpity, Jump" (with or without quotations). returns a blank result. Test conditions: Randomly selected records were edited to include varied words/phrases in searched fields, such as in the following examples: jump jumpity jump jimpity jump jump rabbit jumpity jumpity rabbit Solution: Custom predicates added to initializer based on Stack Overflow answer linked at end.more
The ability to like or favorite posts is very common on websites. This guide will show you how to add this functionality to your Rails 5 application without adding unnecessary bloat from gems. This guide assumes that you have already implemented posts (or similar) and users to your application and will not cover these steps. Let's go over some design considerations before we begin. While everyone can view a post, only authenticated users can like posts by clicking a link or icon.  We're keeping it positive by just tracking likes.more
Assuming that you have Rails and PostgreSQL already installed on your workstation, follow the steps for a new or existing Ruby on Rails app according to your needs. more
Recently, while creating a subscription checkout form using Stripe Elements, I wanted to list the plans along wth their pricing and details. The form uses a collection input to list the plans as radio buttons, but the methods in this guide should work for checkboxes and selects.  Here is the input statement that we are working with for starters: <%= f.input :plan_id,   collection: Plan.published, as: :radio_buttons %> Currently, this will display the following label and radio buttons (Note that this label is provided using I18n): Please select your plan: ○ plan 1 ○ plan 2 I already have text with instructions...more
For use with trusted/cleaned data. Add to application.rb def truncate_and_link(text,options ={}) length = options[:length] return text if length.blank? url = options[:url] || '#' output = raw text.truncate_words(length) output += link_to('more', url) if text.size > length output.html_safe end Adapted from: