If you wanted to write your own PWA Studio extension, you would have to take care of a few general things like:

  • base module structure
  • static code analysis
  • tests

If you value your time and the quality of your product, you should take steps to make starting as quick and easy as possible. Today I want to introduce the PWA Studio extension generator.

This tool will help you to build high-quality PWA Studio extensions in no time at all.

In this article, I would like to show you how to build your own PWA Studio extension using this generator.

Let’s do it!

First, we need to set up our local PWA Studio instance.

It would be best if you answered some questions on the console.

PWA Studio extension generator

Then please generate a unique, secure, custom domain for your new project.

Scaffolding extension

For development, I recommend creating a module in the <pwa-studio-root>src directory and linking it as symlinks in package.json.

Again, you will have to answer a few questions.

PWA Studio extension - creating

Your directory structures should look like this:

PWA Studio extension - directory structure

Now we need to link our module in the package.json file. Please add this entry as a dependency:

Now we need to install our module and run the PWA Studio instance.

Before we start development, we should do four things:

  • add @magento/venia-ui as a peer dependency
  • add @magento/peregrine as a peer dependency
  • run the yarn install command in our module directory
  • drink coffee, water, or whatever you like 🙂
Just drink water!

A few words about the extension

Today we will create an account information page where Customers will find the necessary information about themselves.

Requirements

  1. The Page should be visible at the ‘<base_url>/account-information’ URL
    1. the Page should be visible only for logged-in customers
    2. the Customer’s first name and last name will be displayed on the Page.
  2. A link to the Page should be visible in the customer menu

Adding a new route

Now it’s time to coding!

Defining the route

Thanks to targets, we can add a new route to PWA Studio in an easy way. Please add the following content to the intercept.js file:

As you can see on line 6, we defined the component which will be rendered when the user opens the Page.

Adding AccountInformation component

To start, please create a straightforward React component:

Remember to add an index.js file, which exports the component.

Adding customer data

We need to have three pieces of information about the Customer:

  • Is the Customer signed in?
  • First name
  • Last name

We are going to create the hook which will use the useUserContext talon. Please create a file at src/lib/talons/AccountInformation/useAccountInformation.js with the following content:

Display information about Customer on the Page

To display the Customer’s information, we have to import the hook and add JSX Markup to the component:

Adding styles

The next thing which we do is to add styles for our component. Please create the accountInformation.css file in the component directory:

Then you can import these styles as a module component and use it.

Checking if the Customer is logged in

We want to redirect to the homepage when the Customer is not logged in. To achieve this, we are going to use the @magento/venia-drivers Redirect component.

Our Page should look like this now:

PWA Studio extension

Adding a link to the customer menu

The Page looks good, but Customers need to know that this Page exists, so we will add a link to the customer menu. If the user clicks the link, PWA Studio will redirect to the account-information Page.

Note: I’m using overwrites here to extend the VeniaUI component and overwrite talon, but in the next version of PWA Studio, there will be a better way to extend talons using a new called Targetables.

We will use WebpackNormalOverridePlugin to add overwrites. If you are not familiar with this technique, please check one of my recent articles.

Overwriting components

Create the file lib/components/AccountMenu/accountMenuItems.js

The most important thing here is line 7 where we change the path to the useAccountMenuItems talons.

The next thing we need is the lib/talons/AccountInformation/useAccountInformation.js talon.

The last thing is to add moduleOverrideebpackPlugin, add a mapping, and modify the intercept.js file.

I’ll let you handle this one! 😉

Too much work to do?

If you do it correctly, you will see a link to the Page in the menu:

PWA Studio extension - customer menu
Customer menu

Unit tests

Thanks to the generator, we have already configured the environment for unit tests. We can use the Jest Testing Framework.

Please add a src/lib/components/AccountInformation/__tests__/AccountInformation.spec.js file with the following content:

Running tests

If you want to run a test, just run this command:

The results should look like this:

Other generator features

The generator has a few other features which help you to create excellent quality components.

Linting

ESLint checks all JavaScript code. You can run this linter manually using this command:

Configuration for esLint is in the .eslintrc.js file.

Code formatting

Also, you can automatically format your code by running this command:

Husky

Thanks to Husky, these commands (lint and format) run automatically before each git commit.

Source code

You can find the source code of the extension which we just made on my Github.

Summary

As you can see, thanks to PWA Studio Extension Generator, you can start developing your extension quickly, and you don’t have to worry about configuring things from scratch. You can grab base files and configs and change whatever you want. Happy Hacking!

WRITTEN BY

Marcin Kwiatkowski

Certified Magento Full Stack Developer who is passionate about Magento. He has 7 years of professional Software engineering experience.  Privately, husband, father, and DIY enthusiast.

 

You may also like