Developer preview
This is a developer preview of GraphCommerce. The documentation will be updated as GraphCommerce introduces new features and refines existing functionality.
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).
Concepts | Customizing | Other |
---|---|---|
Static generation | Theming | Translations |
Environment Variables | Typography | Troubleshooting |
Deployment | Favicon | SEO |
GraphCMS | Icons |
When you create a GraphCommerce app, the GraphCommerce magento-graphcms example comes with a basic file structure of a GraphCommerce project that's integrated with Magento and GraphCMS. Most of the files that you'll work within your GraphCommerce project are located in the /components or /pages directories.
File structure of the graphcommerce-magento example
├── components
└── Layout
└── Footer.tsx
└── LayoutFull.tsx
└── GraphCMS
└── Asset
└── RowHeroBanner
└── RowQuote
└── theme.ts
└── ...
├── GraphQL
└── CategoryPage.graphql
└── PageLink.graphql
└── ...
├── pages
└── product
└── [url].jsx
└── ...
└── page
└── [...url].jsx
└── [...url].tsx
└── [cart].tsx
└── _app.tsx
└── _document.tsx
└── ...
├── locales
└── en.po
└── nl.po
└── ...