bubble-icon

Developer preview
This is a developer preview of GraphCommerce. The documentation will be updated as GraphCommerce introduces new features and refines existing functionality.

GraphCommerce

GraphCommerce is a front-end framework used for building headless Magento e-commerce storefronts in React. It includes the structure, components, and tooling you need to get started so you can spend your time styling and designing high-end e-commerce progressive web apps (PWA).

https://user-images.githubusercontent.com/1251986/154977573-4015e77c-43e7-481e-ab97-60c365c6b746.mp4

GraphCommerce magento-graphcms example demo

Stack

  • Typescript
  • React
  • Nextjs
  • GraphQL
  • Mui
  • Apollo Client
  • GraphQL Code Generator
  • Framer Motion

Getting Started

GraphCommerce offers a magento-graphcms example that provides a full-featured storefront. The example integrates with your Magento backend and provides a full purchase journey out-of-the-box. It uses GraphCMS to enrich pages with multiple content components, like the homepage.

The magento-graphcms example is styled using the Mui component library. You can start styling by making changes to the theme.

Features

GraphCommerce features include:

  • App-like e-commerce UI
  • Magento e-commerce component library including cart, search, layered navigation components and category, product, account, checkout pages
  • Optimized front-end performance, including bundling, image optimization, CDN caching
  • Predictive URL prefetching and caching
  • Hybrid Static Site Generation (SSG)
  • SEO optimized, including accessibility, sitemap.xml, canonicals, metadata
  • Data fetching from multiple sources with the included GraphQL Mesh (composable commerce)
  • Passing Google Core Web Vitals audits
  • PWA out-of-the-box
  • Magento multi-language support, a store switcher component, and framework translations EN, ES, FR, DE, NL, IT
  • Deployments to Vercel

Build high-end Magento storefronts faster

GraphCommerce accelerates the Magento front-end development process by using a carefully chosen, industry standard, tech stack. It includes Magento-specific React components, pages, and utilities for e-commerce. They're accessible, performant, and ready for use. They also help to reduce the initial complexity and boilerplate needed for building a custom storefront.

FAQ

Is GraphCommerce a Magento PWA theme?

Is GraphCommerce a Magento PWA theme?

GraphCommerce is not a Magento PWA theme, nor is it a Magento 2 PWA extension. A Magento theme is tightly integrated in the Magento codebase, where a GraphCommerce storefront runs as a separate application.

GraphCommerce can be deployed on the same or a different server than the Magento backend is hosted on. All data is fetched from the Magento 2 GraphQL API. Once you finish GraphCommerce Magento PWA development and you are ready to launch, the regular Magento front-end (theme and extensions) can be decommissioned.

Is GraphCommerce a PWA Studio Magento 2 alternative?

Is GraphCommerce a PWA Studio Magento 2 alternative?

Yes, GraphCommerce is suitable as an alternative to Magento 2 PWA Studio. GraphCommerce is built with modern, open-source javascript frameworks and libraries. Unlike PWA Studio for Magento 2, it features an app-like e-commerce user interface, Hybrid Static Site Generation (SSG) and has the ability to fetch data from multiple sources (composable commerce). Get started with GraphCommerce if you're looking for a PWA Studio Magento 2 alternative and would like to start with Magento PWA development.

Next steps

  • Get started with GraphCommerce and begin building a custom storefront.