React Storefront Architecture

This guide gives an overview of the React Storefront application architecture.

Directory Structure

The start app that app that you cloned in Getting Started has the following files and directories:

  • assets - Static assets such as global scripts, images, and css go here. For the most part you'll only put images here. You'll only need to add scripts or css if you're doing adapt style transformations of the upstream site.
  • build - Used during build and deployment. Don't put anything here.
  • config
    • webpack - Contains the webpack configurations for development and production builds
  • node_modules - Contains dependencies installed by npm. Don't put anything here.
  • src - Your PWA source code goes here
    • analytics.js - Configures integration with analytics providers, such as Google Tag Manager
    • App.js - The root component of your app
    • AppModel.js - The root model class for the app's state
    • blob.dev.js - Contains configuration settings for development. Production equivalents should be stored in a blob in the Moov Console.
    • client.js - Launches the app on the client
    • routes.js - Defines all of the client and server side routes for the PWA
    • server.js - Launches the app on the server
    • theme.js - Defines the app theme, which controls the look and feel of all components.
  • scripts - Contains low-level MoovJS server files. You'll only need to edit this if you're doing adapt style transformations of the upstream site.
  • tasks - Contains low-level build tasks. Do not edit.
  • gulpfile.js - Contains low-level build tasks. Do not edit.
  • moov_config-local.json Contains configuration settings for development
  • moov_config-prod.json Contains configuration settings for production
  • moov_config.json A symbolic link to moov_config-local.json or moov_config-prod.json, depending on which environment you're in. Do no edit.
  • README.md Document your app here.

Libraries

React Storefront is based on React and uses the following libraries:

Material UI

Material UI is a comprehensive set of React components that implement Google's material design. React Storefront builds on Material UI to provide many common PWA components such as navigation menus, faceted search and sorting, image swipers and more.

React Storefront uses Material UI's API design approach, which gives users fine-grained control over the look and feel of each component.

JSS

JSS is an authoring tool for CSS which uses JavaScript as a host language. Using JSS, you can create modular, overridable style rules that affect only the components to which they are designed. We use JSS because it makes it easy to override the style of any React Storefront or Material UI component, and it works well with server side rendering (SSR), which is essential for fast load times and SEO.

MobX State Tree

MobX State Tree is a model-driven library for managing state based on observables. It supports the outstanding Redux DevTools Chrome Extension, makes debugging state changes a breeze. In MoovPWA, application state is managed by MobX State Tree model classes, leaving your views free to focus on presentation.

Webpack

Webpack is a powerful module loader and bundler that allows you to express all of your app's dependencies using ECMAScript (ES) import statements. In combination with Babel, Webpack allows you to use all of the latest features of ES 2017 and beyond such as decorators, async, await, rest, spread, and more.