An Overview on Magento Progressive Web App Studio You Shouldn’t Miss

Remember the Reacticon Conference back in March 2018? Magento announces its latest upgrade, the Magento PWA Studio: The set of tools which will let you play with the react components. The early development release just give you the glimpse of how you can use Magento PWA Studio in general.

So, if you are one of those, who want to play along with the PWA studio then you are in the right place. Here in this post, we will give you a quick rundown of all the features and competencies of Magento PWA Studio which you can leverage for your business in the coming future.

Why?

Because mobile application is the future of every business and sooner or later you have to accept it. So, start now and know how you can use Magento PWA studio: A react-based theme developer to bolster your ecommerce business. So, without any further ado, let’s get you started.

How Routing in PWA Studio Works?

Let me be honest, routing with react can be a daunting task and if you are working on adapting it with Magento 2 with the help of Magento Developer, then you need to be extra cautious.

Lucky for you, Magento PWA Studio comes with inbuilt solution for handling routing for react via flexible Magento 2 URLs.

That component is none other than MagentoRouter . It act as a wrapper for React Router and is spawned with the functionality of route handling. You can find the path of MagentoRouter here,

packages/peregrine/src/Router/Router.js

Three type of page URLs are currently supported by MagentoRouter,

  • CMS Pages
  • Category Pages
  • Product Pages

This is how routing with Magento PWA studio works (Step-by Step Methodology)

  1. The MagentoRouter simply passes the URL to the component named as Magento RouteHandler.
  2. Once successfully passed to Magento RouteHandler, it simply ask query to Magento 2 with the help of GraphQl to resolve the route and get the page type in return from the query. As mentioned above, the page types are CMS_PAGE, PRODUCT, and CATEGORY.
  3. If the URL doesn’t exist there, then the Magento 2 will simply shows a 404 error. If the page exist, then the MagentoRouter will simply render a RootComponent which will be later assigned to the received type of of page.

Winding It Up

See, it is not that difficult. However, I want to mention that it will be a little difficult when you need to specify a Root Component for a specific page type. Take an example for specifying root component for CMS_Page. You need to create a index.js entry point file with the following code,

/**
 * @RootComponent
 * description = ‘Basic CMS Page’
 * pageTypes = CMS_PAGE
 */
 
export { default } from ‘./path/to/cms/main/component;

Once you do that, it will become easy for you to specify root components for the particular pages.

It will be very interesting to see how Magento PWA Studio will perform with other Magento 2 functions such as the layout updates in which Magento Expert can help. Well, that’s the story for another tale then. Thanks for reading this article. Feel free to contact me via comments. I will get back to you as soon as possible. Adios for now.

Leave a Reply

Your email address will not be published. Required fields are marked *