Reference Storefront

note

The reference storefront only works with v2 catalog (legacy) and is not compatible with our latest Product Content Management and Catalog Composer features.

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.

For more information, see Store Features.

Overview

The storefront uses the Elastic Path Commerce Cloud JavaScript SDK for all Elastic Path Commerce Cloud API requests.

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 Commerce Cloud Dashboard, configure Stripe as the payment gateway.
• Algolia account - Algolia may be used for search functionality to display search results, facets, and filtering.
• Coveo account - Coveo may be used for search functionality to display search results, facets, and filtering.
  • Installation, tutorials, core concepts, how-tos, etc.
  • Reference for components, classes, interfaces, top-level functions, etc.

Development tools

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

• Git
• Node.js v14.x
• 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

Push the product catalog to Algolia

To enable product search, share your product catalog with Algolia. Elastic Path offers a script that you can use to push the catalog from Elastic Path Commerce Cloud to Algolia.

1. Go to the catalog syndication open source project.
2. Follow the instructions in the README file.

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. You must set these values based on your own store:

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.
algoliaAppId	Required	String	Algolia application identifier.
algoliaApiKey	Required	String	Algolia API key used to read records.
algoliaPlacesAppId	Required	String	Algolia Places application identifier used for address lookup.
algoliaPlacesApiKey	Required	String	Algolia Places API key used for address lookup.
algoliaIndexName	Required	String	Name of Algolia index used for search functions.
compareKeys	Required	Array	An array of all product attributes to display in compare view. For example, config.ts: 'bulb','bulb';'max_watt','wattage';'bulb_qty','bulb-qty';'material','material';'finish','finish'
endpointURL	Default	String	Optional override location of API endpoint.
supportedLocales	Default	Object	Key-value pair of supported languages for storefront. An example is, config.ts: [{"key": "en","name": "english"},{"key": "fr","name": "french"}].
defaultLanguage	Default	String	Default language to display in storefront upon loading the page. For example. "en"
defaultCurrency	Default	String	Default currency to display in storefront upon loading the page. Fro example, "USD"