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
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
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 -
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.
- 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
We can now set the value for Magento 2 backend:
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.
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.