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.
Magento 2 Company ? Read More
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:
Adding custom hostname and SSL cert
PWA features, such as service workers and push notifications, 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.
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.
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:*
You can also check our other blogs https://webkul.com/blog/what-is-page-builder-in-magento-2/