Set up the storefront locally

Get the storefront source code, configure it for your environment, and launch the web service. When you are done, you can view the storefront locally in a supported web browser.

Get the source code

Clone the repository and install dependencies.

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

The parameters that require configuration are in the ./src/config.ts file.

You must set these values based on your own store. They are prepopulated with the demonstration values when you download the 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.
endpointURL	Default	String	Optional override location of API endpoint.

Start the application

Run the following command to start the local version of the storefront.

yarn start

View the storefront

To see the storefront running locally in your browser, go to http://localhost:3000/.

When you make changes to your local storefront, you see the changes immediately in your browser.