React Storefront |

React Storefront Features

React Storefront makes it easy to build a beautiful, performant, and reliable ecommerce PWA by providing the following features:

Isomorphic Router

React Storefront's declarative router allows you declare client and server-side routes and caching in a single location. For example, this route responds to /p/1 and /p/1.json.

new Router()
  .get('*seo/p/:id', 
    cache({ 
      server: { maxAgeSeconds: 300 }, // cache the result on the server for 5 minutes
      client: true // and on the client using a service worker
    }),       
    fromClient({ page: 'Product' }),    // display the product view
    fromServer('./product'),            // call the product API endpoint
    track(analytics.productPageView),   // track a product page view event
  )

Prefetching

React Storefront makes it easy to prefetch and cache links as the user scrolls them into view. Stay one step ahead of your users and make page transitions lightning fast!

<Link prefetch="visible" to="/products/1">Product 1</Link>

SSR by Default

React Storefront automatically renders the initial landing page on the server by default. This means faster load times for users and better SEO. No configuration is necessary.

Code Splitting

React Storefront automatically minimizes bundle size by splitting pages into separate bundles. This ensures that time-to-responsive is as fast as possible.

import universal from 'react-universal-component'
import Views from 'react-storefront/Views'

// ...

<Views
  loading={() => <LoadMask/>}
  components={{
    Home: universal(() => import('./Home')),
    Category: universal(() => import('./Category')),
    Product: universal(() => import('./Product'))
  }}     
/>

React Components

React Storefront provides several components for common e-commerce features built on top of Material UI.

import ImageSwitcher from 'react-storefront/ImageSwitcher'

// ...

<ImageSwitcher
  images={product.images}
  thumbnails={product.thumbnails}
  showIndicators
/>

Theming

Control the look and feel of application components by creating a custom theme and/or overriding component default styles using JSS.

import createTheme from 'react-storefront/createTheme'
import { darken, lighten } from '@material-ui/core/styles/colorManipulator'

const brandColor = '#0C79AD'

export default createTheme({
  palette: {
    primary: {
      light: lighten(brandColor, 0.12),
      main: brandColor,
      dark: darken(brandColor, 0.12),
      contrastText: "#fff"
    }
  }
})

State Management

React Storefront uses mobx-state-tree to provide structured state management based on observables.

import { types } from "mobx-state-tree"
import ProductModelBase from 'react-storefront/model/ProductModelBase'

const ProductModel = types.compose(ProductModelBase, 
  types.model("ProductModel", {
    sku: types.string
  })
)

Automatic Service Worker Generation

React Storefront uses Google's workbox to automatically generate a service worker that supports static and runtime caching. There's no need to create a separate service worker configuration since all caching in conveniently expressed in your router definition.

Client and Server Caching

React Storefront provides a simple directive to control how responses are cached at the edge for ultra-fast response times.

new Router()
  .get('*seo/p/:id', 
    cache({ 
      client: true, // cache using the service worker
      server: { maxAgeSeconds: 300 } // cache the result at edge for 5 minutes
    })
    // ...
  )

Analytics

React Storefront provides an analytics event framework that makes it easy to integrate with tag managers and individual third-party analytics solutions.

import GoogleTagManagerAnalyticsTarget from 'react-storefront/analytics/GoogleTagManagerCommerceTarget
import { configureAnalytics } from 'react-storefront/analytics'

const gtm = new GoogleTagManagerCommerceTarget()
  .sendForAllEvents(globalData)
  .configureExperiments({ cookieName: 'moov_experience' })
  .setTrackBackClick(true)
  
configureAnalytics(gtm)