How to Install and Setup PWA Studio on Magento 2.4

In recent times, eCommerce enterprises globally have begun to embrace Progressive Web Applications (PWA) at a consistent pace to stay ahead of the competition. This trend can largely be attributed to the fact that a significant number of shoppers now prefer using mobile devices for their purchases. Consequently, transitioning from traditional online stores to Progressive Web Applications is a strategic move to offer users an experience reminiscent of mobile apps. Magento 2.4 PWA offers the PWA Studio to help developers build high-performance, scalable, and feature-rich web applications. In this guide, we’ll walk you through how to install and setup PWA Studio on Magento 2.4.

Server Setup for Magento 2

The initial phase in installing Magento 2.4 PWA is to properly configure a server for Magento 2. To achieve this, there are specific prerequisites you must meet to ensure the correct setup of Magento 2.

At the forefront, Nginx should be your choice for server configuration. Magento seamlessly integrates with Nginx 1.8, and the only additional requirement is the most recent version of php-fpm.

However, the setup process can differ based on the operating system you’re using. For the purpose of this guide, we will focus on setting up the Magento 2 server on the Ubuntu 16 operating system using Nginx.

So how to install Nginx on your system? Follow each step below carefully:

First, open your terminal and enter the following command to install Nginx:

apt-get -y install nginx

After Nginx is installed, it’s essential to ensure that Magento operates optimally on the server. This requires specific PHP extensions.

• Install php-fpm and php-cli: Use the following command to install the desired version of PHP, specifically 7.2.X:

apt-get -y install php7.2-fpm php7.2-cli

• Configuring PHP Settings: Open the php.ini file for both fpm and cli using:

vim /etc/php/7.2/fpm/php.ini            
vim /etc/php/7.2/cli/php.ini

Adjust the php.ini settings to meet the required parameters for Magento:

memory_limit = 2G
max_execution_time = 1800
zlib.output_compression = On

Save and exit the editor. For Vim, you can press Esc, type :wq, and hit Enter. To ensure the PHP extensions and configurations are active, restart the php-fpm service:

systemctl restart php7.2-fpm

Install and Configure Magento 2.4 Using Composer

After establishing your server, the subsequent phase involves installing and setting up Magento 2 on the Nginx server. While there are various methods to deploy Magento 2 on the server, in this guide, we will leverage Composer for the Magento 2 deployment.

The Composer’s primary role in the Magento 2 deployment is to proficiently oversee all Magento 2 modules and their interconnected dependencies.

Navigate to Your Desired Installation Directory

Change your current directory to where you want Magento installed. This will typically be the root directory of your server.

cd /path/to/your/preferred/directory

Download Magento 2.4 using Composer

Execute the following command to begin the Magento 2.4 installation process with Composer:

composer create-project --repository-url=https://repo.magento.com/ magento/project-community-edition magento2.4

Note: You might be prompted for authentication keys. These can be procured from your Magento Marketplace account.

To secure your Magento 2 Authentication Key, log into your Magento account and follow the provided link to retrieve your authentication key: https://marketplace.magento.com/customer/accessKeys/

Setup Required Permissions

After Magento has been downloaded, set the necessary file and directory permissions:

find var generated vendor pub/static pub/media app/etc -type f -exec chmod g+w {} +
find var generated vendor pub/static pub/media app/etc -type d -exec chmod g+ws {} +

Initialize Database for Magento

If you haven’t yet set up a database, create one:

mysql -u [username] -p
CREATE DATABASE [database_name];

Initiate Magento Installation

Use the following command, substituting placeholders (yourdomain.com, database_name, etc.) with your specific details:

bin/magento setup:install --base-url=http://yourdomain.com/ \
--db-host=localhost --db-name=[database_name] --db-user=[database_username] --db-password=[database_password] \
--admin-firstname=Admin --admin-lastname=User --admin-email=user@example.com \
--admin-user=admin --admin-password=admin123 --language=en_US \
--currency=USD --timezone=America/Chicago --use-rewrites=1

Optimize Magento

Once installed, it’s good practice to reindex and clean the cache:

bin/magento indexer:reindex
bin/magento cache:clean

Should you encounter any issues during the Composer project setup, it could result from typographical mistakes in your command. If, after reviewing your command, you believe it’s accurate, it’s advisable to consult a Magento Development Agency for assistance.

Install Yarn

Originally developed by Facebook, Yarn, which stands for Yet Another Resource Negotiator, is a robust package manager that facilitates code sharing among developers.

Yarn has a reputation for surpassing npm in terms of security and reliability. This edge is largely attributed to Yarn’s modus operandi of code distribution via packages, often referred to as modules.

While there are various methods to install Yarn, considering Ubuntu as our operating system for this guide, we’ll employ the Debian package repository for Yarn’s installation.

Configuring the Debian Repository

To set up the repository, use the following command:

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

Note: If you’re on Ubuntu 16.04 or an older version, ensure to configure the source code repository with:

sudo apt-get update && sudo apt-get install yarn

Path Configuration for Yarn

Yarn might not always be immediately accessible from your system’s path. For uninterrupted usage, it’s prudent to confirm and possibly adjust your path settings.

Add the subsequent line to your profile; this might be found in .bash_profile, .profile, .bashrc, and similar files:

export PATH="$PATH:/opt/yarn-[version]/bin"

Verifying Yarn Installation

Post-installation, it’s essential to ascertain that Yarn was correctly installed.

Check your installation with:

yarn --version

Should you run into complications or discrepancies during the Yarn installation process, we advise consulting GitHub or Yarn’s official documentation to pinpoint and rectify potential issues.

Requirements to Set Up Venia PWA Storefront

At this juncture, we arrive at the pivotal phase: the PWA installation. For this process, we’ll employ the Venia storefront, renowned for its flawless integration with the Magento 2 backend we’ve set up.

But first, let’s delve into installing the Venia PWA storefront itself. Here are some requirements to integrate the Venia PWA storefront with Magento 2.4.

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

Installing Node.js

Node.js is an open-source runtime environment that allows you to run JavaScript on the server side. Whether you’re working on a web application or a backend API, Node.js offers you the efficiency and scalability you need. To get Node.js up and running on your system, follow the code below:

sudo apt update
sudo apt install -y nodejs

Steps to Install Venia Storefront

Having the preliminary steps out of the way, let’s dive into the Venia storefront installation.

Clone the PWA Studio Repository

Kick off by cloning the PWA-Studio repository suitable for the Magento 2.4 environment. Execute the command:

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

Navigate to the Project Directory

Change your directory to the PWA project folder:

cd pwa-studio

Install Project Dependencies

Navigate to the root directory of the Magento PWA. Here, initiate the installation of project dependencies:

yarn install

Acquiring an SSL Certificate

For a secure browsing experience on the Venia storefront, you’ll need an SSL certificate. Proceed to generate one using:

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

Creation and Configuration of .env File

Begin by spawning the .env file. Use the command:

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

Upon creation, update the .env file to set your Magento 2 backend URL. Ensure the following command has your correct backend URL:

MAGENTO_BACKEND_URL="https://your-magento-url-here/" yarn buildpack create-env-file packages/venia-concept

Remember to replace your-magento-url-here with your actual Magento backend URL.

Start the Server

Generating Build Artifacts for Venia Storefront

To produce the necessary build artifacts for your Venia storefront, execute the following command:

yarn run build

Launching the Server for Venia Storefront

This command initializes the development environment specific to the Venia storefront.

yarn run watch:venia

Executing the below command will offer an immersive PWA developer experience. It encompasses features such as hot-reloading and simultaneous rebuilds using the build pack.

yarn run watch:all

This specific command first creates the build artifacts and subsequently runs the staging environment for the Venia storefront.

yarn run build && yarn run stage:venia

Always ensure you select the appropriate command based on your development or staging needs. Each command is designed to cater to specific development scenarios and requirements.

Setup Nginx Reverse Proxy

Once the server is operational, it’s essential to establish an Nginx HTTPS reverse proxy. This will handle client requests, route them to various servers, and relay the server responses back to the clients.

First, you need to navigate to the Nginx configuration directory:

cd /etc/nginx/sites-available/

Create a new configuration or modify the default one:

sudo nano reverse-proxy.conf

Add the following configuration, replacing your_backend_server_address with the address of your backend server:

server {
    listen 80;
    server_name your_domain_or_IP;
    location / {
        proxy_pass http://your_backend_server_address;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

To enable your new configuration, create a symbolic link to the sites-enabled directory:

sudo ln -s /etc/nginx/sites-available/reverse-proxy.conf /etc/nginx/sites-enabled/

Before restarting Nginx, always ensure your configuration syntax is correct:

sudo nginx -t

If you receive a message that says syntax is okay and test is successful, you can proceed.

Benefits of PWA Studio in Magento 2.4

Progressive Web Applications (PWAs) are revolutionizing the eCommerce landscape, offering unparalleled advantages for both merchants and shoppers. Magento 2.4, being a frontrunner in the eCommerce platform ecosystem, embraces this change with its PWA Studio. Here are the compelling benefits of integrating PWA Studio in Magento 2.4.

Enhanced User Experience

One of the primary strengths of PWA Studio in Magento 2.4 is the ability to offer an app-like experience directly on the web. This feature blurs the lines between traditional websites and mobile applications. With smoother navigation, intuitive interface designs, and quick response times, the platform can mimic the feel and responsiveness of a native mobile application. As a result, users are treated to a seamless browsing and shopping experience, leading to deeper engagement.

Service workers that come with PWA Studio ensure that certain key assets and data are cached. This allows users to browse through Magento 2.4 stores even without a stable internet connection. Imagine a user being able to add items to their cart or browse through their wishlist while commuting in areas with poor network reception. This level of constant engagement ensures that users remain connected with the platform, enhancing their overall experience.

Boosted Performance

Magento 2.4’s integration with PWA Studio represents a significant leap in eCommerce optimization. Recognizing the pivotal role that speed plays in determining user retention and engagement, this version harnesses the capabilities of modern web technologies to prioritize swift load times. Faster page responses are crucial in today’s digital age where users have come to expect instantaneous results. Delays, even if they’re just a few seconds long, can dramatically increase the bounce rate, meaning potential customers leave the site before making a purchase. 

Conversely, a fast, responsive website can keep users engaged, reducing the chances of them exiting prematurely. This not only improves the user’s browsing experience but has a direct positive correlation with conversion rates. When pages load quickly and navigation is smooth, customers are more inclined to complete a purchase. Thus, Magento 2.4’s focus on optimizing speed through PWA Studio is not merely a technical upgrade; it’s a strategic move aimed at enhancing user satisfaction, loyalty, and ultimately, sales.

Cost Efficiency

In the competitive landscape of the digital era, businesses often grapple with the decision of where to allocate their resources: should they develop separate applications tailored for desktops and then another for mobiles? Such an approach not only divides their audience but also incurs hefty development and maintenance costs. With each native application, there’s a need for specialized development, periodic updates, and consistent monitoring to ensure optimal performance. These processes demand both time and money, stretching resources thin.

By adopting PWAs, businesses can sidestep these challenges. The singular development process for PWAs negates the need for multiple platform-specific applications. This means companies can channel their funds and energies into enhancing a single application rather than juggling several. The resultant savings aren’t just monetary; the streamlined process also ensures faster time-to-market and reduces the complexities tied to updates and bug fixes. In essence, with PWAs, businesses achieve broader reach and functionality without the encumbrance of added costs or extended development timelines.

Safety and Security

Magento 2.4’s PWA Studio is meticulously designed to provide users with a safe and secure shopping experience, a necessity in today’s digital age where vulnerabilities can compromise both businesses and their customers. A standout feature in its arsenal is the implementation of service workers, specialized scripts that operate behind the scenes. These service workers are pivotal in ensuring content integrity, as they exclusively run over HTTPS. 

This secure protocol is instrumental in safeguarding data by encrypting the exchange of information between users and the website, thereby drastically reducing risks associated with data interception or tampering. When a user navigates the web and interacts with a site, there’s a myriad of digital touchpoints the data traverses. Magento 2.4’s commitment to running service workers over HTTPS ensures that from the moment data leaves the user until it reaches its intended destination, it remains untouched and uncompromised. This not only establishes a trust factor with customers but also fortifies the brand’s reputation in the digital marketplace.

Higher Engagement and Conversion Rates

At the heart of a PWA’s appeal is its impressive speed. Whether a user is browsing a catalog, reading content, or making a purchase, the pages load almost instantly. This rapidity isn’t just restricted to high-speed internet connections; PWAs are optimized to perform efficiently across all devices, be it a high-end desktop or an entry-level smartphone.

But the capabilities of PWAs extend beyond just fast loading times. In regions with spotty or low internet connectivity, or during those inconvenient moments when one loses their internet connection, PWAs shine brightly with their offline support. Users can continue browsing certain content or even add products to their carts without an active internet connection, making the user experience uninterrupted and smooth.

With fast-loading pages and intuitive interfaces, users can navigate through product listings, read reviews, and complete their purchases without any hitches. This seamless and frictionless shopping journey, combined with the other aforementioned PWA features, naturally leads to increased conversions.

In Conclusion, 

And that’s a wrap! You now have a comprehensive guide on installing the PWA studio in Magento 2.4. While the steps might initially appear daunting, it’s crucial to understand that our Magento PWA Development Solution is not just another expense, it’s a valuable investment. Time and again, it has demonstrated its ability to amplify results for eCommerce ventures of all scales.

We strongly advocate for transitioning your current Magento 2 storefront to a Magento PWA. By doing so, you’re positioning your business to be ahead of the curve and ensuring its growth in the foreseeable future. If you wish to receive more robust guides from us like this, please consider subscribing to our newsletter right below!