graphcommerce-org / graphcommerce

GraphCommerce® is a headless storefront replacement for Magento 2 (PWA), that delivers a faster, better user experience. Fully customizable (React, Next.js) and open-source.
https://www.graphcommerce.org
Other
305 stars 70 forks source link
ecommerce graphql headless magento2 pwa react typescript

GraphCommerce Logo

📚 [Docs](https://graphcommerce.org/docs) | 🗣 [Slack](https://join.slack.com/t/graphcommerce/shared_invite/zt-11rmgq1ad-F~0daNtKcSvtcC4eQRzjeQ) | 📝 [Release notes](https://github.com/graphcommerce-org/graphcommerce/releases)

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

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