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

Manage Plugins from the npm Registry

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

IDE

If the NativeScript framework does not expose a native API that you need, you can use a plugin from the npm registry which exposes the required functionality. You can also add and use third-party JavaScript frameworks, available as npm packages, to your app.

When you add a plugin from the npm registry to your app, AppBuilder does not add the module files to your app directory structure. Instead, it adds the module as a dependency in the package.json file in the root of your 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.

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

Prerequisite

  • Verify that the plugin that you want to use is available in the npm registry.
  • 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, right-click the second node from the top and select Manage Packages.
  2. In the Search text box, type the name of the module that you want to add and press Enter.
  3. Select the module that you want to install.
  4. (TypeScript apps-only) Select or deselect the Include TypeScript definitions on install check box.
    The setting configures how AppBuilder handles the TypeScript definitions for the module, if available. By default, this option is enabled.
  5. Click Install.
    AppBuilder shows a check mark next to the newly installed plugin.
  6. Close the Manage Packages wizard.
  7. Verify that the dependency is declared in lowercase.
    1. In the Project Navigator, double-click the package.json file located in the root of the app.
    2. Locate the plugin declaration in the dependencies module.
    3. Make sure that the declaration is entirely in lowercase.
    4. Save changes, if any.
  8. 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.

  9. Save your changes.

Update plugins

  1. In the Project Navigator, right-click the second node from the top and select Manage Packages.
  2. From the list of installed modules, select the module that you want to update.
  3. (TypeScript apps-only) Select or deselect the Include TypeScript definitions on install check box.
    The setting configures how AppBuilder handles the TypeScript definitions for the module, if available. By default, this option is enabled.
  4. In the description panel, from the Version drop-down menu, select the version to which you want to update.
  5. Click Change.
  6. Close the Manage Packages wizard.
  7. In the code of your app, update any references to the plugin, if needed.

Remove plugins

  1. In the Project Navigator, right-click the second node from the top and select Manage Packages.
  2. From the list of installed modules, select the module that you want to remove.
  3. Click Uninstall.
  4. Close the Manage Packages wizard.
  5. In the code of your app, remove any references to the plugin.

Windows

Add plugins

  1. In the Project Navigator, right-click the second node from the top and select Manage Packages.
  2. In the Search text box, type the name of the module that you want to add and press Enter.
  3. Select the module that you want to install.
  4. (TypeScript apps-only) Select or deselect the Include TypeScript definitions on install check box.
    The setting configures how AppBuilder handles the TypeScript definitions for the module, if available. By default, this option is enabled.
  5. Click Install.
    AppBuilder shows a check mark next to the newly installed plugin.
  6. Close the Manage Packages wizard.
  7. Verify that the dependency is declared in lowercase.
    1. In the Project Navigator, double-click the package.json file located in the root of the app.
    2. Locate the plugin declaration in the dependencies module.
    3. Make sure that the declaration is entirely in lowercase.
    4. Save changes, if any.
  8. 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.

  9. Save your changes.

Update plugins

  1. In the Project Navigator, right-click the second node from the top and select Manage Packages.
  2. From the list of installed modules, select the module that you want to update.
  3. (TypeScript apps-only) Select or deselect the Include TypeScript definitions on install check box.
    The setting configures how AppBuilder handles the TypeScript definitions for the module, if available. By default, this option is enabled.
  4. In the description panel, from the Version drop-down menu, select the version to which you want to update.
  5. Click Change.
  6. Close the Manage Packages wizard.
  7. In the code of your app, update any references to the plugin, if needed.

Remove plugins

  1. In the Project Navigator, right-click the second node from the top and select Manage Packages.
  2. From the list of installed modules, select the module that you want to remove.
  3. Click Uninstall.
  4. Close the Manage Packages wizard.
  5. In the code of your app, remove any references to the plugin.

Visual Studio

Add plugins

  1. In the Solution Explorer, right-click the project node and select Manage Packages.
  2. In the Search text box, type the name of the module that you want to add and press Enter.
  3. Select the module that you want to install.
  4. (TypeScript apps-only) Select or deselect the Include TypeScript definitions on install check box.
    The setting configures how AppBuilder handles the TypeScript definitions for the module, if available. By default, this option is enabled.
  5. Click Install.
    AppBuilder shows a check mark next to the newly installed plugin.
  6. Close the Manage Packages wizard.
  7. Verify that the dependency is declared in lowercase.
    1. In the Solution Explorer, double-click the package.json file located in the root of the app.
    2. Locate the plugin declaration in the dependencies module.
    3. Make sure that the declaration is entirely in lowercase.
    4. Save changes, if any.
  8. 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.

  9. Save your changes.

Update plugins

  1. In the Solution Explorer, right-click the project node and select Manage Packages.
  2. From the list of installed modules, select the module that you want to update.
  3. (TypeScript apps-only) Select or deselect the Include TypeScript definitions on install check box.
    The setting configures how AppBuilder handles the TypeScript definitions for the module, if available. By default, this option is enabled.
  4. In the description panel, from the Version drop-down menu, select the version to which you want to update.
  5. Click Change.
  6. Close the Manage Packages wizard.
  7. In the code of your app, update any references to the plugin, if needed.

Remove plugins

  1. In the Solution Explorer, right-click the project node and select Manage Packages.
  2. From the list of installed modules, select the module that you want to remove.
  3. Click Uninstall.
  4. Close the Manage Packages wizard.
  5. In the code of your app, remove any references to the plugin.

CLI

Add plugins

  1. In the command prompt, navigate to the directory that contains your app files.
  2. To find a module that might meet your development needs, run the following command.

    appbuilder plugin find <Search Criteria>
    
  3. To install a selected module, run the following command.
    This operation adds the module as a dependency in the package.json file of your app but does not copy the module files locally.

    appbuilder plugin add <Module Name>
    

    <Module Name> is the name of the plugin as listed in Step 2.
    (TypeScript apps-only) Set the --no-types option to disable the automatic installation of any available TypeScript definitions. By default, automatic installation is enabled.

  4. To install a selected module and copy its files locally, run the following command.
    This operation adds the module as a dependency in the package.json file of your app and copies the module files locally.

    appbuilder plugin fetch <Module Name>
    

    <Module Name> is the name of the plugin as listed in Step 2.
    (TypeScript apps-only) Set the --no-types option to disable the automatic installation of any available TypeScript definitions. By default, automatic installation is enabled.

  5. If prompted, provide values for the required plugin variables.
  6. Verify that the dependency is declared in lowercase.
    1. Open the package.json file located in the root of the app.
    2. Locate the plugin declaration in the dependencies module.
    3. Make sure that the declaration is entirely in lowercase.
    4. Save changes, if any.
  7. 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.

  8. Save your changes.

TIP: You can use appbuilder plugin add to add plugins from a local folder or archive and from a GitHub URL. For more information, run appbuilder help plugin add.

Update plugins

  1. In the command prompt, navigate to the directory that contains your app files.
  2. To update a selected module, run the following command.
    This operation updates the module dependency in the package.json file of your app but does not copy the module files locally.

    appbuilder plugin add <Module Name>@<Version>
    

    <Module Name> is the name of the installed plugin. <Version> is a valid version of the plugin.
    (TypeScript apps-only) Set the --no-types option to disable the automatic installation of any available TypeScript definitions. By default, automatic installation is enabled.

  3. To update a selected module and copy its files locally, run the following command.
    This operation updates the module dependency in the package.json file of your app and copies the module files locally.

    appbuilder plugin fetch <Module Name>@<Version>
    

    <Module Name> is the name of the installed plugin. <Version> is a valid version of the plugin.
    (TypeScript apps-only) Set the --no-types option to disable the automatic installation of any available TypeScript definitions. By default, automatic installation is enabled.

  4. If prompted, provide values for the required plugin variables.
  5. In the code of your app, update any references to the plugin, if needed.

TIP: You can use appbuilder plugin add to update plugins from a local folder or archive and from a GitHub URL. For more information, run appbuilder help plugin add.

Remove plugins

  1. In the command prompt, navigate to the directory that contains your app files.
  2. Run the following command.
    This operation removes the module dependency from the package.json file of your app. If the module files were copied locally during the module installation, this operation also removes the module files from your app.

    appbuilder plugin remove <Module Name>
    

    <Module Name> is the name of the installed plugin.

  3. In the code of your app, remove any references to the plugin.

Next Steps

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

See Also

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