Progress will discontinue Telerik Platform on May 10th, 2018. Learn more

Manage Plugins via Package.json

Filter by IDE
Select the Progress AppBuilder client you are currently using for development.

IDE

If you want to use a plugin which is not available in the npm registry or the Telerik Verified Plugins Marketplace, you can add it manually by editing your package.json in the root of the app. During the build, AppBuilder resolves the dependency and makes the plugin available inside your built application. Because of this behavior, you cannot test plugins in the developer app.

For modules managed exclusively via package.json, AppBuilder cannot process TypeScript definitions properly, even if available. You might not be able to use code completion and type checking.

If you want to develop a plugin yourself, see Plugins in the NativeScript documentation.

At any time, you can review the modules currently added to your app by reviewing the Dependencies tab in your Properties dialog.

CAUTION: Do not create and work with platform- or configuration-specific package.json files. AppBuilder might not be able to process them correctly and you might experience various issues when working with your app.

Prerequisite

  • Verify that the plugin that you want to use is a valid npm package and is available through any of the following channels:
    • A public npm module.
    • A public GitHub repository.
    • A public git repository.
    • A public URL to a tarball (tgz or tar.gz).
    • A folder inside your app which contains the plugin files and a package.json. The folder must not be placed in the tns_modules directory.
  • Verify that your preferred AppBuilder client is running and you are logged in.
  • Verify that you have opened the code for your app in AppBuilder.

Procedure

You cannot test plugins in the developer app. To be able to verify that the plugins work as expected, you need to build and deploy your app as an application package on the device.

In-Browser

Add plugins

  1. In the Project Navigator, double-click the package.json file located in the root of the app.
  2. List the plugin as a dependency in the file. Make sure that name or ID references are lowercase only. For example:

    {
        "dependencies": 
            {
                "foo" : "1.0.0",
                "bar" : "latest",
                "baz" : "git://github.com/user/app.git#commit-ish",
                "boo" : "http://asdf.com/asdf.tar.gz",
                "qux" : "file:plugin-in-the-root"           
            },
        "devDependencies": {}
    }
    

    For more information about the dependencies syntax, see Specifics of npm's package.json handling.

  3. Insert a require reference to the plugin in your app.
    For example:

    var myModule = require("custom-module/index");
    

    IMPORTANT: The NativeScript framework searches for the file pointed by the main value in the plugins's package.json file. You need to require the plugin by referencing its name and the main value.

  4. Save your changes.

Update plugins

  1. In the Project Navigator, double-click the package.json file located in the root of the app.
  2. In the dependencies block, change the current version of the plugin to the version that you want to use.
  3. In the code of your app, update any references to the plugin, if needed.
  4. Save your changes.

Remove plugins

  1. In the Project Navigator, double-click the package.json file located in the root of the app.
  2. In the dependencies block, delete the line for the plugin that you want to remove.
  3. In the code of your app, remove any references to the plugin.
  4. Save your changes.

Windows

Add plugins

  1. In the Project Navigator, double-click the package.json file located in the root of the app.
  2. List the plugin as a dependency in the file. Make sure that name or ID references are lowercase only. For example:

    {
        "dependencies": 
            {
                "foo" : "1.0.0",
                "bar" : "latest",
                "baz" : "git://github.com/user/app.git#commit-ish",
                "boo" : "http://asdf.com/asdf.tar.gz",
                "qux" : "file:plugin-in-the-root"           
            },
        "devDependencies": {}
    }
    

    For more information about the dependencies syntax, see Specifics of npm's package.json handling.

  3. Insert a require reference to the plugin in your app.
    For example:

    var myModule = require("custom-module/index");
    

    IMPORTANT: The NativeScript framework searches for the file pointed by the main value in the plugins's package.json file. You need to require the plugin by referencing its name and the main value.

  4. Save your changes.

Update plugins

  1. In the Project Navigator, double-click the package.json file located in the root of the app.
  2. In the dependencies block, change the current version of the plugin to the version that you want to use.
  3. In the code of your app, update any references to the plugin, if needed.
  4. Save your changes.

Remove plugins

  1. In the Project Navigator, double-click the package.json file located in the root of the app.
  2. In the dependencies block, delete the line for the plugin that you want to remove.
  3. In the code of your app, remove any references to the plugin.
  4. Save your changes.

Visual Studio

Add plugins

  1. In the Solution Explorer, double-click the package.json file located in the root of the app.
  2. List the plugin as a dependency in the file. Make sure that name or ID references are lowercase only. For example:

    {
        "dependencies": 
            {
                "foo" : "1.0.0",
                "bar" : "latest",
                "baz" : "git://github.com/user/app.git#commit-ish",
                "boo" : "http://asdf.com/asdf.tar.gz",
                "qux" : "file:plugin-in-the-root"           
            },
        "devDependencies": {}
    }
    

    For more information about the dependencies syntax, see Specifics of npm's package.json handling.

  3. Insert a require reference to the plugin in your app.
    For example:

    var myModule = require("custom-module/index");
    

    IMPORTANT: The NativeScript framework searches for the file pointed by the main value in the plugin's package.json file. You need to require the plugin by referencing its name and the main value.

  4. Save your changes.

Update plugins

  1. In the Project Navigator, double-click the package.json file located in the root of the app.
  2. In the dependencies block, change the current version of the plugin to the version that you want to use.
  3. In the code of your app, update any references to the plugin, if needed.
  4. Save your changes.

Remove plugins

  1. In the Project Navigator, double-click the package.json file located in the root of the app.
  2. In the dependencies block, delete the line for the plugin that you want to remove.
  3. In the code of your app, remove any references to the plugin.
  4. Save your changes.

CLI

TIP: With the command-line interface, you can manage all plugins, including local modules, in your app with the plugin set of commands. For more information, run appbuilder help plugin.

Add plugins

  1. In a code editor open the package.json file located in the root of the app.
  2. List the plugin as a dependency in the file. Make sure that name or ID references are lowercase only. For example:

    {
        "dependencies": 
            {
                "foo" : "1.0.0",
                "bar" : "latest",
                "baz" : "git://github.com/user/app.git#commit-ish",
                "boo" : "http://asdf.com/asdf.tar.gz",
                "qux" : "file:plugin-in-the-root"           
            },
        "devDependencies": {}
    }
    

    For more information about the dependencies syntax, see Specifics of npm's package.json handling.

  3. Insert a require reference to the plugin in your app.
    For example:

    var myModule = require("custom-module/index");
    

    IMPORTANT: The NativeScript framework searches for the file pointed by the main value in the module's package.json file. You need to require the module by referencing its name and the main value.

  4. Save your changes.

Update plugins

  1. In the Project Navigator, double-click the package.json file located in the root of the app.
  2. In the dependencies block, change the current version of the plugin to the version that you want to use.
  3. In the code of your app, update any references to the plugin, if needed.
  4. Save your changes.

Remove plugins

  1. In the Project Navigator, double-click the package.json file located in the root of the app.
  2. In the dependencies block, delete the line for the plugin that you want to remove.
  3. In the code of your app, remove any references to the plugin.
  4. Save your changes.

Next Steps

Manage your plugin variables, if any, and re-build your app for AppBuilder to resolve the newly added dependencies.

See Also

Contact us: +1-888-365-2779
sales@telerik.com
Copyright © 2016-2017, Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.