Wed Apr 18, 2018 8:23 PM

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

Sat Oct 07, 2017 4:00 PM
guide
Assuming that you have Rails and PostgresSQL already installed on your workstation, follow the steps for a new or existing Ruby on Rails app according to your needs. more
Fri May 18, 2018 1:12 PM
guide
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
Mon May 07, 2018 1:18 PM
guide
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
Mon May 21, 2018 2:58 PM
guide
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: http://itiansrock.blogspot.com/2013/01/truncate-and-link-text-helper-in-rails.htmlmore
Thu Apr 26, 2018 1:51 PM
guide
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