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
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.