Magento PWA Studio Tutorial: Step by Step to Get Maximum Customers

Posted by

Are you familiar with Magento PWA Studio Tutorial?

Or do you even know what PWA is?

This article will answer all related questions.

If you are looking for a way to leverage your online store, create a much better mobile experience on your website, you cannot overlook this blog.

In this blog, we will provide:

  • A clear overview of Progressive Web Application (PWA) in general and its benefits
  • An introduction to Magento PWA Studio Project
  • Basic concepts of Magento PWA
  • Magento PWA Studio Tutorial

Now, let’s get started!

What Is Progressive Web Application?


>>> Read Later: How to Optimize Magento 2 Order Management?

Progressive Web Application (PWA in short) is simply a web application applying modern web technologies to bring about a reliable, fast, and engaging customer experience.

Also, PWA can perform like a native app on smartphones. Therefore, it is extremely useful when customers tend to shop online by using phones, especially using available applications.

PWA’s Benefits


As PWA applies advanced web technologies, many online stores nowadays develop their web applications to attract more engaged customers:

  • Fast: Various performance optimization techniques are applied to improve the fast-loading functionality.
  • Mobile-friendly: As PWA is designed for smartphones, it is clear that those applications are fit in any size of any device.
  • Security & Reliable: PWA sites use HTTPS connections to improve security.
  • Installable: It is more convenient for customers to install the apps and access an online store with just one click.
  • Offline usable: As the apps are installed on mobile devices, customers can use it even when it is not connected to the Internet. All the actions will be updated as soon as the Internet is available.
  • Shareable: In any application, there is a button that enables you to share the content on social media with one click.
  • Easily keep customers engaged: The comfortability of PWA sites can make customers stay longer in your store. Also, the feature of sending notifications directly to their phones can keep them updated as well.

PWA Basic Concepts


>>> Have A Look Here: Magento Sample Data – Install, Update, Remove Guide (2020 Updated)!

Before going in-depth with the tutorial, let’s look over these following basic concepts and make sure that you understand it well to work with PWA tools.

Application Shell

An application shell provides a fundamental structure of the user interface for a progressive web application. The structure is used in Magento PWA Studio to reduce the time spent loading a branded experience in the UI.

This approach involves heavily caching the minimal amount of HTML, CSS, and JS to load the basic UI of the page before fetching the rest through an API.

Service Worker

A service worker is a script that runs in the background. It is used for caching and resource recovery.

Component Data Binding

Component data binding is the way data move between the source and a UI component. PWA uses component data binding to connect dynamic data with the user interface.



Similar to REST, GraphQL is a query language on a server. It is used in PWA to push data.

In comparison with REST, GraphQL is more powerful, flexible, and effective.


  • Predictable results from the query
  • A single request for many results
  • Organized data with typed schema

Client State, Reducers & Actions

Client State, Reducers & Actions are Redux concepts that are used to manage and update the status of a web application.

Loading & Offline States

Both loading and offline states are concepts that must be dealt with by PWA.

Container Extensibility

A Container is an HTML element that contains 0 or more Containers Child components. It acts as the target for Magento-loader-layout operations.

With container extensibility, you can reuse and modify your container with no adjustment of the source.

CSS Modules


CSS modules are reusable CSS styles that enable you to develop components with styles but still compatible with external styles.

Performance Patterns

This is an essential concept in PWA, which includes many strategies and patterns available to enhance PWA performance.

Root Components & Routing

A root component of an app is the DOM node under which all other nodes are managed by React.

Routing is the ability to arrange a URL pattern to a suitable handler.

Critical Path

To display a website, we need a critical path, which are steps required to process the HTML, CSS, and JavaScript files. If you want the best performance of your web application, you need to optimize the critical path.

What Is Magento PWA Studio Project?


>>> Don’t Miss This: Magento 2 Testing Framework to Cover All Parts of Your Website!

Magento PWA Studio Project is a set of tools that allows developers to develop, deploy, and maintain the PWA storefront on top of Magento 2.

Advanced tools and libraries are used to create a build system and framework that follow the Magento principles of extensibility.

The Magento PWA Studio Project provides the following tools:

  • pwa-buildpack CLI tools: Core constructing and development tools.
  • Peregrine hooks & components: A collection of parts and React hooks.
  • Venia store & visual components: A proof of concept Magento 2 storefront & visual elements can be used in Magento stores.
  • UPWARD: A specification of a file that determines the behavior of the server.
  • Magento PWA documentation that guides developers to build Magento 2 storefront.
  • Shared Magento server: Sample data, make sure that the version of Magento is updated.

Magento PWA Studio Tutorial – Project Setup Guide


>>> Check It Out: More Magento tutorials to optimize e-commerce sites!

This comprehensive tutorial provides several best practices of Magento PWA Studio that help to integrate PWA into Magento.

Besides, in this blog, we just provide tutorials of setting-up step, which is a fundamental step of the whole process.

Getting Started


If you haven’t installed Yarn, Node.js, please install it to setup Magento PWA Storefront.

In case you have it, you need to check the versions by running the 2 following commands:

node -v
yarn -v

STEP 1: Run The Scaffolding Tool

In the terminal, you need to navigate to the directory where you want to install your storefront project and run the scaffolding tool:

yarn create @magento/pwa

Alternative commands:

npx @magento/create-pwa
npm init @magento/pwa

Then, please answer the following questions from the interactive questionnaire:


Run this command to navigate to your project’s root directory:

cd pwa-studio-fundamentals

STEP 2: Start The Storefront Application

In the second step of the Magento PWA tutorial, you need to execute the below command to start the dev server at

yarn watch

After that, it will detect whether there is any change or not. If a change is identified, the application running in the browser will update the change.

To stop the dev server, please press the key combination of Ctrl+C in the running terminal window.

STEP 3: Add A Custom Hostname & SSL Certificate

This step is necessary, especially when working on many storefront projects, as each project needs a custom hostname to avoid conflict with service workers or ports.

You can simply create a custom hostname and SSL certificate by using create-custom-origin sub-command as followed:

yarn buildpack create-custom-origin ./

Update Environment Variables (Optional)

You can choose to perform this step or not since the scaffolding command already adds the required environment variables to the environment file.

In case you want to, you can update your project’s .env file and change the property values.

You can find more Magento PWA Studio Tutorials in Magento PWA documentation.



Because it is kind of complicated to set up the project, errors can happen anytime. Let’s see some common faults and how to fix it.

Node Version Error

This fault may happen because you are using the wrong node version. Specifically, the node v12 is not compatible with early versions of the PWA studio.

To solve this problem, you should use a node version manager, for example, n or nvm, to switch to different versions.

Caching Problems

In case you face a caching problem, just simply empty the full application storage and start over.

Let us give you a specific example of using Chrome:


  • Open the Developer Tools
  • In the Application tab, select Clear Storage
  • Press the “Clear site data” button to finish

Unable to Get The Data from Magento

If you are running into a problem that your storefront does not get the data from Magento, you should verify the MAGENTO_BACKEND_URL in your .env file, which is accessible from your dev server.

Privacy Error


This issue is quite common while visiting a website.

The reason is that your project has an invalid or expired certificate. As a result, the browser doesn’t trust the generated SSL certificate.

Some users have suggested deleting the devcert folder to trigger certification regeneration.

Such a folder is found at different places in different operating systems.

In MacOS:

~/Library/Application Support/devcert

In Window system:



In conclusion, PWA is so useful that we highly recommend online store owners to set up to gain more customers.

We hope that this Magento PWA Studio Tutorial is helpful to start working on Magento PWA. If you want us to deliver more Magento PWA tutorials, don’t hesitate to comment in the section below.

Thanks a lot for reading!

Leave a Reply

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