Spree Commerce is one of the best open source e-commerce platformÂ written in Ruby language. ItÂ boasts of its feature completeness coupled with a vast ecosystem of extensions and quick pace of development. SpreeOnReact is an open source SpreeCommerce front-end solution built entirely on Facebook’s ReactJS library. It provides a set of coreÂ e-commerce functionalities from where you can start adding more features instead of building everything from the ground up. The library is compatible with Spree 3.1 and Spree 3.2 .
We know that Spree is slow. Most of this sluggishness is attributed to the time taken by the rendering process of Rails. We tried to fix this by writing aÂ Spree front-end that is rendered on client instead of aÂ conventional server-rendered solution. The result is that we get a slimmer front end that runs entirely on spree APIs and is therefore much faster.
What does it offer?
The Spree Backend
The below steps list how to setup a back end for spree-on-react. We’ve also created a demo Spree backend appÂ here. You can use this demo or follow the below steps orÂ simply use your existing Spree application to serve as backend for spree-on-react.
## Shell rails _4.2.7_ new spree-react-store cd spree-react-store/
## Gemfile gem 'spree', '~> 3.1.0' gem 'spree_auth_devise', '~> 3.1.0' gem 'spree_ams', github: 'vinsol-spree-contrib/spree_ams', branch: '3-1-stable' gem 'rack-cors', require: 'rack/cors'
## Shell bundle install bundle exec rails g spree:install --user_class=Spree::User bundle exec rails g spree:auth:install bundle exec rails g spree:api:ams:install
## config/secrets.yml development: Â Â secret_key_base: <Your secret key> Â Â FRONTEND_URL: 'http://localhost:3000'
##Â config/initializers/spree_ams.rb config.cors_whitelist = Rails.application.secrets.FRONTEND_URL
##Â config/application.rb config.middleware.insert_before 0, "Rack::Cors" do Â allow do Â Â origins Rails.application.secrets.FRONTEND_URL Â Â resource '*', headers: :any, methods: [:get, :post, :options, :put, :delete] Â end end
6. RunÂ the Rails Server on port 3001
The SpreeOnReact Frontend
## Shell git clone https://github.com/vinsol-spree-contrib/spree-on-react cd spree-on-react
2. Install Node and NPM:Â There are already a lot of resources on how to install node and npm for your operating system. Install Node and npm and come back to follow. This project is tested on node version 5.3.0 and higher.
## Shell npm install
## .env REACT_APP_API_BASE='http://localhost:3001/api/v1' REACT_APP_AMS_API_BASE='http://localhost:3001/api/ams' REACT_APP_API_HOST='http://localhost:3001'
## Shell npm start
Integrating Spree Extensions
Using various Spree extensions with this project might seem tricky at first as it will be very difficult to find any extension that comes with React components. That said, in any production grade application, weâ€™ll always be overriding the default views in any case. Instead of writing them in ERB or HAML, you will be writing them in JSX as ReactJS components. There is however one caveat that in some cases the extension might not offer a JSON responder. In such cases, youâ€™ll have to expose JSON end points by yourself which should be pretty simple and fast in most cases.