How to Install PWA Studio in Magento 2.4

How to Install PWA Studio in Magento 2.4

Magento has introduced PWA studio for Magento 2.3 and above versions.

Progressive Web Applications are designed to act like native applications for a fast user experience.

We cover the steps for installing PWA Studio in Magento 2.4

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 -

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 | 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
  • 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="" 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 /
    ProxyPassReverse /

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.


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.

Nikita S.
Nikita S.
Lead Technical Writer

As a lead technical writer, Nikita S. is experienced in crafting well-researched articles that simplify complex information and promote technical communication. She has expertise in cloud computing and holds a specialization in SEO and digital marketing.

Get the fastest Magento Hosting! Get Started