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
You can also check our other blogs https://webkul.com/blog/what-is-page-builder-in-magento-2/
Be the first to comment.