How To Create an Extension In PWA studio(Venia)?

# PWA # Javascript

Pravin Prajapati · 20 Dec 2022

Extensions are the best way to make changes to your PWA studio project. With the help of an extension, you can easily customise your online store without affecting your core code. Extensions offer flexibility and scalability in PWA studio projects.

Extensions are easy to install and update occasionally without any problem. You can customize your store on/off without disrupting core functionality, simplifying maintenance.

In this post we explain the method of creating an extension in the PWA studio. We learn in detail how to create an extension in Venia PWA studio.

At Magento PWA root

To create an extension in Magento PWA-Studio, you can follow these steps:

Create a folder named @<namespace>/<modulename> in the root directory of your PWA project.
In <modulename> folder, create the following files and directories:

1. package.json file

2. intercept.js file

3. src folder

Open the package.json file in the root directory of your Venia project.
Add your extension to the dependencies section, pointing to the local path of your extension:

{
        "name": "@namespace/modulename",
        "version": "0.0.1",
        "publishConfig": {
                "access": "public"
        },
        "description": "module description",
        "main": "./intercept.js",
        "scripts": {
                "clean": ""
        },
        "repository": "github:magento/pwa-studio",
        "license": "(OSL-3.0 OR AFL-3.0)",
        "peerDependencies": {
                "@magento/pwa-buildpack": "~9.0.0",
                "@magento/venia-ui": "~7.0.0"
        },
        "pwa-studio": {
                "targets": {
                        "intercept": "./intercept.js"
                }
        }
}

This allows PWA studio to recognise and use your extension while it is in development.

About intercept.js file

You directly interact with Targets and Targetables in the intercepted file to apply customizations. It exports a default function that accepts a TargetProvider parameter.

In src folder

you can create components queries and talons

Add your extension in the package.json file of Magento PWA root:

dependencies: { 
   "@namespace/modulename": "link:./@namespace/modulename" 
}

Still within the package.json file of your PWA project, under the PWA-studio section, add your namespace to the list of trusted vendors:

"pwa-studio": {
    "trusted-vendors": ["@namespace"]
}

This step confirms that Venia trusts your extension and permits it to interact with the main PWA application.

Install Dependencies and Build

Open your terminal and fire commands

Run yarn install to install any dependencies required by your extension.
Finally, run yarn build to build your PWA project, including your extension.

By following these instructions, you can successfully integrate the extension into Venia PWA Studio, which allows you to add more functionality as needed.

Essence

We hope you found the information presented valuable and insightful in wrapping up our tutorial. We understand that learning new concepts can sometimes be challenging, so if any parts of the tutorial need clarification or you have any questions, please Contact us.

Furthermore, if you want to take your Magento PWA Studio website to the next level, we recommend checking out our collection of PWA Studio extensions. These extensions are designed to improve the functionality and performance of your Magento PWA Studio website.

Thank you for choosing to learn with Elightwalk, and our Magento developer team hopes to continue assisting you on your journey to success with Magento PWA Studio.

Email send us at hello@elightwalk.com

Table of contents

Pravin Prajapati

Full Stack Developer

Expert in frontend and backend development, combining creativity with sharp technical knowledge. Passionate about keeping up with industry trends, he implements cutting-edge technologies, showcasing strong problem-solving skills and attention to detail in crafting innovative solutions.

Most Visited Blog

Installing the ScandiPWA Extension: A Comprehensive Guide

Extensions are new features that we add to our websites. Or we can disable and enable it through commands. All commands run at the ScandiPWA path.

How to create a checkout UI extension Shopify?

Create a successful checkout UI extension for your Shopify store. The UI extension is an exciting opportunity to enhance the user experience to match your brand identity and streamline the checkout process. Let's embark on this journey to elevate your Shopify store's interface and create a more compelling online shopping environment.

How to Create a new Talons in-Venia?

A brief approach to building new Talons can help your Venia project. Enhance your Magento PWA shop's functionality and user experience by effortlessly integrating and customizing Talons.