What Is Magento PWA Studio? How To Install It?

It has been almost a couple of years now that PWA has been hanging around in the eCommerce and tech world. Magento PWA Studio is a smoldering example of how important progressive web application has become for eCommerce. In this blog, we will be disclosing and explaining step by step how to install Magento PWA Studio.

But preceding that let’s take what PWA has done to become a “Thing” in eCommerce and the modern web world. 

There is an unerring reason why progressive web application has made its mark and the reason is that it has drastically changed the user experience while browsing things on the internet. 

It has almost scraped out the need for native apps. Behaving exactly like native apps have curbed the need to be downloaded and to be constantly updated. 

Progressive web apps save a lot of data and storage space for users who use the internet on their phones. And according to research data it has been found that most people prefer phones over PC or laptops as they can’t carry the later ones around most frequently. 

 

 

Hence creating a UI that runs smoothly on phones and gives the feel of a native app to the people who use phones to surf, browse, shop on the internet.  

But the main question is-

 

How Does PWA Work?

 

Web App Manifest 

 

 

If you have used a progressive web app, has this question ever tingled your mind how come the UI resembles that of native apps? Well because of the Web App Manifest. It’s the primary intrinsic responsible for providing progressive web app’s native app like UI. 

 If you are a total noob about Web App Manifest, it’s a type of JSON (JavaScript Object Notation) file. JSON files are a way to organize data that can be read and understood by humans in a cogent manner. 

 Developers are able to add a splash screen, streamline the location of the metadata with the help of web app manifest. 

 

The App Shell 

 

 

The App Shell or Application Shell architecture what makes PWA load almost instantaneously load on your screen. 

According to Google “The app “shell” is the minimal HTML, CSS and JavaScript required to power the user interface and when cached offline can ensure instant, reliably good performance to users on repeat visits. ” 

To make the app run without internet, the application shell architecture comprises of all the crux nitty-gritty of the design of the app, like separating the stationary screen from the changing one on the home screen.  

 

Service Worker 

 It’s another JAVAscript file that runs to supports some main features of progressive web apps, like offline mode, synchronization, push notification

 Through Service Worker, it is possible to store the browsing and other data for future use, this process is called caching of the app interface. This allows the offline working of progressive web apps. 

The content on the dynamic screen, however, changes each time as it is refreshed each time of the visit. 

You can not differentiate between the offline and online mode as it loads almost instantaneously on every offline visit as well. Browsing history, chat history, downloaded media etc. are all present in offline mode. The only thing that you can’t see is refreshed content while offline, neither can you send messages. 

 Remember each time a notification pops up on your native apps when a new message or activity is there, well same happens with PWAs as well. They are called push notifications and this is all possible due to the Service Worker file running in progressive web apps. 

 The fora synchronization of the apps is also handled by the Service Worker file. It holds the process of syncing until your internet connection is stable. 

E.g: when you use messenger and the net is not working properly, it will show you your message is sent but will be delivered when the connection is stable and proper. 

 

What is Magento PWA Studio?

Image source: CedCommerce

Magento has launched an ensemble of tools for all the merchants with online stores. This suite of tools is known as Magento PWA Studio. It will save the online merchants a whole lot of capital and efforts to build native apps to suit all the different OSs. 

By providing the tools to design app-like websites Magento has increased the chances for all the online merchants to amplify their mobile conversion rate by improving the cross-channel experience for the customers. 

 

 

 

How To Install Magento PWA Studio (For Version 2.3)?

 

• To install Magento PWA Studio, firstly you must have any Magento 2.3.x version. Without it, you can’t obviously install Magento PWA Studio Project( 2.3), as no other version Magento version can support it. 

 

• Then, you will have to install  NodeJS  ( NodeJS >=10.14.1). If you are unaware of the procedure, follow the below-mentioned command. (Applicable only for Linux OS) 

 

sudo apt-get install nodejs

 

Now check Node version :

 

node -v

 

Also, check the NPM version:

 

npm -v

 

If the version you installed is a version below than the above-mentioned version, run below-mentioned command to install the latest and more stable version of the node. 

 

sudo npm cache clean -f 

sudo npm install -g n

sudo n stable

 

• Post-installation and running of NodeJS, you will have to install  Yarn (Yarn >=1.13.0 ). Run the following command for the installation of Yarn. (Applicable only for Linux OS). 

 

sudo npm install yarn -g

 

Now check yarn version :

 

yarn -v 

 

• Now that Yarn is installed, clone the PWA repository to your development directory. 

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

 

• Consecutive to this step,  install the project dependencies by running the following command. 

yarn install 

 

• For creating the .env file, run the ensuing command from PWA root directory-

 

(For theme Venia you can use the Magento which is installed by you or the default Magento 2.3.1. Here we are using the default.)

 

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

 

You can also create the .env file and set your custom MAGENTO_BACKEND_URL value by using the following command:

 

MAGENTO_BACKEND_URL="https://YOUR_MAGENTO_BACKEND_URL/" yarn buildpack create-env-file packages/venia-concept 

 

• Install the SSL certificate as PWA runs on a secure path, You can run create-custom-origin command for generating SSL certificate: 

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

 

• You can also install Venia Sample data, there is a bash script already available at packages/venia-concept/deployVeniaSampleData.sh

 

bash deployVeniaSampleData.sh

To install sample data in Magento, run the following commands: 

 

bin/magento setup:upgrade

bin/magento indexer:reindex 

 

(Step 7 and 8 can be skipped for now if not required as per your need.) 

 

Build all the artefacts for your theme now by running- 

 

yarn run build 

 

Start the server by running any of the following commands as per your need, from you PWA project’s root directory. 

 

For development-

yarn run watch:venia

 

For running full developer PWA Studio-

yarn run watch:all

 

For building artefacts and running PWA studio to staging-

 

yarn run build && yarn run stage:venia

 

The installation of PWA is now complete. To whether the installation is successful or not, when you will run the above-mentioned commands, you will find the URL where the PWA is running. 

You can seek the help of expert developers for getting the job smoothly done. PWA gives your online site a smooth-running interface and much more.

 

Watch our webinar on “Expanding future mobile commerce with Magento PWA Studio”.  Know everything right from gaining erudition about exploring the future prospects of the Progressive Web Apps.   

 

How does PWA work? Learn from CedCommerce experts

About CedCommerce 

CedCommerce has been offering the necessary technical solutions specifically made for building progressive web applications. At CedCommerce we believe in walking hand in hand with progressive technology and providing advanced solutions to those who are in need.