PWA

How to create custom extension in Magento 2 PWA

In Magento 2, we can install and set up any third-party extension in our project and use them according to our requirements. In that same way, we can create a custom extension in Magento PWA Studio, too. Lars Roettig, a Magento maintainer released a npm package (https://www.npmjs.com/package/@larsroettig/create-pwa-extension) to create a custom extension in Magento PWA Studio. With the help of few steps, we can easily create a PWA extension in PWA Studio projects.

In this blog, we get an idea of how to create and install a custom PWA extension. For the demonstration, we create a custom page in the custom extension and will see how to render a custom extension.

Create a custom package

We need to create a custom package in PWA Studio. You can follow the steps from the Setup PWA Studio with Magento 2 blog.

Go to the custom package directory

Now we go to the custom package directory with the following command:

cd packages/example-concept/
Create a custom extension

The following command would create a custom extension for us. While running that command, it would ask us some questions same as Create a custom package step as shown in the following screenshot.

yarn create @larsroettig/pwa-extension

Note: You have to answer No for the question Install package dependencies with yarn after creating the project.
After installation you can see the folder structure for the custom package and the custom extension as shown in the following screenshot:

Create a custom page in the extension

Add a new route
File Path: packages/example-concept/@mage2/product-inquiry/src/intercept.js

module.exports = targets => {
    targets.of('@magento/pwa-buildpack').specialFeatures.tap(flags => {
        /**
         *  Wee need to activated esModules and cssModules to allow build pack to load our extension
         * {@link https://magento.github.io/pwa-studio/pwa-buildpack/reference/configure-webpack/#special-flags}.
         */
        flags[targets.name] = {esModules: true, cssModules: true};
    });
    targets.of('@magento/venia-ui').routes.tap(
        routesArray => {
            routesArray.push({
                name: 'Product Inquiry Page',
                pattern: '/product-inquiry',
                path: '@mage2/product-inquiry/src/components/inquiry'
            });
            return routesArray;
        }
    );
};

Create a page
We need to create a components directory inside packages/example-concept/@mage2/product-inquiry/src/ directory and a demo file at the following path:
File Path: packages/example-concept/@mage2/product-inquiry/src/components/inquiry/index.js

import React from 'react';

const Inquiry = () => {
    const h1 = {
        textAlign: "center",
        margin: "1rem"
    }
    return (<div style={h1}>Mage2 Product Inquiry</div>);
}

export default Inquiry;
Add a dependency of custom extension

We need to add a custom extension dependency in our example-concept package inside the “dependencies” array in the package.json file.
File Path: packages/example-concept/package.json

"dependencies": {
    "@mage2": "link:@mage2",
    "product-inquiry": "link:@mage2/product-inquiry"
},
Install an extension

Now we run the following command in the root directory of the PWA Studio project.

yarn install
yarn watch
Run storefront

We run the following command to run a storefront.

yarn watch:example

Open the storefront URL and add URL /product-inquiry at the end of the URL to load our custom page route. You can see our demo page like the following screenshot.

We hope this blog may understandable and useful to you. You can email us at mage2developer@gmail.com if we missed anything or want to add any suggestions. We will respond to you as soon as possible. Happy to help 🙂