Setting Up Development Environement for HTML5 and JavaScript

While JavaScript getting more popular with HTML5 these days, it’s also getting more complicated with various libraries. It’s no longer an easy, if possible, job to manage the dependencies by hands.

As I started to play with JavaScript and HTML5, I have installed several tools for the development. If you’re intested in HTML5, the following steps and links may be helpful to you too.

Lost VMs or Containers? Too Many Consoles? Too Slow GUI? Time to learn how to "Google" and manage your VMware and clouds in a fast and secure HTML5 App.

Besides generic tools like Netbeans, GIT, there are three tools to install here. The first is the npm, which is actually part of node.js distribution. It’s what the yum is for RHEL or CentOS for JavaScript. You will use it to install other two tools soon.

It’s very easy to install the node.js. Just pick one installer from the node.js download page: https://nodejs.org/download/. What I picked is for Windows 7 MSI 64 bits. Here is the direct link. There isn’t much to say about the MSI installer – simply click through the wizard and it’s done very quickly.

Once that is done, we can use the tool to install two other tools: bower and grunt. Before jumping to the details, let’s spare some words on these two. Bower is like the npm in the sense that both do package management, but npm is for node.js modules vesus the bower handles front end libraries for HTML5 applications. You can think bower as Maven as tool for application dependency management. The difference of bower and npm is like Maven and yum.

The grunt is nothing like the above two. It’s Javascript based task running tool. If you have to find something in Java world, it’s more or less like Ant. It can help with many tasks. Clearer or even more confused? This stackoverflow answer is pretty good.

Anyway, unless you actually use something it’s hard to really understand them and their differences. Let’s get our hands dirty.

It’s recommended to install them globally. For that, you want to open a DOS console with Administrator privilege: from the Start menu, search “cmd” for the cmd.exe to show on the top of popup; right click on the cmd.exe and then pick the “Run as administrator” context menu. Within the console type in the following commands:

C:\dev>npm install -g grunt-cli
C:\Users\Steve\AppData\Roaming\npm\grunt -> C:\Users\Steve\AppData\Roaming\npm\n
ode_modules\grunt-cli\bin\grunt
grunt-cli@0.1.13 C:\Users\Steve\AppData\Roaming\npm\node_modules\grunt-cli
+-- resolve@0.3.1
+-- nopt@1.0.10 (abbrev@1.0.7)
+-- findup-sync@0.1.3 (lodash@2.4.2, glob@3.2.11)
 
C:\dev>npm install -g bower
C:\Users\Steve\AppData\Roaming\npm\bower -> C:\Users\Steve\AppData\Roaming\npm\n
ode_modules\bower\bin\bower
bower@1.4.1 C:\Users\Steve\AppData\Roaming\npm\node_modules\bower
+-- is-root@1.0.0
+-- junk@1.0.1
+-- stringify-object@1.0.1
+-- abbrev@1.0.7
+-- chmodr@0.1.0
+-- user-home@1.1.1
+-- rimraf@2.3.4
+-- archy@1.0.0
+-- lru-cache@2.6.4
+-- bower-endpoint-parser@0.2.2
+-- bower-logger@0.2.2
+-- opn@1.0.2
+-- graceful-fs@3.0.8
+-- lockfile@1.0.1
+-- retry@0.6.1
+-- nopt@3.0.2
+-- tmp@0.0.24
+-- q@1.4.1
+-- semver@2.3.2
+-- fstream@1.0.6 (inherits@2.0.1)
+-- request-progress@0.3.1 (throttleit@0.0.2)
+-- shell-quote@1.4.3 (array-map@0.0.0, array-reduce@0.0.0, array-filter@0.0.1,
jsonify@0.0.0)
+-- bower-json@0.4.0 (intersect@0.0.3, deep-extend@0.2.11, graceful-fs@2.0.3)
+-- p-throttler@0.1.1 (q@0.9.7)
+-- mkdirp@0.5.0 (minimist@0.0.8)
+-- which@1.1.1 (is-absolute@0.1.7)
+-- chalk@1.0.0 (escape-string-regexp@1.0.3, ansi-styles@2.0.1, supports-color@1
.3.1, strip-ansi@2.0.1, has-ansi@1.0.3)
+-- promptly@0.2.0 (read@1.0.6)
+-- tar-fs@1.5.1 (pump@1.0.0, tar-stream@1.1.5)
+-- fstream-ignore@1.0.2 (inherits@2.0.1, minimatch@2.0.8)
+-- glob@4.5.3 (inherits@2.0.1, inflight@1.0.4, once@1.3.2, minimatch@2.0.8)
+-- insight@0.5.3 (object-assign@2.1.1, async@0.9.2, lodash.debounce@3.1.0, os-n
ame@1.0.3, tough-cookie@0.12.1)
+-- decompress-zip@0.1.0 (mkpath@0.1.0, touch@0.0.3, readable-stream@1.1.13, bin
ary@0.3.0)
+-- update-notifier@0.3.2 (is-npm@1.0.0, string-length@1.0.0, semver-diff@2.0.0,
latest-version@1.0.0)
+-- cardinal@0.4.4 (ansicolors@0.2.1, redeyed@0.4.4)
+-- github@0.2.4 (mime@1.3.4)
+-- bower-registry-client@0.3.0 (request-replay@0.2.0, graceful-fs@2.0.3, rimraf
@2.2.8, lru-cache@2.3.1, mkdirp@0.3.5, async@0.2.10, request@2.51.0)
+-- request@2.53.0 (aws-sign2@0.5.0, caseless@0.9.0, stringstream@0.0.4, forever
-agent@0.5.2, tunnel-agent@0.4.0, oauth-sign@0.6.0, json-stringify-safe@5.0.1, i
sstream@0.1.2, node-uuid@1.4.3, qs@2.3.3, combined-stream@0.0.7, form-data@0.2.0
, mime-types@2.0.13, bl@0.9.4, http-signature@0.10.1, tough-cookie@1.2.0, hawk@2
.3.1)
+-- mout@0.11.0
+-- bower-config@0.6.1 (osenv@0.0.3, graceful-fs@2.0.3, optimist@0.6.1, mout@0.9
.1)
+-- handlebars@2.0.0 (optimist@0.3.7, uglify-js@2.3.6)
+-- configstore@0.3.2 (object-assign@2.1.1, xdg-basedir@1.0.1, osenv@0.1.1, uuid
@2.0.1, js-yaml@3.3.1)
+-- inquirer@0.8.0 (figures@1.3.5, ansi-regex@1.1.1, mute-stream@0.0.4, through@
2.3.7, readline2@0.1.1, lodash@2.4.2, chalk@0.5.1, rx@2.5.3, cli-color@0.3.3)
This entry was posted in Software Development and tagged , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

  • NEED HELP?


    My company has created products like vSearch ("Super vCenter"), vijavaNG APIs, EAM APIs, ICE tool. We also help clients with virtualization and cloud computing on customized development, training. Should you, or someone you know, need these products and services, please feel free to contact me: steve __AT__ doublecloud.org.

    Me: Steve Jin, VMware vExpert who authored the VMware VI and vSphere SDK by Prentice Hall, and created the de factor open source vSphere Java API while working at VMware engineering. Companies like Cisco, EMC, NetApp, HP, Dell, VMware, are among the users of the API and other tools I developed for their products, internal IT orchestration, and test automation.