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.