Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

NativeScript CLI to Telerik Platform- There and Back Again

DZone's Guide to

NativeScript CLI to Telerik Platform- There and Back Again

Learn how to take a NativeScript project created with the NativeScript CLI and migrate it to Telerik Platform to take advantage of cloud builds and app store deployment.

· Mobile Zone
Free Resource

Get gorgeous, multi-touch charts for your iOS application with just a few lines of code.

Far and away the most common place for people to start developing NativeScript apps is with the NativeScript CLI. It just makes sense—NativeScript is completely free, open source, and provides everything you need out of the box to create truly native cross-platform apps with JavaScript.

However, we regularly hear from many of these same people that they want to take a project started with the NativeScript CLI and move it to Telerik AppBuilder (part of Telerik Platform). Why? Well, with AppBuilder you get access to:

  • Cloud builds (no need for a Mac and no need to manage SDKs).
  • App store deployment.
  • Icon and splash screen creation.
  • Plugins management.
  • Configuration/settings management.

...the list goes on and on. So clearly there is value in moving a project from the NativeScript CLI to AppBuilder, but how do you do it? That's what this guide is all about.

Migrating Project From NativeScript CLI

If you have an existing NativeScript project created with the NativeScript CLI, let's go through the steps to move this project to AppBuilder.

Note that these instructions work equally well on Mac and Windows!

Locate your NativeScript project in your file system and compress/zip the app directory:

compress app directory

Next, log into your Telerik Platform account. Create a brand new NativeScript app by choosing Advanced > NativeScript > Blank Template:

telerik platform new app

Once your project is created in AppBuilder, use the Code menu option to navigate to the code editor.

You'll now need to delete the app directory and the package.json file in the Project Navigator pane:

telerik platform delete files

Next, right click on the project name and choose Add > From Archive. Choose the archive that you created from your existing NativeScript app directory:

telerik platform add archive

Finally, right click again on the project name and choose Add > Existing Files. Choose the package.json file from the root directory of your existing NativeScript project:

telerik platform add existing files

And you are done!

From here you can build in the cloud for iOS and Android, test the app with the NativeScript Developer app (available for iOS and Android), and even deploy your app to both app stores!

telerik platform app store

Migrating Project from AppBuilder

If you have an existing Telerik AppBuilder project, you can also export it and continue development with the NativeScript CLI!

It's incredibly easy to take your AppBuilder project and open it up with the NativeScript CLI. Simply right click on your project and choose Export:

telerik platform export project

Unzip the downloaded archive, open up a terminal window, navigate to the project directory, and run:

tns platform add ios|android

...and finally:

tns run ios|android

...to see your app running in a simulator/emulator.

Alternatively, you can use AppBuilder's built-in Github integration to maintain one repository that can be edited via AppBuilder or your local file system!

You've seen how incredibly easy it can be to move back and forth between the NativeScript CLI and Telerik Platform. If you haven't already, set up your free 30 day trial of Telerik Platform today!

.Net developers: use Highcharts, the industry's leading interactive charting library, without writing a single line of JavaScript.

Topics:
mobile ,nativescript ,telerik ,mobile apps ,app development

Published at DZone with permission of Rob Lauer, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}