React Storefront Architecture
This guide gives an overview of the React Storefront application architecture.
React Storefront is based on React and uses the following libraries:
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.
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 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,
await, rest, spread, and more.
React Storefront apps have the following directory structure:
- 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.
- 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 Moovweb Control Center.
- 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.