React PWA Reference Storefront

Shaun Maharaj

July 31st, 2020

Over the past few years at Elastic Path we've observed that "Reference Experiences" are crucial to the success of partners, customers, and all developers who wished to build upon their own front-end initiatives using our capabilities.

It all started with our JAMStack Elastic Path Commerce React PWA Reference Storefront, which gained traction for its headless eCommerce platform and full PWA storefront with various scenarios of B2C/B2B eCommerce, AR/VR shopping, partner integrations and full component library leveraging Storybook. We expanded further into Voice Commerce with our Reference Alexa Skill, then into Conversational Commerce with our Reference Chatbot and Reference Conversational Interface.

As we invest more in our multi-tenant offering, Elastic Path Commerce Cloud, we have expanded upon new initiatives to empower developers to create their own custom front-ends using our JavaScript SDK and Request Library for Serverless Functions. And, our Application Library library brought embedded commerce to our customers looking to quickly consume our Cart, Checkout, Promotions, and Payment functionality in their existing storefronts.

In a continuation of these investments, we are excited to announce the release of our new React PWA Reference Storefront for Elastic Path Commerce Cloud. The Elastic Path Commerce Cloud REACT PWA Reference Storefront is a flexible eCommerce JAMStack progressive web application (PWA) built on Elastic Path’s RESTful eCommerce API. While our existing Gatsby storefront will continue to exist, we encourage all users to leverage the new storefront as it has an even more robust feature set. 

The new storefront uses the eCommerce capabilities provided by Elastic Path Commerce Cloud and retrieves data in a RESTful manner. The storefront makes use of the Elastic Path Commerce Cloud JavaScript SDK for all Elastic Path Commerce Cloud API requests, and Elastic Path Commerce Cloud Embeddable Cart + Checkout (ShopKit) for all Cart and Checkout experiences.  With this release, we have implemented the storefront to include additional functionality so that customers and partners can pull from a more complete set of assets to help guide and accelerate their development process.

Some key additions regarding the new functionality available in the Commerce Cloud React PWA Reference Storefront:

  • The implementation of our Algolia partnership to offer search, filtering, faceting, and sorting functionality.
  • Upgrades to make our storefront a full PWA (Progressive Web Application) for our Commerce Cloud platform leveraging some of the modern developments of PWAs from the past couple years.
  • Enhancements to Accessibility as a standardized best practice for the application and all contributed code (Code scans with react-axe ensure we remain WCAG 2.0 AA compliant).

As we continue to develop our storefront, SDK, and ShopKit over time to incorporate our new features, we'll also continue to evolve with our tried and tested practices from all our Reference Experiences.

With all of our Reference Experience projects being open source, we welcome any contributions to our new React PWA Reference Storefront.

Also, check out the interactive live demo available here!

Share on

Shaun Maharaj

Shaun is a Senior Development Manager at Elastic Path with a strong background in ecommerce and mobile/web application development.