Set up the Gatsby demo store

After you set up the demo store, you can customize it to suit your needs.

Prerequisites

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.
• Algolia account - Algolia is used for searches.
• Algolia Places account - The checkout process uses Algolia Places for quick address lookup.

Set up the Gatsby store

1. Set up a demo store.

   From a command prompt, run the following commands:

   gatsby new gatsby-demo-store https://github.com/moltin/gatsby-demo-store
   cd gatsby-demo-store
   yarn
   

2. Configure the environment variables that are required to run the project.

   In the root directory, create an .env file and add the following variables with your account secrets:

   GATSBY_MOLTIN_CLIENT_ID=
   GATSBY_STRIPE_PUBLISHABLE_KEY=
   GATSBY_ALGOLIA_PLACES_APP_ID=
   GATSBY_ALGOLIA_PLACES_API_KEY=
   GATSBY_ALGOLIA_INDEX_NAME=
   ALGOLIA_ADMIN_KEY=
   GATSBY_ALGOLIA_API_KEY=
   GATSBY_ALGOLIA_APP_ID=
   GATSBY_ITEMS_PER_PAGE=
   

3. From your Dashboard, configure Stripe as the payment gateway.

4. Optionally, you may trigger a push of your Elastic Path Commerce Cloud catalog to Algolia.

   note

   Executing the push overwrites any product data you currently have within Algolia under the index name provided in GATSBY_ALGOLIA_INDEX_NAME.

   From a command prompt, run the following command:

   yarn build
   

5. Start the demo store.

   From a command prompt, run the following command:

   yarn dev