Get started with Onsen UI apps in Visual Studio

In this article

Onsen UI 2.0 was released and supports React, Angular 1 and 2, and Web Components together within your Cordova app. With more than 100 components, you can easily create great-looking HTML5 hybrid mobile apps with Material and Flat design.

Onsen UI is fully independent of frameworks - you can easily plug these components into any project, regardless of JavaScript framework. For more info, see Onsen UI 2.0.

Get the Onsen UI templates

You can install the Onsen UI starter templates in Visual Studio and use them to start building an app.

When you install Visual Studio, make sure you include the optional components, HTML/JavaScript (Apache Cordova) under Cross-Platform Mobile Development.

Note: Quickly verify that you can load and build the default Blank App template. In Visual Studio, choose File, New, Project, JavaScript, Apache Cordova Apps, Blank App and name the new project "blank", and build it with F5.

Install the Onsen UI templates.

Visit VS Extension for Onsen UI in Visual Studio Gallery, and add it directly to Visual Studio by downloading and double-clicking on the downloaded file.

Or, do it in Visual Studio, by selecting Tools, Extensions and Updates. In the Extensions and Updates dialog box, select Online. In the search box, type Onsen UI.

Choose Download to download and install them. When you are asked for permission to install the templates, give your permission.

Choose Restart to restart Visual Studio. Now, choose File, New, then Project. When you choose Installed, then Templates, the new starter templates will show up under both JavaScript, Monaca and TypeScript, Monaca.

Choose one of the following starter templates for your new project:

Onsen UI Blank

Onsen UI Navigation

Onsen UI Splitter

Onsen UI Tabbar

Choose OK.

Visual Studio creates the Onsen UI project.

Get your app running on Android

Add the Android platform as a debug target (Solution Platforms list), and then choose Build, then Build Solution.

Choose Android as a debug target (Solution Platforms list), and to get the app running choose a target such as the Device, Ripple - Nexus S (running in a simulator environment), the VS Emulator (Hyper-V required) or the Google Android Emulator (slow to load initially).

Get your app running on iOS

You can run initially on the Ripple Emulator after selecting iOS as a debug target, but for detailed info on setting up the remotebuild agent for iOS, see this topic.

The Onsen UI starter templates run correctly on iOS when the remotebuild agent is running on a Mac (or using an extension like Monaca for Visual Studio 2015), and when Visual Studio is configured to connect to it). Please note that the complete steps are outside the scope here.

Get your app running on Windows

If it's not already installed, use the Visual Studio install program to install the Universal Windows App Development Tools (it should already be installed).

Open config.xml in Visual Studio, choose Windows, and in the Windows Target Version, choose Windows 10.0, and save changes.

Choose Windows-x64 from the Solution Platforms list.

Choose a Windows deployment target, such as Local Machine.

Press F5 to run your app.

You can debug your Onsen UI app direct on the Windows 10 device.

Connect your device to the Windows OS and instead of Windows-x64 from the Solution Platforms list you can choose for example Windows-ARM.

TypeScript source codes are located in scripts folder, with the extension of .ts. TypeScript codes will be compiled and saved as appBundle.js under www/scripts folder. You can modify the compiler options by changing tsconfig.json file.