How to Set up PWA in Magento 2.3 -The Ultimate Guide

Swiftly, web traffic is moving to mobile. There is an appropriate reason behind it!!

The users have become more tech-savvy that demands a light, fast app-like experience. Surprisingly,  the mobile influence on digital commerce has accelerated a lot.

To date, several new technological aspects are created.  Hence, these improvements redefine the mobile experience and to satisfy the customer’s demand.

Undoubtedly, digitization has given us numerous solutions. Together with, all the solutions delight mobile users, by:

  • developing a responsive website,
  • creating a hybrid or native app, and
  • building PWA (Progressive Web Application)- PWA to Magento 2 is the burning topic of discussion in the IT sector.

Notably, PWA has earned exceptional momentum. It changes the way the merchants and customers manage the businesses on mobile devices. 

Furthermore, these applications are the hybridization of web pages with mobile-like experience. Equally important, it incorporates the unparalleled features that insist the customers to engage with the products. Hence, this makes them purchase all items in less time.

Considering that, we are here in this article to know what this technology is bringing in. Also, we will find out how to setup PWA to the Magento store.

Progressive Web Application (PWA) Technology Defined

The Progressive Web Application (PWA) was introduced in 2015 by Google to the hybrid of the mobile application and regular web pages. Not to mention, the new application model has the features from the recent browsers with the advantages of mobile experience.

Additionally, every PWA ensures the three fundamental principles;

  • Fast (response of the customer communications nearly instantly),
  • Reliable (to serve the poor network conditions), and
  • engaging (address constant app-like experience).

It is the holistic method, which means it has the application and website that full-on provide the best experience in every method. Also, it can be said that PWA technology is supported to convert the mobile shopping experience to the lightning, fast and engaging experience.

Several companies, such as: Starbucks, Pinterest, Uber, Instagram, Twitter, Tinder, Washington Post, and West Elm; all released PWAs.

Why Consider PWA in Magento 2?

 

  • Faster Browsing

PWA enables the Magento 2 stores to allow the customers to communicate with the stores faster. All these have seen a prominent increase in the conversion rate. 

 

  • Cross-platform compatibility

Progressive Web Applications runs quickly on all mobile platforms in browsers, like, Edge, Safari, Chrome, and Firefox. The single web codebase in the progressive web applications to execute on every platform, in the desktops. 

It also excludes the requirement to create and maintain the applications on several platforms. In addition, the PWAs updates can be sent in real-time as on the website.

 

  • Quick “App” Gratification

Because these are instantly usable and discoverable from the browser, the Progressive web applications eradicate the requirement to install or download the application before using it. 

 

  • Push notifications

The push notifications are the critical messages transferred as notifications to make the customers informative regarding the latest offers, deals, and updates. It assists in real-time personalized and contextual communication. Push notifications improve customer engagement to a great extent.

 

  • Fast Re-Engagement 

Progressive Web Application in Magento 2.3 permits the users to have access without opening the browser and putting in the URL. It offers unique tools on the screen bottom for the app like the feel and looks. 

 

  • Responsive design 

Providing smooth user experience across different devices facilitates Magento 2 store owners to improve the customer experience. As per Google, websites with responsive web design will rank better in Google search results, thus putting PWA into effect, which can help your website rank higher in Google searches.

 

  • Offline support

Apart from the brilliant online features, PWA provides amazing offline support. For instance, implementing the PWAs allow customers to browse different products of your e-commerce website and add them to the cart without Internet connectivity. 

However, it is important that your customers have visited the pages previously. The customers place orders offline, on getting connected to the Internet, the order will be processed.

 

  • Installable on the home screen

The Progressive Web Application in Magento 2.3 with a native application icon can be integrated into the smartphone home screen. From this feature, the visitor can click on the icon simply and navigate to the appropriate website immediately. 

Because it eradicates the requirement of moving to the browser first and then to the website. It improves the time users take on the application. This, therefore, results in an improvement in the conversion rate.

 

Steps To Follow: Setting the Progressive Web Application in Magento 2.3

Step 1#  Setup Server for Magento 2

The first step in the process of Magento 2.3 Progressive Web Applications in integrating the server for Magento 2.3.

Even though, some requirements are there that has to be satisfied for handling the Magento 2 server in the best possible way.

In this step, the Nginx is used to install and set up the server. Uniquely , the Magento platform fully supports Nginx 1.8. It needs the recent php-fpm version for installation.

In addition, the process of setting-up varies from the operating systems to the operating system. Ubuntu 16 Operating System is used to install the Magento 2 server with the Nginx.

  • Set up Nginx

Fix the server with the Nginx with the command mentioned below:

apt-get -y install nginx

  • Set up and Configure php-fpm

Setting up Nginx is the only half of the job. So, you have to assure that the Magento platform operates in a fully-functional way on the servers.

In order to do that, you have to use different PHP extensions for the appropriate Magento2 PWA functioning.

And, the users who are about to use the Nginx, must know the steps to set up and configure the php-fpm.

  • Set up php-fpm and php-cli

Below commands installs the recent PHP 7.2.X version for the existing Magento 2 platform functioning.

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

Accessible 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 meet the essential PHP settings

memory_limit = 2G

max_execution_time = 1800

zlib.output_compression = On

Keeps files and  then, close the Editor

Begin the php-fpm service to assure the server installation

Consider the below command to proceed to the php-fpm service.

systemctl restart php7.2-fpm

Step 2# Install and Configure the Magento 2 on the Server

The next significant step in PWA installation in Magento 2.3 is to install and configure the Magento 2 on the Nginx server.   

Nevertheless, there are several ways of installing Magento 2 on the server. Here, the composer is used as an efficient tool for the PHP management dependency for the installation.

  • Magento 2 installation with Composer

Remember that, the main aim of the Magento 2 installation composer is to maintain the Magento dependencies and the components. In this step, you have to fulfill the two prerequisites:

       – Get  the Magento 2 Authentication Keys

       – Get the Magento Metapackage

  • Obtain Magento-2 Authentication Key

From the Magento account, you can obtain the authentication key by signing in. With the below link, you can get the Magento 2 authentication keys. 

https://marketplace.magento.com/customer/accessKeys/

  • Perceive the Magento Metapackage

While getting the meta-package, it is important to know Metapackage and its importance?

Not to mention, the aim of meta-package is to integrate all the extensions in a single unit that has multiple packages. In case of those extensions, the root page is the meta-package function. Here, our recommendation is to follow the below-mentioned steps to obtain the meta-package.

  • Firstly, obtain the Magento server and move to the Magento file system owner.
  • Secondly, move to the server root directory which is configured as a Virtual host doc root.
  • Thirdly,you can build a composer project either with Magento open-source or with the Magento community edition.

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

Also, If you are noticing any error in making the composer project, then, you may have typed the wrong commands. In addition, if you are still experiencing the issues, then, look after the Magento support for assistance.

Step 3# Set up Yarn

In this step, the first thing is to know Yarn before installing it. Also, it is essential to know how it is beneficial in Magento 2.3 PWA installation.

The full abbreviation of Yarn is Yet Another Resource Negotiator. It is acquired by Facebook. Indeed, Yarn  is the more effective packet manager. It permits you to share the code with many magento developers without any issues.   

Dissimilar to npm, yarn does all this more reliably and securely. The best part is, Yarn permits you to use different developers’ solutions for resolving the issues. Moreover, the code in the yarn is shared via a package which is termed as a module.

  • Steps to Set up Yarn

Different methods are there to set up Yarn. Though, as mentioned earlier, Ubuntu Operating System is used for installing Yarn from the Debian package repository.

  • Configure The Debian Package Repository

The below command is used for configuring 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

Configuring the source node repository is essential on or below Ubuntu 16.04. Below command can be used to perform it:

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

Here, the possibility is that Yarn is not located in the path. Hence, you can integrate the path and execute it anywhere without some delay.

  • Path Installation for Yarn

move PATH=”$PATH:/opt/yarn-[version]/bin”

Use this command to the profile. Knowingly, it can be in the. bashrc, .bash_profile, .profile, etc. For the validation of the changes, you can create the login and logout in the terminal. Now, you need to test whether the yarn is installed perfectly or not. For testing the yarn installation, below command is used:

yarn –version

Then, the processing of  all steps completes. f there are some flaws in Yarn installation, we advise you to look into GitHub for eliminating the general issues.

Step 4# PWA Set Up in Magento 2.3

Now, comes one of the most vital steps in the Magento Progressive Web Application installation guide. Here, we are using the Venia storefront for installing PWA. It can operate seamlessly on Magento 2 backend.  

Anyhow, the question that arrives here is how to carry out the process of the PWA installation storefront without some difficulty. From the steps given below, you will find out how to set up the Venia PWA storefront in Magento 2.3.

  • Terms for installing Venia PWA Storefront

In this step, you need to fulfill some needs for setting up the Venia PWA storefront. Examine the Magento PWA elements.

     – NodeJs Version › 10.14.1

    – Yarn version › 1.13.0

    – Accurately functioning and running Magento 2.3 setup

  • Ways for Venia Storefront Setup

Clone PWA-Studio Repository

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

Here, you have to clone the PWA-Studio repository in the Magento 2.3 development environment.

  • Install Project Dependencies

This step installs the project dependencies of PWA. Use the command given below in the Magento PWA studio root directory.

yarn install

  • Create SSL Certificate

The PWA domain needs to be HTTPs secured.  There is a need to save it from the deadly threat. Here, you can create a trusted SSL certificate for the Venia storefront in the root directory.

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

  • Design and Update. env file in PWA

Now, the STAGING_SERVER_PORT=8080 is used to combine the Magento PWA use for the non-commercial customers.

Additionally, for making the .env file on Venia, you can use the -env-file subcommand with in-built CLI tool. From this sub-command, you can build the .env/ venia-concept/packages/ from where you can insert value for:

MAGENTO_BACKEND_URL.

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

 

STEP 5# Start The Server

  • Create Artifacts

You have to create Artifacts for Venia storefront in the project root directory with the command given below. Also, you need to create the build Artifacts before executing the server.

yarn run build

  • Run The Server

Several options are there to run the server. Here,  we are giving the state 3 commands and you can use any of the commands to operate the server.

yarn run watch: venia

The above-mentioned command quickly starts the Venia storefront development environment.

yarn run watch: all

The above-mentioned command operates with a thorough PWA studio experience. It has concurrent build pack rebuilds and Venia hot-reloading. 

yarn run build && yarn run stage:venia

Here, the command defined creates the build artifacts and operates a staging environment.

 

Step 6# Setup Nginx Reverse Proxy

The server is ready now, it is important to install the Nginx HTTPS reverse proxy. It catches the customer’s requests. Then, pass it to various servers and performs server-level responses back to the customers.

Use the command given below to install the 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, Connection ‘upgrade’ & ‘Host $host’;

proxy_cache_bypass $http_upgrade;

}

Wrapping Up

PWA presents unique possibilities for e-commerce retailers-it is the fed up. And,  its implementation in Magento 2.3 has transformed the e-commerce experience of several e-commerce big names.

Hopefully, you liked our piece of article.  If you have some queries or suggestions then ask us in the comments section below.

Contact our Magento developers if you want to strengthen a Magento 2 website or want to migrate to an updated Magento version.

Thanks for reading!!