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.
You can try out a live instance of the Reference Storefront.
To check out, use the test card number
4242 4242 4242 4242, any future expiry date, and any three-digit Card Verification Code (CVC).
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.
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.
A React PWA Reference Storefront development environment requires the following software:
- Visual Studio Code with the following extensions:
- Windows Only: Windows Subsystem for Linux (WSL)
To customize and extend the storefront, you need knowledge in the following technologies:
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.
Start building the storefront
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
You must set these values based on your own store:
|Required||String||The client ID of your store.|
|Required||String||Stripe publishable API key.|
|Required||String||Maximum number of products to display on a category page.|
|Required||String||Maximum number of products to display in compare view.|
|Required||String||Algolia application identifier.|
|Required||String||Algolia API key used to read records.|
|Required||String||Algolia Places application identifier used for address lookup.|
|Required||String||Algolia Places API key used for address lookup.|
|Required||String||Name of Algolia index used for search functions.|
|Required||Array||An array of all product attributes to display in compare view. For example, |
|Default||String||Optional override location of API endpoint.|
|Default||Object||Key-value pair of supported languages for storefront. An example is, |
|Default||String||Default language to display in storefront upon loading the page. For example. |
|Default||String||Default currency to display in storefront upon loading the page. Fro example, |