OnsenUI | Installation

Written by on April 9, 2015

OnsenUI | Installation

For some time, I was playing with an idea to create an article series covering different mobile HTML5 frameworks. I’ve already started with Ionic Framework but now I also want to do the same thing with OnsenUI, which is also currently one of the best available mobile frameworks. I will not go into great details describing OnsenUI here, if you want to know more about it take a look at my previous article.

This tutorial series is going to be written from the perspective of Windows OS and Android development. If readers show enough interest I will also add a Linux chapter, Windows will suffice for now. Roughly 90 % – 95 % of a stuff written here will work in any environment (things will change when we start playing with Cordova plugins) so keep reading if you’re a Linux/MacOS user.

Note: If this tutorial was helpful, you need further clarification, something is not working or you have a request for another Ionic post? Furthermore, leave me a comment below if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com. Thanks and have a nice day!

Table of Contents

[spoiler title=” Click here if you want to see other tutorials, this is the 1st tutorial out of 12 total.”]

[/spoiler]

Preparations

Before we start this tutorial make sure you have everything installed/configured to handle Android development (Apache Ant, Java SDK and Eclipse/Android Studio). Also, unlike Ionic framework, OnsenUi requires several additional steps.

You will need to download and install:

  1. Install nodeJS
  2. Install Yo, Bower, onsenui-phonegap, OnsenUI
  3. Install Cordova

1. Install nodeJS

Before we can start with OnsenUI, make sure you have Node.js installed. Depending on your Windows platform (32 bit or 64 bit) select Windows Installer (.msi) and download it. During the installation you must remember instalation location. In my case it’s:

c:\Program Files\nodejs\

Download Link

It should look like this:

Ionic Tutorial 1001

Now go to the node.js installation folder (one I mentioned before), go even deeper until you reach a bin folder:

C:\Program Files\nodejs\node_modules\npm\bin\

Copy this location and add it to your environment PATH. Take a look at this tutorial if you don’t know how to do that, you will find an examples for Windows XP, Windows 2000 and Windows 7. It should look like this:

Ionic Tutorial 1002

2. Install Yo, onsenui-phonegap, OnsenUI

This next part is optional. Before we install anything using node.js we could change a default installation folder. Original default folder is strangely placed in this hidden location: C:\Users\{username}\AppData\Roaming\npm. We can change this destination folder manually, just go to this folder: C:\Users\{username}\ and create an empty file called: .npmrc (make sure you have administration privilegies over that folder). Edit it and add this line (don’t forget to save):

prefix = "C:\\{your location}"

Remember you should use double \\ instead of a \. In this article we are using this location: prefix = “D:\\JavaScript\\nodejs”

This is the end of the optional part.

Yo and Bower are next in the line. Open windows command prompt and type/execute this:

npm install -g yo bower

Output should look like this:

D:\JavaScript\nodejs>npm install -g yo
npm WARN engine yo@1.4.6: wanted: {"node":">=0.10.0","npm":">=2.1.0"} (current: {"node":"0.10.33","npm":"1.4.28"})
D:\JavaScript\nodejs\yo -> D:\JavaScript\nodejs\node_modules\yo\lib\cli.js

> yo@1.4.6 postinstall D:\JavaScript\nodejs\node_modules\yo
> yodoctor

Yeoman Doctor
Running sanity checks on your system

? Global configuration file is valid
? NODE_PATH matches the npm root
? No .bowerrc file in home directory
? No .yo-rc.json file in home directory

Everything looks all right!
yo@1.4.6 D:\JavaScript\nodejs\node_modules\yo
+¦¦ titleize@1.0.0
+¦¦ array-uniq@1.0.2
+¦¦ figures@1.3.5
+¦¦ user-home@1.1.1
+¦¦ opn@1.0.1
+¦¦ async@0.9.0
+¦¦ lodash@3.5.0
+¦¦ humanize-string@1.0.1 (decamelize@1.0.0)
+¦¦ sort-on@1.0.2 (dot-prop@1.0.1)
+¦¦ string-length@1.0.0 (strip-ansi@2.0.1)
+¦¦ cross-spawn@0.2.6 (lru-cache@2.5.0)
+¦¦ yeoman-character@1.0.1 (supports-color@1.3.0)
+¦¦ findup@0.1.5 (commander@2.1.0, colors@0.6.2)
+¦¦ root-check@1.0.0 (sudo-block@1.1.1, downgrade-root@1.1.0)
+¦¦ yosay@1.0.3 (ansi-regex@1.1.1, word-wrap@1.0.2, pad-component@0.0.1, ansi-styles@2.0.1, strip-ansi@2.0.1, minimist@1
.1.1, taketalk@1.0.0)
+¦¦ chalk@1.0.0 (escape-string-regexp@1.0.3, ansi-styles@2.0.1, supports-color@1.3.0, strip-ansi@2.0.1, has-ansi@1.0.3)
+¦¦ update-notifier@0.3.1 (is-npm@1.0.0, latest-version@1.0.0, semver-diff@2.0.0)
+¦¦ package-json@1.1.0 (registry-url@3.0.0)
+¦¦ meow@3.1.0 (object-assign@2.0.0, minimist@1.1.1, camelcase-keys@1.0.0, indent-string@1.2.1)
+¦¦ npm-keyword@1.1.1 (registry-url@3.0.0)
+¦¦ fullname@1.1.0 (npmconf@2.1.1)
+¦¦ got@2.4.0 (object-assign@2.0.0, timed-out@2.0.0, is-stream@1.0.1, lowercase-keys@1.0.0, infinity-agent@1.0.2, read-a
ll-stream@1.0.2, prepend-http@1.0.1, statuses@1.2.1, duplexify@3.2.0)
+¦¦ configstore@0.3.2 (object-assign@2.0.0, xdg-basedir@1.0.1, osenv@0.1.0, graceful-fs@3.0.6, uuid@2.0.1, mkdirp@0.5.0,
 js-yaml@3.2.7)
+¦¦ yeoman-doctor@1.3.2 (log-symbols@1.0.2, object-values@1.0.0, each-async@1.1.1, twig@0.7.2)
+¦¦ insight@0.5.3 (object-assign@2.0.0, lodash.debounce@3.0.2, tough-cookie@0.12.1, os-name@1.0.3, request@2.53.0)
+¦¦ yeoman-environment@1.2.4 (escape-string-regexp@1.0.3, untildify@2.0.0, diff@1.3.0, text-table@0.2.0, chalk@0.5.1, lo
g-symbols@1.0.2, grouped-queue@0.3.0, debug@2.1.2, mem-fs@1.1.0, globby@1.2.0)
L¦¦ inquirer@0.8.0 (ansi-regex@1.1.1, mute-stream@0.0.4, through@2.3.6, lodash@2.4.1, readline2@0.1.1, rx@2.4.3, chalk@0
.5.1, cli-color@0.3.2)

Note: I already had Bower so you will not see any logs regarding it here.

Continue Reading

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