Install a local extension

Follow these steps in order to install an extension from a local source

First of all, download the extension

Create a packages/ directory inside of your theme's root.

Conventionally, the directory to store packages is called packages, but you may use another name if you are willing to.

Put the extension into the packages/<package name> directory. Make sure that you have a packages/<package name>/package.json file present alongside all the other extension's contents, that means that you have unpacked the extension correctly.

.
├── 📁 packages/
│   ├── 📁 @somebody/        # All extensions of this scope will be in this dir 
│   │   └── 📁 extension1/   # This extension is a scoped package
│   │       ├── ...
│   │       └── package.json
│   └── 📁 extension2/       # This extension is not a scoped package
│       ├── ...
│       └── package.json
├── 📁 src
└── package.json

Add the following scripts to the scripts section of your theme's package.json file. This is necessary for your package to be automatically symlinked into the node_modules directory of your theme, each time after any manipulation with dependencies

{
    "scripts": {
        "postinstall": "nextjs-scripts link",
        "postupdate": "nextjs-scripts link"
    }
}

{
    "scripts": {
        "postinstall": "cra-scripts link",
        "postupdate": "cra-scripts link"
    }
}

{
    "scripts": {
        "postinstall": "node-scripts link",
        "postupdate": "node-scripts link"
    }
}

Add the extension to the dependencies of your theme, as follows:

./package.json

{
    "dependencies": {
        "@somebody/extension1": "file:./packages/@somebody/extension1".
        "extension2": "file:./packages/extension2".
    }
}

package.json

{
    "mosaic": {
        "extensions": {
            "@somebody/extension1": true,
            "extension2": false
        }
    }
}

Update the symlinks by running the following command

npm run postinstall

yarn postinstall

PreviousMosaic + Webpack NextInstall with a package manager

Last updated 3 years ago

Was this helpful?

. ├── 📁 packages/ │ ├── 📁 @somebody/ # All extensions of this scope will be in this dir │ │ └── 📁 extension1/ # This extension is a scoped package │ │ ├── ... │ │ └── package.json │ └── 📁 extension2/ # This extension is not a scoped package │ ├── ... │ └── package.json ├── 📁 src └── package.json