How to package a HTML5/web-app for AppUp using node-webit and WixToolset

This article demonstrates one of many ways to package a HTML5/web app for distribution for Windows. The result will be a Windows MSI installer file that can install silently. The web app is packaged with node-webkit that provides the browser environment for the app. The beauty is your app will allways run in the same constant environment and does not have to cater for multiple browsers.

Important to know is all installer files submitted to AppUp must be digitally signed: http://software.intel.com/en-us/articles/Application-Signing-FAQs. I recommend to use our app signing tool because it is really easy to use and does not require any additional SDK installation: http://software.intel.com/en-us/articles/app-signing-tool.

• Download and unzip the attached file WixToolsExample.zip anywhere you want. It will setup a directory structure like this:

• Download node-webkit and unzip it to appfiles
• Copy your web app and its assets to the same directory (basically everything that needs to be installed on your customers PC)
• Create a package.json manifest file as described here: https://github.com/rogerwang/node-webkit/wiki/Manifest-format
• Start nw.exe, test and debug your app until satisfied

• Download WixToolset from http://wixtoolset.org/ and install it on your PC
• Important: add the installation directory to your system path (if you don't know how try this: http://bit.ly/Y0zHuT) 

• Run heatGenerator.bat. It will create a file AppIncludeFile.wxs
• The batchfile uses heat.exe to scan the appfiles directory and its subdirectories and create commands to add all files found to the installer
• The result AppIncludeFile.wxs describes everything that is deployed to your customers PCs, but unfortunately it has a few lines too many.
• Open AppIncludeFile.wxs in a text editor and make the following changes:
• Replace the first three lines:

<?xmlversion="1.0"encoding="utf-8"?><Wixxmlns="http://schemas.microsoft.com/wix/2006/wi"><Fragment>

With (the capital 'I' is important!)

<Include>

• Delete all lines like any of these lines:

<Fragment></Fragment>

• Look for the component tag that includes nw.exe (our main executable) and delete it (the main executable and is already added in app.wxs and double entries are not allowed):

<ComponentId="cmpD418EA5BAB31203D7CA261BB382B8410"Directory="INSTALLDIR"Guid="*"><FileId="fil4FFD5BB292D84D37D9237A44A0B55BA8"KeyPath="yes"source="$(var.MySource)\nw.exe"/></Component>

• Replace the very last line in the file

</Wix>

With

</Include>

• Save AppIncludeFile.wxs and open the file app.wxs  in a text editor and change the following lines:

<!-- make your changes here --><?define MySource = .\appfiles ?><?define MainEXE = nw.exe ?><?define MyIcon = icon.ico ?><?define Manufacturer = MyCompany ?><?define AppName = MyApp ?><?define AppArguments = -start ?><?define AppVersion = 1.1.0.0 ?><!-- the following GUID must change for each product update --><?define ProductGUID = 11111-11111-11111 ?><!-- the following GUIDs remain the same for all versions --><?define UpgradeCode = 22222-22222-22222 ?><?define GUID01 = 33333-33333-33333 ?><!-- you can get GUIDs from here: http://www.guidgenerator.com/online-guid-generator.aspx--><!-- endof changes -->

• MySource– you shouldn’t need to change this because you copied your app to this directory in step two
• MainEXE– don’t change this, it needs to point to the main executable and that is nw.exe for node-webkit
• MyIcon– this is the name of your icon file stored in MySource. Must be a .ico file. If you have a png and need an ico try http://convertico.org/image_to_icon_converter/ The site will convert it for you and worked well for me
• Manufacturer– Type in your company name. The directory will be named what you enter here, so be sure not to enter anything that cannot be a directory name! It will also appear in some Windows menus such as “uninstall program”
• AppName– this is also used as a directory name and the name for the desktop, startmenu shortcuts and uninstall program
• AppArguments– any command line arguments your app needs when started. They will be part of the shortcuts created
• You need three GUIDS! The first changes with every update you build, the other two remain the same for the lifetime of your app.
  • There are many sources for GUIDs one example is: http://www.guidgenerator.com/online-guid-generator.aspx
• Save app.wxs and start make_appup_installer.bat
• If all went well you will see an output like this:

• If you see a different output, especially a higher error count than one in the
   “--- MAKEOUTPUT.LOG: 1” line then something went wrong!

Done, now you have an MSI file in the folder output that is named your_app_installer.msi.

You can rename and copy the MSI file to another PC and test the installation, run the app and test the uninstall. Remember: before you can upload this for validation you need to sign the MSI file!

Many Thanks for reading!

Additional Sources:

There are a number of websites that I used to write this article which are as follows:

• Node-webkit main site: https://github.com/rogerwang/node-webkit

node-webkit is an open source app runtime based on Chromium and node.js. You can write native apps in HTML and Javascript with node-webkit. It also lets you to call Node.js modules directly from DOM and enables a new way of writing native applications with all Web technologies. It's created and developed in Intel Open Source Technology Center.

• An article on how to use WixToolset: http://software.intel.com/en-us/blogs/2011/09/22/what-are-my-options-for-packaging-a-windows-native-app-for-appup

The Windows Installer XML (WiX) is a toolset that builds Windows installation packages from XML source code. The toolset supports a command line environment that developers may integrate into their build processes to build MSI and MSM setup packages. WiX is an open source project, originally developed by Microsoft and maintained by Rob Mensching

• The Windows Installer XML (Wix) website and the documentation provided:

http://wixtoolset.org/