↓Skip to main content
Resources for the Modern Web Resources for the Modern Web
  1. All Posts/

universal-marketcloud-storefront

eCommerce JavaScript

Universal Marketcloud Storefront boilerplate




About

This is an universal eCommerce boilerplate (mostly for Marketcloud) I’ve put together using the following technologies:

  • Universal rendering
  • Both client and server make calls to load data from separate API server
  • React
  • React Router
  • Express
  • Babel for ES6 and ES7 magic
  • Webpack for bundling
  • Webpack Dev Middleware
  • Webpack Hot Middleware
  • Redux’s futuristic Flux implementation
  • Redux Dev Tools for next generation DX (developer experience). Watch Dan Abramov’s talk.
  • React Router Redux Redux/React Router bindings.
  • ESLint to maintain a consistent code style
  • redux-form to manage form state in Redux
  • lru-memoize to speed up form validation
  • multireducer to combine single reducers into one key-based reducer
  • style-loader, sass-loader and less-loader to allow import of stylesheets in plain css, sass and less,
  • font-awesome-webpack to customize FontAwesome
  • react-helmet to manage title and meta tag information on both server and client
  • webpack-isomorphic-tools to allow require() work for statics both on client and server
  • mocha & chai to allow writing unit tests for the project.
  • Material UI to make all of that pretty.
  • Marketcloud is the eCommerce platform beneath all this fancy looking stuff.

I am planning to build a real webshop at some point, but since the idea was still taking shape so I started to work on general implementations towards Marketcloud. Finally, once the idea will be final, I will use this as a base to build that real shop.
In other words, this is kind of a boilerplate if you ever feel like building a stunning webshop of your own. It will offer huge variety of features what most, even the biggest, eCommerce storefronts won’t offer, like super-fast and consistent user experience. Boilerplate is using Marketcloud, so if you are using that as well, you can get started very quickly. If not, then you’ll just need to change all the API bindings and the logics related to it.
This project is based on awesome react-redux-universal boilerplate by @erikras. You can read from there what’s actually contained in this project as well.

Installation 

npm install

Running Dev Server 

npm run dev

The first time it may take a little while to generate the first webpack-assets.json and complain with a few dozen [webpack-isomorphic-tools] (waiting for the first Webpack build to finish) printouts, but be patient. Give it 30 seconds.

Building and Running Production Server 

npm run build
npm run start

Roadmap

First need to get the basics in shape, after that I might plan something further.

Contributing

I am more than happy to accept external contributions to the project in the form of feedback, bug reports and even better – pull requests 🙂

Cheers!
– Hannu Kärkkäinen, @hkarkk



↑