Reading list Switch to dark mode

    Magento 2 PWA Studio Setup and Installation

    Updated 2 March 2023

    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.

    Searching for an experienced
    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:

    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.

    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

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

    bin/magento setup:upgrade

    bin/magento indexer:reindex

    You can also check our other blogs

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*

    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home