StrongLoop Creating Desktop Applications With Node-webkit

In the LoopCreating DesktopApplications Withnode-webkit

TweetTweet

Sputnik: an open-source RSS reader desktopapplication created using node-webkit

Web applications are useful, butthere are some cases where itsnot desirable or necessary to hostan application on a remoteserver. As HTML5 provides low-level functionality to modernbrowsers, such as the ability toread and write files, its nowpossible to create offline, single-page, JavaScript applicationsusing a web browser as aplatform.

While browser-based unhostedapplications present someinteresting possibilities, such asthe ability to deploy yourapplication on multiple operatingsystems, there are somesignificant limitations.

When using browsers ones

26 Nov 2013 / 1 Comment / in How-To / byMike Cantelon

Login Blog

StrongLoop | Creating Desktop Applications With node-webkit 10/05/2014

http://strongloop.com/strongblog/creating-desktop-applications-with-node-webkit/ 1 / 8

control of the user interface islimited. Some interface elements,such as pull-down menus, cantbe customized and there isusually no way to hide thebrowsers address barprogramatically.

Another potential issue with webapplications in general is variancebetween browsers and browserversions. As HTML5 is stillevolving, special care needs to betaken to ensure that everythingworks in all major browsers.

Last, but not least, mostbrowsers are configured to besecure against malicious content.The same origin policy, forexample, is enforced by default,preventing a site on one domainfrom making an AJAX call toanother.

Enter Node-WebKitThe node-webkit project, whichwas created at Intel and opensourced in 2011, is an attempt totake the pain out of offlinesingle-page applicationdevelopment.

The project provides a WebKitbrowser that has been extendedwith the the ability to control userinterface elements normally off-limits to web developers. Thebrowsers security configuration isrelaxed, assuming that theapplication code youre runnningis trusted. And, mostinterestingly, the browserintegrates Node.js, allowingnode-webkit applications toleverage a wide array offunctionality other than whatHTML5 APIs provide.



Now that youve got an idea whatnode-webkit is and what itsuseful for, lets talk about how toinstall it.

Installationnode-webkit can be installed onWindows, OS X, and Linux. node-webkit, like Node.js, is easy toinstall. The Downloads sectionon the projects Github pagesupplies a number archivescontaining ready-to-run node-webkit binaries and softwarelibaries they depend on.

Once youve download theappropriate archive, youll need tolocate the node-webkit binary.The Linux binarys filename is nw.The Window binarys filename isnw.exe. In the OS X version,which comes packaged as anapplication bundle, the binary isin the Contents/MasOS folder andthe filename is node-wekit (forexample /path/to/node-webkit.app/Contents/MacOS/node-webkit).

To install node-webkit, simply putthe folder containing your node-webkit binary in a convenientplace.

Creating a simpleapplicationnode-webkit applications arecreated in a similar fashion toconventional Node webapplications. An applicationdirectory is created in which



application resources such asHTML, CSS, JavaScript, andmedia are placed.

As with Node, a package.json fileis used to describe theapplication.

In the package.json file, anelement main specifies the firstHTML page that node-webkitshould display: index.html forexample. As with a conventionalsingle page application, themain HTML file must includenecessary JavaScript and CSS.

The package.json file is also usedto configure the properties ofnode-webkits default window.Below is an example of a node-webkit package.json file:

In the window specificationheight, width, and whether theaddress bar should be includedcan be set. node-webkitapplications can even be put intoa full-screen kiosk mode,preventing users from exiting intothe host operating system.

Using Node FunctionalityIncluding Node functionality inyour application is fairlystraightforward. As withconventional Node applications,Node modules can be installedusing [npm]. A markdownmodule, for example, could beinstalled using the followingcommand:

node-webkit can include any

{ "name": "hello", "main": "index.html", "w indow": { "toolbar": false, "w idth": 800, "height": 600 }}

npm install markdown



module in your applicationsnode_modules directory by usinga require statement, as theexample below shows.

Now that youve learned thebasics of application creation,lets look at how your canpackage your application,enablnig you to run it yourself ordistribute it to others.

Packaging Your ApplicationPackaging is very simple: youneed only create a ZIP archive.To do so use a GUI archiving toolor, if using the OS X or Linuxcommand-line, enter thefollowing from within your projectdirectory:

After zipping your application,you should rename it, giving itthe extension .nw to indicate thatits a node-webkit application.The zipped application can beexecuted using the node-webkitruntime. For example:

To make distribution easier,stand-alone node-webkitapplications can be created. Thismeans that application end usersdont need to install node-webkit,or even know what it is. Checkout the projects wiki page fordetails.

Example Applications

var markdown = require('markdown').markdown; document.write(markdown.toHTML("Hello **World**!"));

zip -r my_application.nw *

/path/to/node-webkit my_application.nw



< Previous PostNext Post >

If node-webkit sounds likesomething youd like to play with,the nw-sample-apps projectprovides a number of exampleapplications you can learn fromand experiment with.

If you run into difficulties, aGoogle Group exists for questionsand discussion about thetechnology. Have fun with node-webkit!

Whats next?Whats in the upcoming Nodev0.12 release? Bigperformanceoptimizations, read BenNoordhuis blog to learnmore.Watch BertBelders comprehensive video presentationon all the new upcomingfeatures in v0.12Ready to develop APIs inNode.js and get themconnected to your data?Weve made it easy to getstarted either locally or onyour favorite cloud, witha simple npm install.

TweetTweet

REPLY

hmlongcoJanuary 30,2014 at 12:47pm

Theresalso theChromium

1



Trackbacks &Pingbacks

Leave a ReplyWant to join the discussion? Feel free to contribute!

You must be logged in to post acomment.

EmbeddedFramework(CEF) byGoogle.CEF is aa light-weightnativeshellapplicationthat canhost auserinterfacedevelopedprimarilyusingWebtechnologies.

AdobesBracketssourcecodeeditor isbuilt inJS anduses CEFas itsnativeshellapplication.

http://brackets.io

Log in toReply



About UsManagement TeamInvestors and AdvisorsPartnersCareers

COMPANY

Get StartedLoopBackStrongOpsSupportTrainingCertificationConsultingFAQDocumentationPricing

PRODUCT

BlogNewsletterVideosEventsPress

CONTENT AND NEWS

EmailTwitterGitHubFacebookGoogle+

User Forums

CONTACT US

Privacy PolicyTerms of UseLicense

LEGAL

2014 - StrongLoop - Enfold Theme by Kriesi



In the LoopCreating Desktop Applications With node-webkitEnter Node-WebKitInstallationCreating a simple applicationUsing Node FunctionalityPackaging Your ApplicationExample ApplicationsWhats next?< Previous PostNext Post >Trackbacks & Pingbacks

Leave a ReplyCOMPANYPRODUCTCONTENT AND NEWSCONTACT USLEGAL

Documents

StrongLoop Creating Desktop Applications With Node-webkit