GraphCommerce is a framework for building headless ecommerce storefronts in
React and Next.js. It provides a best-in-class example, including components and
utilities, to deliver a high-performance, high-quality ecommerce Progressive Web
App (PWA).
Explore the GraphCommerce demo or start
building your custom GraphCommerce ecommerce frontend.
https://user-images.githubusercontent.com/1251986/226889542-ec403549-5e4f-4ff6-8fc5-ba879798353f.mp4
The GraphCommerce homepage, showcasing content from both Magento and Hygraph
through a variety of included UX components.
Getting started with GraphCommerce
In this guide, you will set up a GraphCommerce app locally, allowing you to
start building.
Requirements
- Install and use node 16/18:
nvm install 16 or nvm use 16
- Install yarn:
corepack enable
Step 1: Create a GraphCommerce app
git clone -b main --depth 1 https://github.com/graphcommerce-org/graphcommerce.git
# Clone repository
mkdir my-project
# Create project folder
cp -R graphcommerce/examples/magento-graphcms/. my-project && rm -rf graphcommerce && cd my-project
# Copy example, delete repo, navigate to project folder
Step 2: Configure API keys
(Optional,
continue reading)
Step 3: Start the app
yarn
# Install the dependencies
yarn codegen
# Converts all .graphql files to typescript files
yarn dev
# Run the app
🎉 Explore your GraphCommerce app running at http://localhost:3000
(Explore the GraphQL Playground running at http://localhost:3000/api/graphql)
No success? Consult the
troubleshooting guide
Next steps
- The Quick start guide covers about 80% of the
concepts you'll use, so it's a great place to start.
- Start customizing to go from "Hello
World" to a fully built GraphCommerce custom storefront.
