Build a PWA Ecommerce with PWA Studio and Magento 2

Tutorial overview

This tutorial provides the first steps for working with PWA Studio by teaching you how to set up a new storefront project. To see a demo of the Venia concept storefront, visit venia.magento.com.

WHAT IS A PROGRESSIVE WEB APP?

Progressive web applications for eCommerce stores are becoming a real hit. The number of users who shop from their mobile devices is continuously increasing. In essence, a PWA is not actually an application that we’re used to in the conventional sense. It’s a very modern, fast, and highly-optimized mobile version of a website.

PWA uses modern tools and libraries to create a system and framework that work according to the principles of Magento. With PWA Studio, developers can build an app that works on all devices, which saves space and ensures the app works fast.

Magento 2 PWA Studio provides a set of modern tools and libraries:

• Webpack

• React

• Redux

• GraphQl

• PWA-builderpack: includes main development tools for creating a Magento PWA

• Peregrine: is a collection of React based on UI components for Magento PWA projects. Use, extend or remix these components to create a unique storefront.

• Venia : core storefront built using PWA Studio’s libraries, it uses 

  React, Redux, GraphQL, CSS Modules 

  and many other technologies as part of its stack.

In your terminal enter this cli command

yarn create @magento/pwa

After the scaffolding command completes, navigate to your project's root directory:

cd project-name
yarn buildpack create-custom-origin ./
yarn watch

Now open .env file and update  

MAGENTO_BACKEND_URL // Example : https://venia.magento.com/