Build a PWA Ecommerce with PWA Studio and Magento 2
Published : 24th February 2022 | by @faisaljebali
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:
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:
yarn buildpack create-custom-origin ./
Now open .env file and update
Example : https://venia.magento.com/