Kick starting my HTML5 app

Tags

, ,

platform is windows 8

1. install node js

2. install grunt-cli

3. install bower npm install bower –g.  On windows 8.1, npm installations occur inside the current logged in user AppData\Roaming\npm folder.  that path should be added to the user PATH if not done automatically by the nodeJs installer.

start out with grunt creating a package.js specifying a name, version, and all  required dependencies that will be used in grunt.  Some of the usual dependencies are  uglify  for JavaScript mangling and minification, concat for files concatenation,   and linting are available as grunt plugins

Next on the line is bower aka JavaScript packet manager.  it is parallel to nugget packet manager for .NET apps. Foreach js  library to install, call

bower install <package> --save

replacing <package> with the appropriate name.  the ––save adds the package to the to the bower.json file.

using PowerShell, change directory into src folder and run npm install to install all packages mentioned inside the package.json file, followed by grunt.cmd GruntFile.js to execute the default grunt task.

Next, if using google chrome app as a shell to test the html5 app, 1) create a manifest file, 2) Next a file called background.js and make sure to reference your html file as the entry point. Next, make sure google chrome app & extensions developer tools is installed. launch google chrome app & extensions developer tools, select the extensions tab, click the ‘load unpacked …’ button, and browse to your app folder to select it.  chrome app & extensions developer tool should automatically find your app manisfest.json file in the root directory and run  your app in its shellSmile.  Or a much simpler way is to use chrome directly to launch your app. Finally, open up a New Tab page and click on your new app icon to run it.  A gotcha to be aware off when building chrome package app with angularJS is the malfunctioning of some directives.  This occurs simply because chrome package app runs in strict CSP mode.  to solve this minor issue, append angular-csp.css to your entry page header css links.  when all set and done, Chrome apps becomes a great way of demoing appsOpen-mouthed smile.  May be I should publish one app on chrome?

Follow

Get every new post delivered to your Inbox.