Home > Software Development > Setting Up Development Environement for HTML5 and JavaScript

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.

Time to learn how to "Google" and manage your VMware and clouds in a fast and secure


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
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
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,
+-- 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
+-- update-notifier@0.3.2 (is-npm@1.0.0, string-length@1.0.0, semver-diff@2.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
+-- 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
+-- 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)
  1. No comments yet.
  1. No trackbacks yet.