Rise of the Headless PWA – Using Magento 2 on Your Vue Storefront

PWAs or Progressive Web Apps have never been more popular. Unlike regular apps, PWAs rely on an existent technology that allows people to construct an original app.

As of recently, there is more and more talk about headless PWA technology that has made quite a stir in eCommerce. Every time a new trend strikes, it goes without saying that you should stay informed on it. So, here it is – the rise of the Headless PWA and how it pertains to Magento 2 on a Vue storefront.

Explaining the Terms

The terms that we’re going to be using might not be everyday stuff. You could go on Google and dig around for more information individually, but it’d much easier to have everything in one place. So, here are some of the technical terms and acronyms that we’re going to cover.

PWA

PWAs are apps built for languages such as JavaScript, CSS, and/or HTML. Pp until the arrival of PWAs, you couldn’t exactly make a native-looking app using regular methods.

Although a PWA isn’t an actual native app, its goal is to achieve the functionality of a native app. With a couple of smart extensions and additions, nowadays you can turn pretty much any website into a PWA.

API

Now, API isn’t necessarily a vital piece of information as relates to PWAs. Some developers may consider it so, but understanding PWA technology can be achieved without knowing about what API is.

With headless PWAs, however, there is no escaping API or Application Programming Interface. Essentially, an API defines the interactions of two or more software intermediaries.

In this case, the API helps the app communicate with the server. The app sends data to a server, which retrieves and interprets the data, performs the required actions, and sends it back to the app or device.

The thing is that PWAs don’t require APIs. It’s only recently that API technology has been introduced in the development of PWAs. The result is what’s known as headless PWAs.

Magento 2

You probably know what Magento 2 is. But bear with us.

Magento 2 is an eCommerce platform. It helps merchants by providing them with automated universal tools. For instance, a flexible shopping cart system and control over the aesthetics, functionality, content, and so on.

With Magento 2, it’s much easier to build a personalized eCommerce webpage. Instead of having to build a lot of unique content from scratch, you and your developer(s) can use Magento 2 to get things started quickly and easily.

And modern Magento 2 development makes use of headless PWAs. Just as Magento 2 makes it easy to create the essential parts of a webstore, headless PWA helps to integrate Magento 2 better and faster.

Vue Storefront

Vue Storefront is a headless, backend-agnostic PWA that helps you, the user, to come up with a webstore quickly and easily.

Backend-Agnostic

This term refers to an app that doesn’t require frontend project integration via a node, rails, python, or any other app. Although backend-agnostic apps are written in node, they are still backend-agnostic.

Integrating Vue Storefront with Magento 2

Now, let’s get a bit more technical. Here’s how to integrate Vue Storefront with Magento 2.

The Magento 2 Module

First off, you’re going to need a tool that syncs the Vue Storefront data store with Magento 2 source data. Fortunately, Magento 2 comes with a native module that does this called Magento 2 VSBridge Indexer. It’s fast, reliable, and fully-integrated with Magento 2.

Magento 2 API and OAuth Authorization

Magento 2 VSBridge Indexer uses the Magento 2 API through OAuth authorization. This means that you need to prepare Magento integration access. To do this, navigate to the Magento 2 admin panel. Then, click System, followed by Integrations.

Now, select Add New Integration. Enter all required info, such as the name and your password, to confirm everything. Now, navigate to the API Permissions tab. Check Catalog, Sales, My Account, and Carts. Then, go to Stores, followed by Settings, Configuration, and check Inventory Section. Now, in the Stores section, check Taxes. Finally, go to Attributes and check Product.

Confirm changes by clicking Save.

Syncing Magento 2 with the Local Instance

There are two integration options here. There are the old manual way and a fast integration method.

Magento 2 data import tools are integrated into Vue Storefront’s API. Although it still uses mage2vuestorefront, it’s pretty much automated.

Fast Integration

To sync Magento 2 with your local instance, set config.magento2.api. Use the Magento 2 OAuth credentials when prompted. To import all products, categories, and all other stuff, use the yarn mage2vs import command. Alternatively, you can use the same command, but with a specified parameter, by adding –store-code=de to the command.

Manual Integration

As mentioned, the old way of integration is still available. Start by installing the mage2vuestorefront tool and edit the src/config.js file in it to:

magento: {

 url: process.env.MAGENTO_URL || “http://your-magento-url.com/rest/”, <- change to your Magento 2 URL,

 consumerKey: process.env.MAGENTO_CONSUMER_KEY || ‘alva6h6hku9qxrpfe02c2jalopx7od1q’,

 consumerSecret: process.env.MAGENTO_CONSUMER_SECRET || ‘9tgfpgoojlx9tfy21b8kw7ssfu2aynpm’,

 accessToken: process.env.MAGENTO_ACCESS_TOKEN || ‘rw5w0si9imbu45h3m9hkyrfr4gjina8q’,

 accessTokenSecret: process.env.MAGENTO_ACCESS_TOKEN_SECRET || ’00y9dl4vpxgcef3gn5mntbxtylowjcc9′,

},

To commence the full import, run the following commands in this order:

node cli.js taxrule

node cli.js attributes

node cli.js categories

node cli.js productcategories

node cli.js products

Feel free to run these commands as many times as you want, seeing as how they will insert updates to the existing records every time there’s a change.

Syncing Orders and Images

You’re probably going to want to sync the shopping carts and images in real-time now. To do this, you’re going to use the vue-storefront-api tool. Edit the conf/local.json file inside the vue-storefront-api directory. This will set the OAuth Magento API access:

“magento2”: {

 “url”: “http://your-magento-url.com”,

 “imgUrl”: “http://your-magento-url.com/media/catalog/product”,

 “assetPath”: “/../var/magento2-sample-data/pub/media”,

 “api”: {

 “url”: “http://your-magento-url.com/rest/”,

 “consumerKey”: “alva6h6hku9qxrpfe02c2jalopx7od1q”,

 “consumerSecret”: “9tgfpgoojlx9tfy21b8kw7ssfu2aynpm”,

 “accessToken”: “rw5w0si9imbu45h3m9hkyrfr4gjina8q”,

 “accessTokenSecret”: “00y9dl4vpxgcef3gn5mntbxtylowjcc9”

 }

},

Now, you’ll probably want to allow the vue-storefront-api tool to resize the Magento images. Add Magento’s domain to the whitelist using this command:

“imageable”: {

 “namespace”: “”,

 “maxListeners”: 512,

 “imageSizeLimit”: 1024,

 “timeouts”: {

 “convert”: 15000,

 “identify”: 300,

 “download”: 5000

 },

 “whitelist”: {

 “allowedHosts”: [

 “.*your-magento-url.com”,

 “.*divante.pl”,

 “.*vuestorefront.io”,

 “localhost”

 ],

 “trustedHosts”: [

 “.*your-magento-url.com”,

 “.*divante.pl”,

 “.*vuestorefront.io”,

 “localhost”

 ]

 },

Now, run the Order2Magento worker – this tool will process all user-made orders. Enter this command:

Yarn o2m

Syncing Shopping Carts

In Magento 2, shopping carts aren’t synced in real-time by default. The cart is created only when an order is placed.

You’re going to want to keep the cart current at all times.

To do this, go to vue-storefront/conf/local.json and enter the following command to the cart section:

synchronize: true;

What Is Headless eCommerce?

To put it simply, in headless eCommerce the backend and content or data management systems are stored separately from the interface.

What’s the big idea here? Division of labor division for backend and frontend developers. Frontend devs have the freedom to use any framework of their choice (in this case, Vue), while the backenders will proceed with their part of the job in their own way.

There aren’t any real downsides of headless eCommerce, although it is unnecessary if you are or have hired a full stack dev. Still, the ability to separate the frontend and the backend is a very good thing. Just ask any developer.

Headless PWAs, Magento 2, and Vue Storefront

As you can see, the three are intertwined and dependent on one another. While separate, the technology used is interconnected and unified under the great banner of headless eCommerce.

If you’re looking to use Magento 2 on a Vue Storefront, get familiar with headless PWAs. It’s high time.