How to Setup & Installation Magento 2 PWA Studio?

by THIS ACCOUNT WAS HACKED BY @MRBAN01 on telegram THIS ACCOUNT WAS HACKED BY @MRBAN01

The PWA Studio project is a set of tools that allow for the development, deployment, and maintenance of a PWA storefront on top of Magento 2.3 and above.

PWA stands for Progressive Web Application, is a web application that uses modern web technologies and design patterns to provide a reliable, fast, and engaging user experience.

PWA websites are fast, secure, responsive, and cross-browser compatible. They are able to work offline and act like a native app on mobile.

PWA Studio Installation

It requires NodeJs and Yarn (recommended). Supports NodeJS Long-Term Support (LTS) versions.

Yarn v2 is currently not supported.

To create a PWA Studio project run this yarn command.

yarn create @magento/pwa

Answer project setup questions

After the project scaffolding command is complete, navigate to your project’s root directory.

To start the development server use this command:

yarn watch

Adding custom hostname and SSL cert

PWA features, such as service workers and push notifications in Magento 2, require HTTPS secure domains, so your development environment must serve content over HTTPS to match a production environment.

Set CUSTOM_ORIGIN_ADD_UNIQUE_HASH to false in the .env file.

Use the create-custom-origin sub-command from the buildpack CLI to create a custom hostname and SSL cert:

yarn buildpack create-custom-origin ./

Setup Magento 2 backend for PWA Studio

PWA Studio requires the appropriate PWA meta package to be installed on the backend.

And the Magento 2 backend must be on secure domain HTTPS.

You can download meta-packages from this git repository.

https://github.com/magento/magento2-pwa

Create ext/magento/ directory on the Magento root directory. Extract the downloaded zip in ext/magento/ directory.

Run these composer commands to install PWA Studio meta packages on your Magento 2 backend.

composer config minimum-stability dev

composer config repositories.ext path "./ext/*/*/*"

composer require magento/pwa

Install Venia sample data on Magento 2 backend

PWA Studio by default uses the Venia theme for the storefront. And it looks best with the Venia sample data installed on the backend.

Venia sample data required PHP 7.4+

Run these commands on your Magento root directory in the given sequence to install Venia sample data.

composer config --no-interaction --ansi repositories.venia-sample-data composer https://repo.magento.com

composer require --no-interaction --ansi magento/venia-sample-data:*

bin/magento setup:upgrade

bin/magento indexer:reindex

Originally published on webkul.com