Starting Hybrid App Development with the AppBuilder CLI

AppBuilder is a set of tools and services that make Cordova development awesome. The AppBuilder CLI packs all that functionality into a simple set of commands. Let’s look at how you can use the AppBuilder CLI to build a mobile app in a few minutes.

Step 1. Create a Telerik Platform account

AppBuilder is part of the Telerik Platform; therefore you need a Platform account to use AppBuilder. You can register at https://platform.telerik.com/#register with your name and email address.

Sign-up screen for the Telerik Platform

An account is required because the Telerik Platform and AppBuilder are both paid products, however, creating an account gives you free unlimited access for 30 days.

Step 2: Install AppBuilder from npm

Once you have an account you’re ready to install the CLI from npm.

$ npm install -g appbuilder

When the install completes go ahead and run appbuilder to make sure the installation succeeded.

View of the AppBuilder CLI

If you are on a Mac, you may need to use the sudo command in order to run the install.

Step 3: Start an app

To start an app, use the appbuilder create hybrid command. First, navigate to the folder where you’d place the project. Next, use the following command to create a new app named “hello-world”:

$ appbuilder create hybrid hello-world

appbuilder create hybrid defaults to a Kendo UI Mobile app, but you can customize that using the --template option. Here are what a few of the starting templates look like:

Images of a few of the AppBuilder starting templates

You can view a full list of templates available with appbuilder create hybrid --help. Don’t see your framework of choice? Go ahead and start with the blank template (appbuilder create hybrid --template=Blank) and add the files you need (either manually, or with a package manager like Bower). If you’re an Ionic user we even have a dedicated guide for you.

Step 4. Run your app

The easiest way to run your app is with the integrated AppBuilder simulators, which you can start with the appbuilder simulate command:

$ cd hello-world
$ appbuilder simulate

After running this command you will be prompted to log in to the account you created in step 1 before continuing.

The simulator does a lot of awesome stuff for you—such as mimicking devices and mocking Cordova calls—but nothing beats having your app on a real device. For that you’ll need the AppBuilder companion app on your device, which you can find by searching for AppBuilder on your device’s app store. Here are some links that might help you out:

app-store-icon google-play-icon windows-phone-store-icon

With the companion app installed, and your device connected via USB, run appbuilder livesync [<platform>] to push your new app to your device.

$ appbuilder livesync ios --companion
$ appbuilder livesync android --companion

For added awesomeness, include the --watch option to tell AppBuilder to automatically update your app whenever you save code changes.

$ appbuilder livesync ios --companion --watch
$ appbuilder livesync android --companion --watch

The gif below shows LiveSync for iOS and Android in action:

AppBuilder LiveSync running on iOS and Android

Next Steps

That’s really all there is to it, but you’re just getting started with the functionality that AppBuilder offers. Here are some things you may want to try next:

  • Clone one of our several dozen demo apps using appbuilder sample clone. Run appbuilder sample clone --help for details.
  • Play with the core Cordova plugins in the companion app.
  • Check out our verified Cordova plugins marketplace. Each plugin has detailed documentation, and installation is as simple as appbuilder plugin fetch <url>.
  • Build an app that sends two-letter notifications and earn $1.5 million in funding.

If you have any questions about the CLI, feel free to comment here, or stop by our forums.

Comments