How to Setup PWA Studio in Magento 2?

Now that Progressive Web Application has gained quite a rise in adaptation in the eCommerce industry, people have started questioning ways to setup PWA Studio in Magento 2. In today’s tutorial, we will answer to this question with a guide on how to deploy one’s own custom theme based on the popular Venia concept of Magento PWA Studio.

This is not as easy as setting up any other extension, but we are here to guide you step by step in installing Magento PWA Studio by yourself with the help of npm package.

Recommended Read: MageDelight PWA Studio for Magento 2

First of all, Let us Discuss What are the Pre-requisites:

1. Magento 2 Backend
2. NodeJS (>=10.14.1 LTS). To check your current Node version: node -v
3. Yarn (>= 1.13.0). To check your current Yarn version: yarn -v

Steps to Install Yarn

Install the global Yarn binary to its latest version

npm install -g yarn

Move into the project folder

cd ~/path/to/project

Run this command

yarn set version berry

Run Following Commands to Install PWA Studio

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

yarn create @magento/pwa

Answer the following questions:

• Project root directory (will be created if it does not exist): Enter the name of your root directory
• Short name of the project to put in the package.json “name” field: Enter the author’s name
• Name of the author to put in the package.json “author” field: Enter the author information following this format: Author Name <author email>. For example: MageDelight Developer <[email protected]>
• Magento instance to use as a backend (will be added to ‘.env’ file): Select “Magento 2.3.3 with Venia sample data installed“. This is a better option since it will include sample data from Venia theme. When we choose this option, our PWA frontend will point to Magento default backend on Cloud. However we will point it back to our own Magento backend in the next step.
• Braintree API token to use to communicate with your Braintree instance (will be added to ‘.env’ file): Just press Enter.
• NPM package management client to use: Select yarn
• Install package dependencies with yarn after creating project: Select Yes (Y)

Point it to your Magento Backend

In your project directory, open .env file and change the value after MAGENTO_BACKEND_URL= into your Magento backend, for example:

MAGENTO_BACKEND_URL=https://www.magedelight.com/magento-pwa-studio.html

Begin with the PWA Storefront

Run the commands

yarn install
yarn watch

When you successfully run, the output will help you with the live URL http://0.0.0.0:10000/.

Well, Here You Go! We hope that this article helps you with solving all the doubts that might be there. If you have any questions during the process, feel free to reach us out. Our expert developers will be happy to help.

Recommended: How to Install PWA Studio in Magento 2.3?