In modern era web development, currently headless architecture is rapidly increasing. In eCommerce domain, Magento 2 framework is popular for its features. One of the Magento 2 features is PWA (Progressive Web Application).

In this blog, we will show you the installation of Progressive Web Application in Magento 2. Before doing installation, first we need to understand what PWA is?

What is PWA?

PWA stands for Progressive Web Application. PWA is used for creating web applications using modern web technologies. PWAs are designed to feel user experience similar to native mobile application. But the application is served through a web browser. PWAs uses headless architecture methodology. Due to that it provides all features of headless architecture. Features like application run in offline mode, fast loading time, responsive design, lightweight, push notification and run in cross platforms. Frameworks like Vue.js, React and AngularJS are mostly used for building PWAs in headless applications.

Magento PWA Studio is a tool which allows developers to build a PWA using the Magento 2 eCommerce Platform. PWA studio application uses React. For communicating with Backend Magento 2, it uses GraphQL API. Using PWA Studio tool developers can easily build, deploy and manage web applications.

Magento 2: Setup the PWA

Magento has introduced PWA Studio feature which is compatible with Magento version 2.3.x or above versions. We will use the Venia storefront as a PWA installation.

Requirements:

We need below three main software needed to install PWA. Magento version 2.3.x or above version, Node and Yarn.

-> Magento 2.3.X or higher version.

-> Node 10.14.1 LTS or higher version.

-> Yarn 1.13.0 or higher version.

We can run the below command and check the node is installed on system. If yes, which version is installed.

node –v

Same way we can check for the Yarn.

yarn –v

Installation Steps

Follow the steps below to install the PWA Venia storefront.

1) Clone PWA-Studio Repository

Here, Magento 2 installed on the path below.

Path: /var/www/html/magneto246

Go to the Magento installation root directory. Run the below command.

git clone https://github.com/magento/pwa-studio.git

Above command clone the PWA studio files into your local system.

2) Go to PWA Studio directory

After running the first command, in Magento root directory pwa-studio folder created.

cd /var/www/html/magneto246/pwa-studio

3) Install the project dependencies

Yarn is a package manager same as npm. We need to install all the dependencies for a PWA studio. Via below commands we will install all dependencies

cd /var/www/html/magneto246/pwa-studio

yarn install

4) PWA runs on HTTPS, Generate SSL certificate

HTTPS is more secure. PWA store runs on HTTPS. For that we need to generate and install SSL certificate on our system HTTPS protocol is used for secure method.

We can install the SSL certificate via the command below.

cd /var/www/html/magneto246/pwa-studio

yarn buildpack create-custom-origin packages/venia-concept

5) Set Environment file in PWA

Environment file is used to define various configuration settings and variables. Generally, Environment configuration and variable are changed for Development, Staging and Production server.

The Environment file (.env) file contains the Magento backend Url and other variables.

Run below command to generate .env file.

cd /var/www/html/magneto246/pwa-studio

yarn buildpack create-env-file packages/venia-concept

Go to /var/www/html/magneto246/pwa-studio/packages/venia-concept/ Folder. Open the. Env file and change the below variable value and set Magento Url value.

MAGENTO_BACKEND_URL=”https://local.magento2-pwa.com/”

6) Build Commands for PWA

Run the below command.

cd /var/www/html/magneto246/pwa-studio/

yarn run build

7) Run server

Run the below command. It will start the Venia storefront development environment.

cd /var/www/html/magneto246/pwa-studio/

yarn run watch:venia

yarn run watch: all

yarn run build && yarn run stage:venia

8) Access PWA website in browser.

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

PWAServer ready at https://local.magento2-pwa.com/:10000/

GraphQL Playground ready at https://local.magento2-pwa.com/:10000/graphiql

Run the below URL in browser to access PWA website

https://local.magento2-pwa.com/

We have successfully installed the PWA.