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

Add New Frameworks in Your App

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

IDE

You can add third-party frameworks to your NativeScript project to improve your development.

When you add a third-party framework from the npm registry to your app, AppBuilder does not add its 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 framework files available inside your built application. Because of this behavior, you cannot test frameworks added via npm 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 dialog.

Prerequisites

  • 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

In-Browser

Add npm Packages

  1. In the Project Navigator, right-click the second node from the top and select Manage Packages.
  2. In the npm tab, in the Search text box, start typing the name of the package that you want to use.
  3. Select the package that you want to use in your app.
  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. (Optional) In the description panel, from the Version drop-down menu, select the package version that you want to install.
  6. Click Install.
  7. Close the wizard.
  8. Reference the newly added framework or package in your app.

Add Other Third-Party Frameworks

  1. Download the code libraries for the framework version that you want to use.
  2. If the code libraries are archived, unpack the archive on your local file system.
  3. In the Project Navigator, right-click the folder that contains the code libraries and select AddExisting Files.
  4. Drag and drop the framework files to the drop files here to upload text box.
  5. Click Upload.
  6. Reference the code libraries in your app.

Universal

Add npm Packages

  1. In the Project Navigator, right-click the second node from the top and select Manage Packages.
  2. In the npm tab, in the Search text box, start typing the name of the package that you want to use.
  3. Select the package that you want to use in your app.
  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. (Optional) In the description panel, from the Version drop-down menu, select the package version that you want to install.
  6. Click Install.
  7. Close the wizard.
  8. Reference the newly added framework or package in your app.

Add Other Third-Party Frameworks

  1. Download the code libraries for the framework version that you want to use.
  2. If the code libraries are archived, unpack the archive on your local file system.
  3. In the Project Navigator, right-click the folder that contains the code libraries and select AddExisting Files.
  4. Drag and drop the framework files to the drop files here to upload text box.
  5. Click Upload.
  6. Reference the newly added framework or package in your app.

Windows

Add npm Packages

  1. In the Project Navigator, right-click the second node from the top and select Manage Packages.
  2. In the npm tab, in the Search text box, start typing the name of the package that you want to use.
  3. Select the package that you want to use in your app.
  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. (Optional) In the description panel, from the Version drop-down menu, select the package version that you want to install.
  6. Click Install.
  7. Close the wizard.
  8. Reference the newly added framework or package in your app.

Add Other Third-Party Frameworks

  1. Download the code libraries for the framework version that you want to use.
  2. If the code libraries are archived, unpack the archive on your local file system.
  3. Drag and drop the framework files to the Project Navigator.
  4. Reference the newly added framework or package in your app.

Visual Studio

Add npm Packages

  1. In the Solution Explorer, right-click your app and select Manage Packages.
  2. In the npm tab, in the Search text box, start typing the name of the package that you want to use.
  3. Select the package that you want to use in your app.
  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. (Optional) In the description panel, from the Version drop-down menu, select the package version that you want to install.
  6. Click Install.
  7. Close the wizard.
  8. Reference the newly added framework or package in your app.

Add Other Third-Party Frameworks

  1. Download the code libraries for the framework version that you want to use.
  2. If the code libraries are archived, unpack the archive on your local file system.
  3. Drag and drop the framework files in the Solution Explorer.
  4. Reference the newly added framework or package in your app.

CLI

Add npm Packages

  1. In the command prompt, navigate to the directory that contains your app.
  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.

    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.

    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. Reference the newly added framework or package in your app.

Add Other Third-Party Frameworks

  1. Download the code libraries for the framework version that you want to use.
  2. If the code libraries are archived, unpack the archive on your local file system.
  3. On your local file system, copy the framework files to your app.
  4. Reference the code libraries in your app.

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

Next Steps

Build and re-deploy your app on devices.

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.