Update the Frameworks in Your App

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

IDE

You can replace the code libraries in your existing apps to take advantage of any updates to the frameworks that you use for 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

Update npm Packages

  1. In the Project Navigator, right-click the second node from the top and select Manage Packages.
  2. In the npm tab, locate the package that you want to update.
    Installed packages are listed on top.
  3. Select the package that you want to update 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. In the description panel, from the Version drop-down menu, select the version to which you want to update.
  6. Click Change.
  7. Close the wizard.
  8. Update references to the code libraries in your app.

Update 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 files that you want to replace from your file explorer to the drop files here to upload text box.
  5. Click Upload.
  6. Confirm that you want to replace the existing files.
  7. If needed, update references to the code libraries in your app.

Universal

Update npm Packages

  1. In the Project Navigator, right-click the second node from the top and select Manage Packages.
  2. In the npm tab, locate the package that you want to update.
    Installed packages are listed on top.
  3. Select the package that you want to update 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. In the description panel, from the Version drop-down menu, select the version to which you want to update.
  6. Click Change.
  7. Close the wizard.
  8. Update references to the code libraries in your app.

Update 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 files that you want to replace from your file explorer to the drop files here to upload text box.
  5. Click Upload.
  6. Confirm that you want to replace the existing files.
  7. If needed, update references to the code libraries in your app.

Windows

Update npm Packages

  1. Remove the files and references for the outdated package from your app.
  2. In the npm tab, locate the package that you want to update.
    Installed packages are listed on top.
  3. Select the package that you want to update 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. In the description panel, from the Version drop-down menu, select the version to which you want to update.
  6. Click Change.
  7. Close the wizard.
  8. Update references to the code libraries in your app.

Update 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 files that you want to replace from your file explorer to the folder that contains the code libraries in the Project Navigator.
  4. Confirm that you want to replace the existing files.
  5. If needed, update references to the code libraries in your app.

Visual Studio

Update npm Packages

  1. Remove the files and references for the outdated package from your app.
  2. In the Solution Explorer, right-click your app and select Manage Packages.
  3. In the npm tab, locate the package that you want to update.
    Installed packages are listed on top.
  4. Select the package that you want to update in your app.
  5. (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.
  6. In the description panel, from the Version drop-down menu, select the version to which you want to update.
  7. Click Change.
  8. Close the wizard.
  9. Update references to the code libraries in your app.

Update 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 files that you want to replace from the folder that Microsoft Visual Studio opened in your file explorer to the folder that contains the code libraries in the Solution Explorer.
  4. Confirm that you want to replace the existing files.
  5. If needed, update references to the code libraries in your app.

CLI

Update npm Packages

  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. In the code of your app, update any references to the plugin, if needed.

Update 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, manually replace your existing code libraries with the ones that you want to use.
  4. Confirm that you want to replace the existing files.
  5. If needed, update references to the code libraries in your app.

TIP: You can use appbuilder plugin add to update 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.