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.
In this guide, you will set up a GraphCommerce app locally, allowing you to start building.
nvm install 16
or nvm use 16
corepack enable
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
(Optional, continue reading)
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