Spinning up Rails + Spree Commerce + React App

The setup will be a rails app that runs the Spree Commerce engine on the backend while utilizing React for the front-end. Just the basic instructions for setting up a new repo with all the latest and greatest versions working together.

These are two open-source repos/starter kits that do the job more comprehensively. They just lacked the specific versions I needed at the time.

Spark Solutions Starter Kit
Rails + Spree + ReactJS (Universal) + Redux + ES6 (Babel6) + Webpack + Hot Reload


And the setup: http://vinsol.com/blog/2017/07/11/spreeonreact-a-spreecommerce-storefront-built-on-reactjs/

Step 1: Setup new Rails repo on Github.

$ rails new myapp@rails5.1


$ rvm get stable $ rvm use 2.4.1
Or if not already installed:
$ rvm install 2.4.1

$ rvm use ruby-2.4.1@rails5.1 --create

Ruby upgrade (Specify the version in your Gemfile) 2.4.1 in this case.

$ gem -v $ gem list $ gem install bundler $ gem install rails

Gotcha: OpenSSL certificates were expired. Can change the source in the Gemfile to not take https and instead use http. Otherwise upgrade bundler gem.

Gotcha: bundle update and bundle upgrade

Gotcha: Issues with brew installations. Debug through $ brew doctor

Step 2: Set up Spree Commerce.

Spree is a complete open source ecommerce solution for Ruby on Rails

Spree Commerce is essentially a Rails Engine. It has four components: backend, frontend, api and core.

From the documentation:
Housework: $ brew install imagemagick

  1. In your Gemfile:

gem 'spree', '~> 3.3.0.rc3' gem 'spree_auth_devise', '~> 3.3' gem 'spree_gateway', '~> 3.3'

  1. $ bundle install

  2. Install Generators:
    $ rails g spree:install --user_class=Spree::User $ rails g spree:auth:install $ rails g spree_gateway:install

You will prompted to setup default credentials, which can be changed later. You can login with the username spree@example.com and password spree123

$ rails server

Your store should be visible at:
Admin Interface at:

Step 3: All steps to setup rails-react and webpacker

Housework: Latest node, nvm, yarn
Can download v8.3.0 from NodeJs.org

Or via nvm which is a Node package manager:
$ nvm install 8.3 $ nvm use 8.3

To install yarn without node dependencies:
$ brew install yarn --without-node $ yarn --version

Output is v0.27.5

We will be using React-Rails gem, and the Webpacker gem:

In your Gemfile:
gem "react-rails" gem 'webpacker', '~> 2.0'

$ bundle install

$ rails webpacker:install $ rails webpacker:install:react $ rails generate react:install

Within rails app
$ ./bin/rake webpacker

Good to go. Different ways to move forward in devloping the UI. You can utilize the Spree API or develop new views with React components that override the default Deface templates.