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.
Note:
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
https://github.com/spark-solutions/spark-starter-kit
Rails + Spree + ReactJS (Universal) + Redux + ES6 (Babel6) + Webpack + Hot Reload
Vinsol
https://github.com/vinsol-spree-contrib/spree-on-react
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
https://rvm.io/rvm/upgrading
$ 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
https://github.com/spree/spree
Spree Commerce is essentially a Rails Engine. It has four components: backend, frontend, api and core.
From the documentation:
Housework: $ brew install imagemagick
- In your Gemfile:
gem 'spree', '~> 3.3.0.rc3' gem 'spree_auth_devise', '~> 3.3' gem 'spree_gateway', '~> 3.3'
-
$ bundle install -
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:
http://localhost:3000
Admin Interface at:
http://localhost:3000/admin
Step 3: All steps to setup rails-react and webpacker
Housework: Latest node, nvm, yarn
Can download v8.3.0 from NodeJs.org
https://nodejs.org/en/
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:
https://github.com/reactjs/react-rails
https://github.com/rails/webpacker
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.