PWA Installation in Magento 2.3 – The Definitive Guide

It is not a hidden fact anymore that businesses, slowly and steadily, are implementing progressive web applications in their online marketing strategy to gain an upper hand over competitors.

Moreover, nowadays, a huge chunk of the consumer base prefers to shop through mobile phones which exemplifies the significance of web applications in driving business growth. Progressive web applications are the latest edition in the domain of the e-commerce segment.

PWA or better say progressive web applications are hybrid of web pages with mobile app-like experience. They encompass striking attributes that catapult users to engage with the products and buy them in no time.

However, when it comes to installing PWA in Magento 2.3, most of the merchants don’t have any idea of the PWA installation process. Well, if you don’t know about Magento 2.3 PWA installation steps, no need to stress out.

This comprehensive guide is solely created for the purpose of enlightening merchants and developers regarding PWA installation in Magento 2.3. You can effortlessly install any PWA in the Magento 2.3 if you follow the below-mentioned steps religiously.

However, before we state the quintessential PWA installation process in the Magento, we would like to brief up about Magento 2 and the Magento 2.3 release. Let’s get started.

What is Magento 2? Its Limitations, and What’s New in the Magento 2.3 Release?

Magento 2 is the reinvigorated version of the ever-classic Magento e-commerce platform. This e-commerce platform is currently utilized by more than 2 lakh retailers to run their online business in a full-fledged manner.

Magento 2 encloses numerous tools that were absent in the basic version. From catalogue management to online marketing, Magento 2 functionalities not only allows you to make your business scalable but also render your customers enriching shopping experience.

Despite of all the robust functionalities, the Magento 2 still comprises a myriad of limitations. Some of the principal limitations are the absence of page builder, multi-source inventory, GraphQL support, Bulk web APIs, cache management, PHP 7.2 support, and the list goes on.

Release of Magento 2.3

With the end of Magento 2.2.X support in December 2019, Magento released the latest Magento 2.3 version which overshadows all the drawbacks enclosed by Magento 2.2.X.

Magento 2.3 allows merchants to fully control all the attributes of the platform including the new ones. New functionalities are quite powerful enhancements that fuel merchants’ online business requirements, and allow them to scale the business growth manifold times without much of a hitch.

Now, let’s hop on to the Magento 2.3 PWA installation process.

PWA Installation on Magento 2.3

Step 1: Setup Server for Magento 2

The first and the foremost step in the process of Magento 2.3 PWA installation is setting up the server for the Magento 2.

However, there are certain requirements that need to be fulfilled for setting up the Magento 2 server in a rightful way. Here we will utilize Nginx to install setup the server.
Magento platform completely supports Nginx 1.8 and requires the latest version of php-fpm for installation.

Moreover, the installation process varies from the operating system to the operating system. We are considering Ubuntu 16 operating system to set up the Magento 2 server using Nginx.

Install nginx

Install the server using nginx by using the command given below.

apt-get -y install nginx

Install and Configure php-fpm

Installing Nginx is only half the job done. You need to ensure that the Magento platform functions in a full-fledged manner on the server. For that, you need to use numerous PHP extensions for the proper functioning of the Magento2 PWA.

Those who are going to use the Nginx, follow the steps below for the installation and configuration of php-fpm.

Install php-fpm and php-cli:

The following command installs the newest version of PHP 7.2.X for the proper functioning of the Magento 2 platform.

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

Open php.ini files in the editor:

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

Edit php.ini Files to Match the Required PHP Settings:

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

Saves files and Close the Editor

Start the php-fpm service to crosscheck the server installation

Use the command below to restart the php-fpm service.

systemctl restart php7.2-fpm

Advantage of Using Nginx Server

• The installation and configuration processes of the Nginx are quite smooth.
• Nginx is one of the best servers for hosting and delivering static files like mp4, zip, etc.
• It can handle 4 times more concurrent connections than Apache 4.
• It is quite compatible with some of the most commonly used web applications.
• Nginx provides an outstanding load balancing support. It evenly distributes clients’ requests across backend servers.
• Nginx amplifies the website speed manifold times. All the top-notch websites of the world like Facebook, Yahoo, Youtube, etc., use Nginx to manage the website traffic efficiently.

Step 2: Installation and Configuration of the Magento 2 on Server

The next pivotal step in the process of PWA installation in Magento 2.3 is the installation and configuration of Magento2 on the Nginx server.

Though there are plenty of ways to install the Magento 2 on the server, we are going to use the composer (an effective tool for the dependency management in PHP) for the installation.

Magento 2 Installation Using Composer

The key function of composer in Magento 2 installation is to manage all Magento components and their dependencies. Here, you need to fulfil two requisites.

• Get the Magento 2 Authentication Keys
• Get the Magento Metapackage

Obtain Magento 2 Authentication Key

You can easily get authentication keys by login in your Magento account. Follow the link below to obtain the Magento 2 authentication keys. https://marketplace.magento.com/customer/accessKeys/

Get The Magento Metapackage

Before you obtain the Metapackage, it is essential to understand what Metapackage is? And its significance.

The principal function of Metapackages is to group all those extensions into a single unit that comprises multiple packages. For those extensions, a Metapackage function as the root page. We recommend you to follow the below-mentioned steps to get the Metapackage.

• Access your Magento server and switch to the Magento file system owner.
• Switch to the server root directory that you have configured as a virtual host docroot.
• You can create a composer project either using Magento open source or using the Magento community edition.

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

If you face errors in creating the composer project, it is quite possible you have committed typo errors while writing the command. Moreover, if you still face errors even after your command is perfect, you should contact the Magento support for help.

Note: – We recommend you to hire Magento 2 certified developers to manage the tedious task of PWA installation in Magento 2.3 without any glitch.

Step 3: Install Yarn

Before you learn the steps to install Yarn, it is pivotal to understand what Yarn is, and what are the benefits of using Yarn for Magento 2.3 PWA installation.

Yarn stands for Yet Another Resource Negotiator developed by Facebook is a highly efficient packet manager that allows you to share code with other developers without any hassle. Unlike npm, yarn does it in a more secure and reliable way. The biggest advantage of using yarn is it allows you to utilize other developers’ solutions to resolve your problems.

Codes in the yarn are shared through a package which is also referred to as a module.

Steps to Install Yarn

There are numerous ways to install yarn. However, as stated earlier, we are using Ubuntu operating system to install Yarn via Debian package repository.

Configure The Debian Package Repository
Use the command given below to configure the Debian repository.

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: – On or below Ubuntu 16.04, you must have to configure the source node repository. You can use the command given below.

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

It is quite possible that Yarn may not be located in your path, in that case, we recommend you to add the path and run it anywhere without any interruption.

Path Setup for Yarn

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

Add this command to your profile. Your profile can be in. bashrc, .bash_profile, .profile, etc.

To validate the changes, you will make, log in and log out in the terminal.

It’s time to test whether the yarn is perfectly installed or not. To test the yarn installation, use the command given below.

yarn –version
After following all the steps meticulously, if you face errors in Yarn installation, we recommend you to look into GitHub for eradicating the prevailing issue.

Step 4 – PWA Installation in Magento 2.3

The fourth step is perhaps the most significant step in our Magento PWA installation guide.

We are going to use the Venia storefront in PWA installation because it can seamlessly run on Magento 2 backend. However, the key question pops up here is, how to install Venia PWA storefront without any hitch.

Use the below-mentioned steps to setup the Venia PWA storefront in Magento 2.3.

Requirements for Setting Up Venia PWA Storefront

You have to fulfil certain requirements to setup Venia PWA storefront and explore Magento PWA components.

• Yarn version › 1.13.0
• NodeJs Version › 10.14.1
• A properly running and functioning Magento 2.3 setup

Steps for Venia Storefront Setup

Clone PWA-Studio Repository

git clone https://github.com/magento-research/pwa-studio.git
You have to clone PWA-Studio repository in magento 2.3 development environment.

Install Project Dependencies

To install the PWA project dependencies, run the below given command in the Magento PWA studio root directory.

yarn install

Get SSL Certificate

Your PWA domain should be HTTPS secured if you want to protect it from malicious threats. You can generate a trusted SSL certificate for the Venia storefront in the root directory.

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

Create and Update. env file in PWA

We are using STAGING_SERVER_PORT=8080 as we want to restrict our Magento PWA usage for non-commercial customers.
To create .env file on Venia, use create-env-file subcommand with build CLI tool. The subcommand will help you to create packages/venia-concept/.env through which you can set value for MAGENTO_BACKEND_URL.

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

Note: – The latest version of the Venia PWA storefront runs better on Magento 2.3.X instance.

STEP 5 – Start The Server

Build Artifacts

You need to generate build Artifacts for Venia storefront in the project root directory by using the command given below. You have to generate build Artifacts before running the server.

yarn run build

Run The Server

There are plenty of ways to run the server. We are going to state 3 commands from which you can utilize any of them to run the server.

yarn run watch:venia

This command immediately begins the Venia storefront development environment.

yarn run watch:all

This command will run full PWA studio developer experience which comprises Venia hot-reloading and concurrent build pack rebuilds.

yarn run build && yarn run stage:venia

This command is for generating build artifacts and run staging environment.

STEP 6 – Setup Nginx Reverse Proxy

Once your server is ready, it is imperative to setup Nginx HTTPS reverse proxy which can take clients’ requests, pass them to different servers, and deliver server level response back to the clients.

Follow the command given below to setup Nginx reverse proxy.

location / {
proxy_pass http://127.0.0.1:8080; (Because we are using personally hosted web server)
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}

Numerous Benefits of Using the Nginx Reverse Proxy on the Magento 2.3 Instance

• Better Performance – When it comes to delivering static content files and analyzing URLs, Nginx reverse proxy is par excellent.
• Enhanced Security – Nginx reverse proxy provide formidable security to the backend servers. The best part is, with Nginx reverse proxy at your disposal, your server identity always remains unknown to clients.
• Load Balancing – This is undeniably the biggest benefit of using Nginx reverse proxy on the Magento 2.3 instance. It can efficiently perform load balancing which evenly distributes clients’ requests across backend servers.
• Simple Logging and Auditing – In Nginx reverse proxy, there is only one point of access which makes the logging and auditing process simplistic.

We can clearly see that the above-described process of Magento 2.3 PWA installation is quite daunting and intricate. To ensure nothing goes wrong when installing the PWA in Magento 2.3, we recommend you to hire Magento 2 certified developers who are well-versed with the entire process of PWA studio step in the Magento 2.3 instance.

Emizentech Magento 2 PWA Installation Demo

You all must be curious for how your PWA studio would look like after the installation. To satiate your curiosity, we have mentioned a PWA store demo link below of EmizenTech PWA store. It will give you a fair idea of How your PWA studio will look like once it is installed properly.

Emizentech Magento 2.3 PWA Demo

Top Reasons to Use Magento 2 PWA Studio in Your E-commerce?

Before you show hastiness in the development of the Magento 2.3 PWA studio for your e-commerce, you should get conversant first with the top-notch reasons for using Magento 2 PWA studio. Have a look at the top reasons –

• You can easily create and manage all channels through a single code base and at a single application.
• It provides a range of tools to personalize user experience and make your e-commerce store more regaling.
• You don’t have to pay a single dime to make your website mobile-friendly or in the development of a mobile application for your business. PWAs work quite swiftly on all mobile devices.
• It helps developers in numerous ways. Through developer tools, they can get fast prototyping, debug varied issues, get rich feedback, and amplify productivity.
• Progressive web applications are less resource-dependent. They require very little storage for hosting which means they dwindle the cost of acquiring big hosting services.

How Utilizing PWAs in Magento are Useful for Merchants?

There are gargantuan benefits of using PWAs in your Magento e-commerce store. Let’s review the key benefits one at a time.

• Usability – For merchants, PWAs are the easiest to use, and this is one of the biggest advantages of adopting PWAs for business. While the business owners can take the maximum advantage of the POS system, sales executives can sell products instantly and derive the maximum sales.
• App-Like Experience – Merchants can deliver users both website and mobile app experience at the same time. Progressive web applications can adapt with different device sizes and render users mobile-app experience which propels them to return again and again.
• Performance – When it comes to performance, progressive web applications are second to none. They instantly load pages with chunky size and don’t let your users bounce from the store. If we look at things from the customers’ perspective, high-performance web pages are pivotal to deliver the right information in the quickest time and generate more leads.
• Massive Conversions – With progressive web applications at your disposal, you can escalate the conversion rate by leaps and bounds and augment your business growth manifold times. Progressive web applications are highly responsive and deliver information to users in a faster way.
• Cost Cut-Down – As progressive web applications deliver mobile app-like experience; you don’t have to spend a fortune on developing a separate business application. Hence, you can spend the saved amount in running other business operations.

So, to conclude one can say that PWA ecommerce development is a one time investment which will yield great results for your ecommerce business in the long run. Therefore, hiring a company that offers professional PWA development services is a first step to beat your competitors.

People also searched for

• Magento 2 PWA
• Magento 2 PWA Setup
• PWA Magento 2
• Magento PWA
• Magento 2 PWA extension
• Magento 2 PWA theme
• Magento 2 PWA tutorial
• PWA for Magento 2
• PWA in Magento 2
• PWA Magento
• PWA theme Magento 2
• progressive web app Magento 2
• Magento 2 progressive web app
• Install PWA Magento 2
• PWA Magento 2 theme
• Magento PWA theme
• Magento 2 PWA integration
• Magento PWA Studio install
• PWA for Magento
• PWA design services
• PWA mobile app development
• PWA website development
• PWA ecommerce development
• Magento PWA tutorial
• Magento progressive web app
• Magento 2 PWA studio
• Magento 2 PWA install
• Magento 2.3 PWA theme
• Magento 2 PWA setup
• Progressive web apps Magento 2
• Magento 2 progressive web application
• Progressive web application development
• Magento PWA development
• PWA tutorial
• Progressive web apps development
• Magento progressive web apps
• Progressive web app Magento
• PWA Magento 2.3
• What is PWA in Magento 2, 2.2.x, 2.3.x