Reference Storefront

The Elastic Path Commerce Cloud React PWA Reference Storefront is a flexible e-commerce website built on the Elastic Path Commerce Cloud REST API. The storefront uses the e-commerce capabilities provided by Elastic Path Commerce Cloud and gets data in a RESTful manner.

Overview

The storefront uses the Elastic Path Commerce Cloud JavaScript SDK for all Elastic Path Commerce Cloud API requests. For the cart and checkout experiences, the storefront uses Elastic Path Commerce Cloud Embeddable Cart + Checkout.

You can try out a live instance of the Reference Storefront.

note

To check out, use the test card number 4242 4242 4242 4242, any future expiry date, and any three-digit Card Verification Code (CVC).

Prerequisites

You need to set up some accounts, install development tools, and ensure that you have some knowledge of the technologies that are used in the storefront.

Accounts

Before you begin, ensure that you have the following accounts set up:

• Elastic Path Commerce Cloud account
• Stripe account - Stripe is used as the payment gateway. From your Dashboard, configure Stripe as the payment gateway.
• Algolia account - Algolia is used for search functionality to display search results, facets, and filtering.

Development tools

A React PWA Reference Storefront development environment requires the following software:

• Git
• Node.js
• Yarn
• Visual Studio Code with the following extensions:
  • Debugger for Chrome
  • ESLint extension
• Windows Only: Windows Subsystem for Linux (WSL)

Knowledge requirements

To customize and extend the storefront, you need knowledge in the following technologies:

• React
• CSS
• sass

Start building the storefront

note

If you are running a Windows environment, launch the Windows Subsystem for Linux application and perform the following steps from the console window.

# Clone the Git repository
git clone https://github.com/elasticpath/epcc-react-pwa-reference-storefront.git

# Go into the cloned directory
cd epcc-react-pwa-reference-storefront

# Install all the dependencies for all sub-project and create necessary symlinks in-between them
yarn

# Configure the ./src/config.ts file.
# For more information, see Configuration parameter descriptions.

# Start the app in development mode

# Run the main application:
yarn start

# Builds the app for production to the build folder:
yarn build

Configuration parameter descriptions

Parameters that require configuration are in the ./src/config.ts file:

Parameter	Importance	Type	Description
clientId	Required	String	The Client ID of your store.
stripeKey	Required	String	Stripe publishable API key.
categoryPageSize	Required	String	Maximum number of products to display on a category page.
maxCompareProducts	Required	String	Maximum number of products to display in compare view.
compareKeys	Required	Array	An array of all product attributes to display in compare view.
algoliaAppId	Required	String	Algolia application identifier.
algoliaApiKey	Required	String	Algolia API key used to read records.
algoliaIndexName	Required	String	Name of Algolia index used for search functions.