Add custom Addon dependencies

Applies to:
generators/addons

If you would just like to integrate custom client-side dependencies, there is no need to write your own generator. This can just be included directly in the addon generator.

Add npm dependencies

The dependency configuration of additional addons is located in generators/addons/templates and is named addonConfig.json.

In this JSON file you can include additional configurations for various NPM packages.

{
    "jquery@2": {
        "dependencies": {
            "jquery": "^2.2.4",
            "@types/jquery": "^2.0.49"
        }
    },
    "jquery@3": {
        "dependencies": {
            "jquery": "^3.0.0",
            "@types/jquery": "^3.0.0"
        }
    },
    "pnpjs": {
        "dependencies": {
            "@pnp/pnpjs": "^1.1.1"
        }
    }
}

To add a custom library add a new property in the form of:

"yourcustomlibrary@2": {  // <custom library name>@<major version label>
    "dependencies": {     // "dependencies" or "devDependencies"
        "firstdependency": "^1.0.0",        // library named first dependecy,
        "@types/firstdependency": "^1.0.0", // types for first dependecy
        // .. any additional library
    }
}

The updated addonConfiguration.json file then might look like this:

{
    "jquery@2": {
        "dependencies": {
            "jquery": "^2.2.4",
            "@types/jquery": "^2.0.49"
        }
    },
    "jquery@3": {
        "dependencies": {
            "jquery": "^3.0.0",
            "@types/jquery": "^3.0.0"
        }
    },
    "pnpjs": {
        "dependencies": {
            "@pnp/pnpjs": "^1.1.1"
        }
    },
    "yourcustomlibrary@2": {
        "dependencies": {
            "firstdependency": "^1.0.0",
            "@types/firstdependency": "^1.0.0"
        }
    }
}

DO NOT use comments in JSON files - This causes the files to be invalid

Integrate the new library in prompting

To ask the user to include this new library open the promptConfig.js file in the addon generator. In the config options add a reference to the new library:

...

const configOptions = [
    // Library selection
    {
        type: 'checkbox',
        message: 'Which libraries to include',
        name: 'jsLibrary',
        choices: [{
            name: 'jQuery',
            value: 'jquery'
        }, {
            name: 'pnpjs',
            value: '@pnp/pnpjs'
        },
        // New reference
        {
            name: 'New awesome library to include',
            value: 'yourcustomlibrary@2'
        }
        ]
    },
    // jQuery version selection
    {
        type: 'list',
        message: `${chalk.bold.yellow('jQuery: ')} Please choose a version:`,
        name: 'jQueryVersion',
        choices: jqueryOptions,
        when: answers => answers.jsLibrary.indexOf('jquery') !== -1
    }
]

module.exports = configOptions;

The name of the new reference can be set to any descriptive text but the value must match the property name used in the addonConfig.json.

The selection of this dialog gets picked up automatically during the provisioning process and will be added to the package.json option.

The same method can be used to inject dependencies on custom generators too.