You're ready to create a GraphCommerce storefront. You want to set up your development environment so that you can begin development.
In this tutorial, you'll create a GraphCommerce app locally to begin developing a full-featured storefront. GraphCommerce is a front-end framework used for building headless Magento e-commerce PWA's.
After you've finished this tutorial, you'll have accomplished the following:
You've familiarized yourself with React ↗, Next.js ↗, and Mui ↗. GraphCommerce is a front-end React framework that uses Next.js for server-side rendering.
If you want to test a GraphCommerce storefront using a pre-configured Magento demo store and a pre-configured Hygraph project with demo content, then you need to only install the dependencies. This is the quickest approach.
nvm install 16
or nvm use 16
corepack enable
https://user-images.githubusercontent.com/1251986/158647122-dc57002f-a9c2-4661-a0a0-28a868ecf2f8.mp4
git clone -b main --depth 1 https://github.com/graphcommerce-org/graphcommerce.git
clone repositorymkdir my-project
create project foldercp -R graphcommerce/examples/magento-graphcms/. my-project && rm -rf graphcommerce
copy example, delete repocd my-project
change directory to project folderrm CHANGELOG.md
remove changelogBy default, the .env file is configured with API keys from a demo Magento store and a demo Hygraph project. If you want to test your GraphCommerce app using the demo store, then you can start the development environment. Only proceed with the following steps if you want to develop a GraphCommerce storefront using your own Magento store and/or Hygraph project.
To order to be able to connect your GraphCommerce app to your Magento backend and/or Hygraph project, you'll need:
To connect your GraphCommerce app to your Magento backend and/or Hygraph project, you need to update variables in the graphcommerce.config.js file. The graphcommerce.config.js file contains useful information about your storefront.
Create a copy: cp graphcommerce.config.js.example graphcommerce.config.js
and
configure the following fields:
Store code configuration:
List of routes and store_codes:
Admin > Store > Configuration > General > General > Locale
), the user is
automatically redirected to the corresponding storeview.If you need to fetch a list of available store_codes, run
yarn dev
when you entered yourMAGENTO_ENDPOINT
. The app won't build, but the GraphQL explorer will start athttp://localhost:3000/api/graphql
. Enter the following query:query { availableStores { store_code store_name } }
yarn
Install the dependenciesyarn codegen
Converts all .graphql files to typescript filesyarn dev
Run the appVisit the development environment running at http://localhost:3000
Visit the GraphQL Playground running at http://localhost:3000/api/graphql
No success? Refer to common build errors or ask your question in the public Slack community ↗ chat