DEV Community

Cover image for Building a React.js, Next.js Magento 2 PWA with GraphCommerce
Erwin Otten
Erwin Otten

Posted on

Building a React.js, Next.js Magento 2 PWA with GraphCommerce

GraphCommerce is a front-end framework used for building headless Magento e-commerce storefronts in React.js.

Dependencies

  • Install and use node 14: nvm install 14 && nvm use 14
  • Install yarn: npm install --global yarn

Getting started

Installation

  1. git clone git@github.com:graphcommerce-org/graphcommerce.git
  2. mkdir my-project
  3. cp -R graphcommerce/examples/magento-graphcms/. my-project
  4. cd my-project
  5. cp -R .env.example .env
  6. rm CHANGELOG.md && touch CHANGELOG.md
  7. rm -rf node_modules && rm -rf .next

Edit /package.json. Delete "scripts": {...} and rename scripts_local to
scripts:

Start the development environment

  • yarn Install the dependencies
  • yarn codegen Converts all .graphql files to typescript files
  • yarn dev Run the app

Visit the development environment running at http://localhost:3000

That's it! GraphCommerce includes Magento-specific React components, pages, and utilities for building a high-end Magento PWA storefront.

👉 To connect to your own Magento backend, refer to the GraphCommerce installation instructions

Top comments (0)