1. Install ScandiPWA CLI

First of all, you may want to install the official ScandiPWA CLI to make the creation of components and extensions easier.

You can find more information about ScandiPWA CLI and it’s power here!

How to use the ScandiPWA CLI?

2. Create an extension using scandipwa extension create command

You can learn more about scandipwa extension create here.

This command will generate all the directory structure you need to start working on your extension features and codebase.

Here’s an example, after entering the ScandiPWA CLI:

scandipwa extension create [--no-enable] xyz

This will create an extension called xyz, and the —no enable directive will create the extension without enabling it.

<aside> ⚠️ if you add the --no-enable, it will create the extension without enabling it.

</aside>

3. Register your extension

<aside> ➡️ If you created the extension using the CLI and didn't add the -no-enable flag, it will be automatically registered, and this step is not required.

</aside>

In order for your extension to be recognized, it must have a package.json file in it’s package directory following this structure:

{
    "scandipwa": {
        "type": "extension"
    }
    ...
}

Then, register your extension to your ScandiPWA’s package.json in the field of scandipwa.extensions and scandipwa.dependencies, like this:

{
    "dependencies": {
        "@scandipwa/xyz": "0.0.2",
        ...
    },
    "scandipwa": {
        "extensions": {
            "@scandipwa/xyz": true
        },
        ...
    }
    ...
}

<aside> ⚠️ Watch out! Disabling a previously enabled extension can lead to layout-shifts and issues inside of your parent theme. Also, there might be extensions plugging into the extension you intend to disable, this can lead to unexpected results.

</aside>