The latest articles on DEV Community by Erwin Otten (@erwin). https://dev.to/erwin https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F830500%2Ff8b293da-fe50-448c-8a92-105119b50e03.png https://dev.to/erwin en Erwin Otten Fri, 18 Mar 2022 15:08:19 +0000 https://dev.to/erwin/building-a-reactjs-nextjs-magento-2-pwa-with-graphcommerce-479g https://dev.to/erwin/building-a-reactjs-nextjs-magento-2-pwa-with-graphcommerce-479g <p><a href="https://www.graphcommerce.org/">GraphCommerce</a> is a front-end framework used for building headless Magento e-commerce storefronts in React.js.</p> <p><strong>Dependencies</strong></p> <ul> <li>Install and use node 14: <code>nvm install 14 &amp;&amp; nvm use 14</code> </li> <li>Install yarn: <code>npm install --global yarn</code> </li> </ul> <h2> Getting started </h2> <p><strong>Installation</strong></p> <ol> <li><code>git clone git@github.com:graphcommerce-org/graphcommerce.git</code></li> <li><code>mkdir my-project</code></li> <li><code>cp -R graphcommerce/examples/magento-graphcms/. my-project</code></li> <li><code>cd my-project</code></li> <li><code>cp -R .env.example .env</code></li> <li><code>rm CHANGELOG.md &amp;&amp; touch CHANGELOG.md</code></li> <li><code>rm -rf node_modules &amp;&amp; rm -rf .next</code></li> </ol> <p>Edit /package.json. Delete <code>"scripts": {...}</code> and rename <code>scripts_local</code> to<br> <code>scripts</code>:</p> <p><strong>Start the development environment</strong></p> <ul> <li> <code>yarn</code> Install the dependencies</li> <li> <code>yarn codegen</code> Converts all .graphql files to typescript files</li> <li> <code>yarn dev</code> Run the app</li> </ul> <p>Visit the development environment running at <a href="http://localhost:3000">http://localhost:3000</a></p> <p>That's it! GraphCommerce includes Magento-specific React components, pages, and utilities for building a high-end Magento PWA storefront.</p> <p>👉 To connect to your own Magento backend, refer to the <a href="https://www.graphcommerce.org/docs/getting-started/create">GraphCommerce installation instructions</a></p> react nextjs typescript magento