SpreeOnReact – A SpreeCommerce Storefront built on ReactJS

Overview

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 .

Why?

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?

1. An excellent development environment: Webpack for bundling modules, ES6 support, SCSS for writing CSS, Redux as the store and advanced features like hot reload and routing, we offer a productive development environment.
2. Standard Stack: Instead of you having to choose from a zillion tools, we have set up a pretty standard stack that should work well for most scenarios.
3. Easy on designers: We use css-modules approach to design the app. This enables the designers to work directly on the code base without ever having to worry about the logic.
4. Internationalization out of the box.
5. Easy deployment on Heroku.

Getting Started

Getting started with SpreeOnReact is quick and easy. You need to run a Rails server exposing Spree API via spree_ams gem. Along with this, you need to clone and run the spree-on-react project.

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.

1. Create a new Rails app
## Shell
rails _4.2.7_ new spree-react-store
cd spree-react-store/
2. Add spree and related gems

## 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'

 3. Install the dependencies and run other installers.
## 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
4. Add front end application URL in secrets.yml
## config/secrets.yml
development:
  secret_key_base: <Your secret key>
  FRONTEND_URL: 'http://localhost:3000'
5. Enable CORS
## 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

1. Clone the repository
## 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.

3. Install deps.
## Shell
npm install

 

4. Setup the environment file: Create a file (.env) inside project root directory.
## .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'

 

5. Run the Frontend server
## 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.

What’s next?

This is still a very young project and there are a lot of exciting features we are working upon. You can take a peek at what’s coming up on GitHub Readme or help us by raising pull requests on outstanding issues.
The GitHub repository for this project is located here and a demo is hosted on Heroku (Credentials: spree-on-react@example.com / spree-vinsol). Please leave your feedback in the comments section below.

Leave a Reply

Your email address will not be published. Required fields are marked *