mosaic
  • Overview
  • Integration
    • Next.js
    • Create React App
    • Webpack
  • Getting started
    • Extensions
    • Themes
  • Tutorials
    • Mosaic + React
    • Mosaic + Webpack
  • Install an extension
    • Install a local extension
    • Install with a package manager
    • Enable or disable an extension
  • Develop an extension
    • Anatomy of an extension
    • Namespaces
    • Runtime plugins
    • Build configuration plugins
  • CRA features
    • CRACO plugins
  • Next.js features
    • Styles
    • Pages
    • Common props
  • Architecture examples
    • Router
  • Themes
    • Parent theme system
    • File shadowing
  • Experimental
    • Module preferences
    • File provisioning
  • in-depth
    • How does it work?
Powered by GitBook
On this page

Was this helpful?

  1. Install an extension

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 + WebpackNextInstall with a package manager

Last updated 4 years ago

Was this helpful?

the extension:

Enable