example-storefront

(★ 613)

Example Storefront is Reaction Commerce’s headless ecommerce storefront - Next.js, GraphQL, React. Built using Apollo Client and the commerce-focused React UI components provided in the Storefront Component Library (reactioncommerce/reaction-component-library). It connects with Reaction backend with the GraphQL API.

File Explorer

Download Latest Version (.zip)

- - calibre-deploy.sh
  - docker-tags
  - should-run-snyk.sh
- config.yml
- - bug_report.md
- pull_request_template.md
- .gitignore
- commit-msg
- - post-build
  - post-project-start
  - post-system-start
  - pre-build
  - README.md
- headerLanguage.js
- localeMiddleware.js
- redirect.js
- fix-volumes
- package-link
- package-unlink
- package-update
- setup
- start
- wait-for.sh
- - AccountDropdown.js
  - index.js
- - Breadcrumbs.js
  - index.js
- - Cart.js
  - CartToggle.js
  - index.js
- - CartItems.js
  - index.js
- - CartPopover.js
  - index.js
- - CatalogGridItem.js
  - index.js
- - CheckoutActions.js
  - index.js
- - CheckoutButtons.js
  - index.js
- - CheckoutSummary.js
  - index.js
- - Divider.js
  - index.js
- - ChangePassword.js
  - Entry.js
  - EntryModal.js
  - ForgotPassword.js
  - index.js
  - Login.js
  - ResetPassword.js
  - SignUp.js
- - Footer.js
  - Footer.test.js
  - index.js
- - Header.tsx
  - index.ts
- - index.js
  - Layout.js
- - index.js
  - Link.js
- - index.js
  - LocaleDropdown.js
- - index.js
  - MediaGallery.js
- - index.js
  - MediaGalleryItem.js
- - index.js
  - MiniCart.js
- - index.js
  - NavigationDesktop.js
  - NavigationItemDesktop.js
- - index.js
  - NavigationItemMobile.js
  - NavigationMobile.js
  - NavigationSubMenuMobile.js
  - NavigationToggleMobile.js
- - index.js
  - OrderCard.js
- - index.js
  - OrderCardFulfillmentGroup.js
- - index.js
  - OrderCardHeader.js
- - index.js
  - OrderCardStatusBadge.js
- - index.js
  - OrderCardSummary.js
- - index.js
  - OrderFulfillmentGroup.js
- - index.js
  - OrderSummary.js
- - index.js
  - PageLoading.js
- - index.js
  - PageSizeSelector.js
- - index.js
  - PageStepper.js
- - index.js
  - ProductDetail.js
- - index.js
  - ProductDetailAddToCart.js
- - index.js
  - ProductDetailDescription.js
- - index.js
  - ProductDetailOption.js
  - styles.js
- - index.js
  - ProductDetailOptionsList.js
- - index.js
  - ProductDetailPrice.js
- - index.js
  - ProductDetailTitle.js
- - index.js
  - ProductDetailVendor.js
- - index.js
  - ProductGrid.js
  - ProductGridEmptyMessage.js
- - index.js
  - ProductGridHero.js
- - index.js
  - ProductGridTitle.js
- - index.js
  - Profile.js
  - ProfileContainer.js
  - viewer.gql
- - index.js
  - ProfileAddressBook.js
- - index.js
  - ProfileMenu.js
- - index.js
  - ProfileOrders.js
- - index.js
  - ProgressiveImage.js
- - index.js
  - Select.js
- - FacebookSocial.js
  - index.js
  - TwitterSocial.js
- - index.js
  - SortBySelector.js
- - .gitignore
  - index.js
  - package.json
  - StripeCard.js
  - StripeInput.js
- - index.js
  - VariantItem.js
- - index.js
  - VariantList.js
- - withAddressBook.js
  - withAddressValidation.js
- - withCart.js
- - catalogItems.gql
  - withCatalogItems.js
- - withOrder.js
  - withOrders.js
- AuthContext.js
- CartContext.js
- ContextProviders.js
- LocaleContext.js
- RoutingContext.js
- ShopContext.js
- TagsContext.js
- UIContext.js
- - index.js
  - provider.example.js
  - segment.js
- componentsContext.js
- favicons.js
- paymentMethods.js
- reactionTheme.js
- README.md
- - README.md
- - breadcrumbs.md
- cart.md
- page-architecture.md
- README.md
- static-assets.md
- tags.md
- testing.md
- theming.md
- tracking-events.md
- inject.js
- withTranslation.js
- - mutations.gql
  - query.gql
  - useAddAccountAddressBookEntry.js
  - useAddressValidation.js
  - useRemoveAccountAddressBookEntry.js
  - useUpdateAccountAddressBookEntry.js
- - availablePaymentMethods.gql
  - useAvailablePaymentMethods.js
- - fragments.gql
  - mutations.gql
  - queries.gql
  - useCart.js
- - useAuthStore.js
  - useCartStore.js
  - useRoutingStore.js
  - useUIStore.js
- - fragments.gql
  - placeOrder.gql
  - queries.gql
  - useOrder.js
  - useOrders.js
- - useShop.js
- - useViewer.js
  - viewer.gql
- useStores.js
- useTags.js
- useTranslation.js
- - apolloClient.js
  - omitVariableTypenameLink.js
  - withApollo.js
- - constants.js
  - dispatch.js
  - track.js
  - trackCartItems.js
  - trackCheckout.js
  - trackCheckoutStep.js
  - trackOrder.js
  - trackProduct.js
  - trackProductClicked.js
  - trackProductListViewed.js
- - calculateRemainderDue.js
  - calculateRemainderDue.test.js
  - cartItemsConnectionToArray.js
  - cartItemsConnectionToArray.test.js
  - decoding.js
  - encoding.js
  - executionEnv.js
  - hashPassword.js
  - isProductBestseller.js
  - isProductBestseller.test.js
  - isProductLowQuantity.js
  - isProductLowQuantity.test.js
  - isProductOnSale.js
  - isProductOnSale.test.js
  - locales.json
  - pageSizes.js
  - pagination.js
  - pagination.test.js
  - priceByCurrencyCode.js
  - priceByCurrencyCode.test.js
  - relayConnectionToArray.js
  - relayConnectionToArray.test.js
  - SharedPropTypes.js
  - variantById.js
  - variantById.test.js
  - withLocales.js
- accountsServer.js
- - cart.js
  - index.js
  - login.js
- - detectLanguage.js
  - sitemap.js
- _app.js
- _document.js
- _error.js
- - apple-touch-icon.png
  - favicon-16x16.png
  - favicon-32x32.png
  - favicon.ico
  - manifest.json
  - safari-pinned-tab.svg
- - placeholder.gif
- - catalogItemProduct.js
  - fetchCatalogProduct.js
- - fetchPrimaryShop.js
  - primaryShop.js
- - fetchTag.js
  - tag.js
- - fetchAllTags.js
  - tags.js
- - fetchTranslations.js
- graphQLRequest.js
- - index.js
- config.js
- i18nRouter.js
- isLocale.js
- material.d.ts
- reaction.d.ts
.babelrc
.dockerignore
.editorconfig
.env.example
.env.prod
.eslintignore
.gitignore
.graphqlrc
.nvmrc
.prettierrc
.snyk
CHANGELOG.md
CODE_OF_CONDUCT.md
config.js
CONTRIBUTING.md
docker-compose.dev.yml
docker-compose.yml
Dockerfile
LICENSE
next-env.d.ts
next.config.js
package.json
README.md
setupTests.js
tsconfig.json
yarn.lock

# Installation Guide

1. Get the code

git clone https://github.com/reactioncommerce/example-storefront

Downloads the entire project code from GitHub to your computer.

cd example-storefront

Moves into the project folder you just downloaded.

2. Docker

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Docker Desktop Needed to build and run containers. Install it and keep it running in the background.

ln -s docker-compose.dev.yml docker-compose.override.yml

Runs the command against the services defined in the compose file.

docker-compose up -d && docker-compose logs -f

Runs the command against the services defined in the compose file.

docker-compose run --rm --service-ports web yarn start

Runs the command against the services defined in the compose file.

docker-compose run --rm web [command]

Runs the command against the services defined in the compose file.

docker-compose run --rm web yarn test

Runs the command against the services defined in the compose file.

✅ Run docker compose ps to check the containers are Up. If the README mentions a port, open http://localhost:PORT in your browser.

Pulled directly from this repo's README.

3. Node.js

Easy

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

docker-compose run --rm --service-ports web yarn start

Runs the command against the services defined in the compose file.

docker-compose run --rm web yarn test

Runs the command against the services defined in the compose file.

docker-compose run --rm web yarn test --no-cache

Runs the command against the services defined in the compose file.

docker-compose run --rm web yarn add --dev [package]

Runs the command against the services defined in the compose file.

docker-compose run --rm web yarn install

Runs the command against the services defined in the compose file.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.