OnsenUI | Installation

Written by on April 9, 2015

OnsenUI | Installation

2.1. First Approach – Template Generator

Update: This solution is not longer viable, last update was 9 months ago.

This is a better approach if you have a prior Ionic Framework experience or if you are working on a mobile application; you will receive a Cordova ready project; Yo is required for this approach.

Before we can generate anything we need to install template generator.

npm install -g generator-onsenui-phonegap

Output should look like this:

D:\JavaScript\nodejs>npm install -g generator-onsenui-phonegap
generator-onsenui-phonegap@0.1.0 D:\JavaScript\nodejs\node_modules\generator-onsenui-phonegap
+¦¦ chalk@0.4.0 (has-color@0.1.7, ansi-styles@1.0.0, strip-ansi@0.1.1)
+¦¦ yosay@0.1.0 (pad-component@0.0.1, word-wrap@0.1.3, minimist@0.0.9)
L¦¦ yeoman-generator@0.16.0 (dargs@0.1.0, debug@0.7.4, diff@1.0.8, class-extend@0.1.1, rimraf@2.2.8, findup-sync@0.1.3,
text-table@0.2.0, mime@1.2.11, async@0.2.10, mkdirp@0.3.5, isbinaryfile@2.0.3, shelljs@0.2.6, iconv-lite@0.2.11, undersc
ore.string@2.3.3, lodash@2.4.1, glob@3.2.11, file-utils@0.1.5, inquirer@0.4.1, cheerio@0.13.1, request@2.30.0, download@
0.1.19)

We will use Yo and this template generator to generate our first OnsenUI project. Before we can do that we first need to create a working project directory. Go where ever you usually go when you want to create a new project and create new directory:

mkdir onsenUIDemo
cd onsenUIDemo
yo onsenui-phonegap

You will be prompted to select/enter your project name plus to select which template you would like to use. I will select a template called minimal (but you can choose any one you want) and use it in future articles.
You will not find command output here, it’s simply too large. You did everything correctly if you can’t find any error (don’t worry about warnings, they’re expected).

Available templates:

  1. Minimum
  2. Sliding Menu
  3. Sliding Menu & Navigator
  4. Tab bar
  5. Master-Detail
  6. Split View *
  7. Split View & Navigator *

* Best suited for tablets and desktop browsers.

2.2. Second Approach – Classic Solution

This approach is best suited if you like to do everything on yourown or if you are working on a website. Bower is required for this approach.

OnsenUI installation requires a Git installation so go here and download an appropriate version. Installation will handle PATH configuration so you don’t need to worry about it,
just reopen your command prompt.

Create new project directory.

cd projectDIR
bower install onsenui

Last command will install OnsenUI and other prerequisites resources.

2.3. Third Approach – Manual Template Download

Unfortunately, a first approach is not longer viable, last update was 9 months ago. Thankfully there’s another way; we can download prebuilt templates.

Open this page and look at the second section; you will find 4 templates. Download any one of them; create a project directory; unpack template into newly created folder.

Available templates:

  1. Master-Detail
  2. Sliding menu
  3. Tab bar
  4. Split view

3. Cordova

Now let’s install Cordova.

npm install -g cordova

Those command will initiate an installation process, give it some time to finish (if you receive an error try again few times, npm sometimes can’t find necessary packages). Output should look like this:

D:\JavaScript>npm install -g cordova
D:\JavaScript\nodejs\cordova -> D:\JavaScript\nodejs\node_modules\cordova\bin\cordova
cordova@4.1.2 D:\JavaScript\nodejs\node_modules\cordova
├── underscore@1.7.0
├── q@1.0.1
├── nopt@3.0.1 (abbrev@1.0.5)
└── cordova-lib@4.1.2 (unorm@1.3.3, osenv@0.1.0, bplist-parser@0.0.6, properties-parser@0.2.3, mime@1.2.11, semver@2.0.1
1, dep-graph@1.1.0, shelljs@0.3.0, rc@0.5.2, npmconf@0.1.16, elementtree@0.1.5, xcode@0.6.7, glob@4.0.6, d8@0.4.4, tar@1
.0.2, request@2.47.0, plist@1.1.0, cordova-js@3.7.2, npm@1.3.4)

Close this command prompt window. Before we proceed any further we need to add Cordova bin directory to our environment PATH. Go to your node.js module directory (one we previously created, in my case it’s: D:\JavaScript\nodejs\). Go even deeper until you reach this directory:

D:\JavaScript\nodejs\node_modules\cordova\bin\

or in your case:

C:\{your location}\node_modules\cordova\bin\

Copy that location and add it to your environment PATH like, like this:

Ionic Tutorial 1003

Do the same thing for {your location} directory, go to your node.js module directory (one we previously created, in my case it’s: D:\JavaScript\nodejs\).:

D:\JavaScript\nodejs\

or in your case:

C:\{your location}\

Copy that location and add it to your environment PATH like, like this:

Ionic Tutorial 1010

This is all for this article. Next one will cover the anatomy of OnsenUI page plus our first working example.

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.



Categories

3 thoughts on “OnsenUI | Installation”

  1. Hello,… nice article, like rest of articles I have read. I’m on WAMP platform (Win7Pro, Apache 2, MySQL, PHP5) with virtual directory and until now it works good. I wouldn’t like to change it, because I planned to continue my projects in PHP, jQuery… how to install Onsen in this case? I do use Phonegap Build service online for compiling. Is it possible to make this “collection” to work hassle free? Thanks.

Leave a Reply