Fork me on GitHub
Faster. Easier. PhoneGap/Cordova development environment.

Getting Started with Onsen UI

Onsen UI helps you develop both hybrid and web apps. If developing hybrid apps, you can use it with the Cordova / PhoneGap command line, or with Monaca IDE - cloud-based IDE for Cordova.

Onsen UI with the Command Line

The preferred method is to use cordova command line tool. For that purpose, you need to install node.js and npm command needs to be available.

1. Install Cordova package

$ sudo npm install -g cordova

For more details how to use Cordova tool, please refer to Cordova documentation.

2. Select template

Download a starter kit from the following templates.

Master-Detail
Open
Sliding menu
Open
Tab bar
Open
Split view
Open

3. Add platform

You need to add the platform SDK to the project to run on the simulator or device.

$ cd /path/to/the/project
$ cordova platform add ios (or android)

4. Run on the simulator

The following command will run the application in the simulator.

$ cordova emulate

If the command fails, you are missing something. If you want a quicker solution, try Monaca with the following instructions.

Using Onsen UI with Monaca

The benefit of using Monaca with Onsen UI is development in the cloud. You don’t need to setup a local environment to develop for iOS and Android.

1. Sign up to Monaca


http://monaca.mobi     Sign Up for Free

2. Create a new project by choosing a template using Onsen UI

After creating the project, open the IDE.

3. Install debugger and run project

You can now run your project on your device. Just install Monaca Debugger and it will download the project and start right away.

4. Build for Android and iOS

Publish your Onsen UI-built app with Monaca for iOS, Android, and Chrome Apps. Easily submit your app to the App Store and Google Play.

Using Onsen UI for Websites

You can use Onsen UI Bower module for a quicker setup.

$ sudo npm install -g bower
$ bower install onsenui


Need Help?

If you have any questions, ask them in the Forum. The Onsen UI team and your peers in the community will work together to help solve the issues.

You may also find helpful information in the resources below: