How To Set Up Magento 2 PWA Studio The RIGHT Way?

There are many tools to build a Magento Progressive Web App, however, the best ones to use are the Magento PWA Studio or solutions based on it such as TigrenPWA ready-made theme. In this blog post, we will show you how to set up Magento 2 PWA Studio step by step.

magento pwa studio installation
PWA Studio Venia & TigrenPWA theme (based on PWA Studio)

What Is Magento 2 PWA Studio?

The Magento PWA Studio project is a set of developer tools that allow for the development, deployment, and maintenance of a PWA storefront on top of Magento 2.3 and above. It uses modern tools and libraries to create a build system and framework that adheres to the Magento principle of extensibility.

Major Pros & Cons Of Magento PWA Studio

5 Strengths of PWA Studio

  1. It’s the only official tool for Magento PWA development provided by Magento.
  2. It facilitates the process of developing a PWA for Magento and makes things easier.
  3. It is upgraded frequently (parallel with Magento 2 versions).
  4. It’s free, any developer can download and use it for their projects.
  5. It’s easy to install (check the following guide you will see).

3 Weaknesses of PWA Studio

  1. It does not fully support Magento default features.
  2. It’s in progress, with lots of bug fixes in every version.
  3. The Venia PWA Studio storefront is not attractive.

As you can see, although PWA Studio is the best tool for Magento Progress Web App development, it still has certain disadvantages. To deal with it, you can consider using a ready-to-use PWA theme for Magento 2 that is based on the PWA Studio. It can deliver more eye-catching options of storefront design while supporting more Magento features.

For example, you can compare Magento PWA Studio and TigrenPWA to see the differences.

magento 2 pwa studio setup
TigrenPWA

It’s worth noting that, now there are a lot of Magento PWA themes; however, many of them are not built from the PWA Studio. You should carefully select the best one for your need.

Read more: Magento PWA Studio Vs Vue Storefront: Comparison & Advice

Requirements For Magento PWA Studio Installation

  1. Magento 2 backend: Without it, your Magento PWA storefront will be pointed to the default Magento 2 backend.
  2. NodeJS: Your Node version must be from 10.14.1 LTS and above. To check your existing one: node -v
  3. Yarn: Besides NodeJs, your Jarn version also needs to be at least 1.13.0. To check your current one: yarn -v
  4. Magento UPWARD Connector extension: This extension is used for routing requests to UPWARD-PHP.

5 Steps To Set Up Magento 2 PWA Studio

Step 1: Run the following commands to install the PWA Studio

cd
into the directory where you want to install PWA Studio and run the command:

yarn create @magento/pwa

Then, you need to answer all the questions in the terminal as the following guide:

Magento PWA Studio terminal
  • Project root directory (will be created if it does not exist): you have to enter your root directory’s name.
  • Short name of the project to put in the package.json “name” field: you must enter your project name.
  • Name of the author to put in the package.json “author” field: you need to enter the author information with the format: Author Name <author email>. For example: TigrenPWA <[email protected]>
  • Magento instance to use as a backend (will be added to ‘.env’ file): you should select Magento 2.3.3 with Venia sample data installed to include the sample data from the PWA Studio Venia theme. Also, your PWA storefront will be pointed to the default Magento backend on Cloud. However, it’s possible to point it back to your Magento backend later.
  • Braintree API token to use to communicate with your Braintree instance (will be added to ‘.env’ file): you need to press Enter.
  • NPM package management client to use: here you must select yarn.
  • Install package dependencies with yarn after creating the project: finally, you need to select Yes.

Step 2: Set up the environment variables

If you want to change the environment variables (e.g.: MAGENTO_BACKEND_URL, BRAINTREE_TOKEN/), you need to update your project’s .env file and alter the property values.

MAGENTO_BACKEND_URL=https://magento-backend.example.com/

BRAINTREE_TOKEN=xxxxxxxxxxxxxxxxxxxxx

Step 3: Prepare PWA Studio build

Run the following commands in the PWA Studio root project directory:

yarn install

yarn build

Step 4: Install the Magento UPWARD Connector extension

The Magento 2 UPWARD connector is a module for routing requests to UPWARD-PHP. It will replace the default Magento front-end template with the powerful PWA Studio storefront.

You need to run the following commands in the Magento root project directory in order to install that module:

composer require magento/module-upward-connector

bin/magento s:up

bin/magento s:d:c

bin/magento s:s:d

Step 5: Configure the Magento UPWARD Connector module

You can easily configure the UPWARD Connector by following Magento’s tutorial.

Final Words

The Magento PWA Studio will give you a solid foundation to develop a Magento 2 Progressive Web App. Follow our steps then you can set it up with ease.

If you want to get help with Magento PWA Studio setup or Magento PWA development, consider using Tigren’s Magento 2 PWA development service and ready-made solutions.

magento progressive web app tutorial

Read More:

What Is Magento PWA Studio? – Full Explanation

Magento PWA Studio Vs Vue Storefront: Comparison & Advice