How To Install (Adobe Commerce) Magento PWA Studio

Magento PWA Studio gives you everything you need to create Progressive Web Application (PWA) storefronts powered by Adobe Commerce or Magento Open Source. It provides tools to help you set up a development environment and libraries to create your own storefront components and extensions.

Magento PWA Studio Demo link

Benefits of PWA

  • Unlimited UX Control
  • Lightning-fast Web Performance
  • Installable on Mobile and Desktop
  • Small size
  • Push notifications
  • Instant updates

Read more: Headless Ecommerce Solutions 

Minimum requirements

  • A basic knowledge of React
  • Node >= 14
  • Yarn (recommended) or NPM

Steps To Install Magento PWS Studio 

Step 1: Using the scaffolding tool to install Magento PWA Studio

PWA Studio provides a scaffolding tool to simplify project creation and help developers get started.


npm init @magento/pwa



yarn create @magento/pwa

Step 2: Answer project setup questions

Project root directory – Specify which directory you want to install PWA studio

Magento instance – Provide your Magento instance domain by selecting Other

Install package dependencies with npm after creating the project – Select Yes 

Step 3: Run PWA Studio in development mode

Start the dev server and do real-time development


npm run watch



yarn watch

Once the command runs successfully you’ll see something like the below result.

PWADevServer ready at
GraphQL Playground ready at


We installed PWA Studio in our local.

Update environment variables (optional)

Connect to an instance of Magento by specifying its public domain name.

MAGENTO_BACKEND_URL=  //your magento running domain
DEV_SERVER_PORT=0  // Default when not set: 0

More Details

PWA Dev doc

Find the latest release of Magento PWA studio –

Find PWA Studio Venia features –

For common setup issues refer


What is PWA?

A progressive web app (PWA) is an app that’s built using web platform technologies, but that provides a user experience like that of a platform-specific app.

Benefits of using Magento PWA Studio?

Using PWA Studio, merchants can build their own high-performance PWA headless solutions, which are proven to increase user engagement, boost conversion rates, and diversify revenue streams.

Where we can find the latest release of Magento PWA Studio?

Find the latest release of Magento PWA studio:

Where we can check compatibility for PWA Studio and Magento?

If you are working directly with the PWA Studio repository, make sure the version you are working with is compatible with your Adobe Commerce or Magento Open Source backend. Refer:

How does the Luma theme differ from the PWA Studio Storefront?

Unlike an Adobe Commerce or Magento Open Source theme, a storefront application does not inherit from a parent theme. Instead, the application is composed of React modules that provide different pieces of functionality. These pieces can be swapped out to change behavior or even removed entirely.

What are the known limitations of the PWA Studio Storefront?

Page Builder integration within PWA Studio only supports Adobe Commerce and Magento Open Source CMS Pages created with Page Builder. It does not support CMS Blocks, Product content, or Category content created with Page Builder. Staging and Preview are not supported. Know more about limitations:

About The Author

We take the guesswork out of ecommerce.
Schedule a consultation call today