How to Install PWA Studio in Magento 2.4

• Steps to Install PWA Studio in Magento 2.4

• EndNote

Steps to Install PWA Studio in Magento 2.4

1. Install Magento 2.4 Using Composer

Composer allows you to manage all Magento 2 components and dependencies.

To install Magento 2.4 version, you may have to perform the following steps -

• Check the prerequisites.
• Install the webserver
• Install PHP and other packages.
• Configure Elasticsearch
• Install MySQL
• Generate Access Keys for Magento 2.4
• Configure the webserver for Magento 2.4

You can get in-depth steps to install Magento 2.4.4 here -

• How to Install Magento 2.4.4 on Debian 11
• How to Install Magento 2.4.4 on Ubuntu 20.04

After finishing the installation of Magento 2.4, you can continue the next steps.

2. Requirements to Set Up Venia PWA Storefront

You have to fulfill the following requirements to install the Venia PWA storefront.

• Yarn > Version 1.22.18
• NodeJs > Version v14.x+
• Functioning Magento 2.4 Setup

Installing Node.js

You can install Node.js with Apt and use NodeSource PPA. Use the following commands -

curl -fsSL https://deb.nodesource.com/setup_lts.x | bash -

apt-get install -y nodejs

Yarn Install

You can install Yarn using the npm package manager. Run the command shown below -

npm install --global yarn

Check nodejs and yarn version run the following commands -

nodejs -v

yarn -v

3. Steps to Install Venia Storefront

Now that you have the prerequisites completed, you can install the Venia storefront.

• Clone PWA-Studio Repository

Firstly, you have to clone the PWA-Studio repository in Magento 2.4 development environment.

You can perform the task with the following command.

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

• Install Project Dependencies

Run the following command in the Magento PWA root directory. It is used for PWA installation project dependencies.

yarn install

• Get SSL Certificate

Now, we generate a secure SSL certificate for the Venia storefront. Use the command below to install the SSL certificate -

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

• Create & Update .env file in PWA

To create .env file, execute create-env-file subcommand with the CLI tool.

The subcommand will create packages/venia-concept/.env

We can now set the value for Magento 2 backend: MAGENTO_BACKEND_URL. Run the following command -

MAGENTO_BACKEND_URL="https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/" yarn buildpack create-env-file packages/venia-concept

4. Start The Server

• Build Artifacts

Use the command to generate build artifacts for the Venia storefront.

yarn run build

• Run The Server

You can run the server in many ways. See the command options to run the server below-

yarn run watch:venia

The command shown above will start the Venia storefront development environment.

yarn run watch:all

The above commands will run the PWA developer experience. It will also run hot-reloading, and concurrent build pack rebuilds.

yarn run build && yarn run stage:venia

The command shown above will generate build artifacts and run the staging environment.

5. Setup Apache Reverse Proxy

To enable the mod_proxy module to setup reverse proxy, use the commands below -

sudo a2enmod proxy

sudo a2enmod proxy_http

<VirtualHost *:80>
    ProxyPreserveHost On

    ProxyPass / http://127.0.0.1:8080/
    ProxyPassReverse / http://127.0.0.1:8080/
</VirtualHost>

Restart the Apache webserver with the following command -

sudo systemctl restart apache2

Benefits of PWA Studio in Magento 2.4

Some of the primary benefits of Magento PWA include -

• Enhance User Experience

PWA Studio will allow you to deliver an exceptional user experience on mobile devices.

For example, the UI has a full-screen mode and can hide the browser URL bar on top and the navigation tools below.

• Increase Conversion Rates

PWA offers fast page loading and optimization on all devices. You also get offline support and push notifications.

It lets you create seamless purchase funnels and increase conversions.

• Built-in SEO

Magento PWA has native SEO features to optimize the pages and rank high on search engines.

• Low Cost

The PWA application works well on desktop and mobile devices. You save costs on building and maintaining additional native applications.

EndNote

Magento 2 PWA solution offers a reliable, fast, responsive user experience.

Installing the Magento PWA Studio project allows you to develop and maintain a PWA storefront on Magento 2.

You get modern tools and libraries to create a framework that works well with the Magento system.

The tutorial has covered step-by-step how to install PWA studio in Magento 2.

For more information on the Magento platform, check out MGT Commerce Tutorials.