Use Node-webkit to package Web applications into desktop applications

Node-webkit is a combination of chromium and node. js that allows us to package web apps built on chrome and node. js into desktop applications and cross-platform. It is clear that Web applications developed with HTML5+CSS3+JS in some specific areas are simpler and more efficient than traditional desktop applications, and can also use node. JS functionality, so node-webkit is useful.

Now I'll show you how to package a Web app into an executable file (just the Windows environment) with a simple demo

First create a new index.html file, as our Demo portal page, we will consider this page as a complete Web application. Content to write something, such as:

650) this.width=650; "title=" QQ20140210135428 "border=" 0 "alt=" QQ20140210135428 "src=" http://images.cnitblog.com/ Blog/130623/201402/101541125232422.png "width=" 205 "height=" style= "border:0px;padding-top:0px;padding-left:0" Px;padding-right:0px;background-image:none; "/>

Then create the configuration file Package.json, which reads as follows:

650) this.width=650; "title=" QQ20140210135428 "border=" 0 "alt=" QQ20140210135428 "src=" http://images.cnitblog.com/ Blog/130623/201402/101541131789320.png "width=" 185 "height=" "style=" border:0px;padding-top:0px;padding-left:0 Px;padding-right:0px;background-image:none; "/>

The main property is used to specify the portal file, the value of this property can be a local file, or a remote URL, it is equivalent to a remote Web application can be directly into a desktop application.

In addition to the name and main properties, there are many other useful properties can be configured, such as specifying the app's icon, display the browser's toolbar, specify the browser's initial size, and so on, the specific configuration parameters of the document can be seen here Https://github.com/rogerwang /node-webkit/wiki/manifest-format

Now we have two files.

650) this.width=650; "title=" QQ20140210135428 "border=" 0 "alt=" QQ20140210135428 "src=" http://images.cnitblog.com/ Blog/130623/201402/101541140418221.png "width=" 268 "height=" style= "border:0px;padding-top:0px;padding-left:0" Px;padding-right:0px;background-image:none; "/>

Then compress the two files of index.html and Package.json into a zip archive, named App.zip

650) this.width=650; "title=" QQ20140210135428 "border=" 0 "alt=" QQ20140210135428 "src=" http://images.cnitblog.com/ Blog/130623/201402/101541178215610.png "width=" height= "style=" border:0px;padding-top:0px;padding-left:0 Px;padding-right:0px;background-image:none; "/>

Now app.zip the contents of this compression package should be this:

650) this.width=650; "title=" QQ20140210135428 "border=" 0 "alt=" QQ20140210135428 "src=" http://images.cnitblog.com/ Blog/130623/201402/101541197742941.png "width=" 242 "height=" 267 "style=" border:0px;padding-top:0px;padding-left:0 Px;padding-right:0px;background-image:none; "/>

Then change the extension of the App.zip file to NW, which becomes APP.NW

650) this.width=650; "title=" QQ20140210135428 "border=" 0 "alt=" QQ20140210135428 "src=" http://images.cnitblog.com/ Blog/130623/201402/101541204305541.png "width=" 134 "height=" style= "border:0px;padding-top:0px;padding-left:0" Px;padding-right:0px;background-image:none; "/>

Then download a Windows version of Node-webkit and unzip it to get a folder:

650) this.width=650; "title=" QQ20140210135428 "border=" 0 "alt=" QQ20140210135428 "src=" http://images.cnitblog.com/ Blog/130623/201402/101541212229712.png "width=" 195 "height=" 199 "style=" border:0px;padding-top:0px;padding-left:0 Px;padding-right:0px;background-image:none; "/>

After we get the APP.NW this file can be used Nw.exe to execute, directly drag APP.NW to Nw.exe on it. The results of the operation are as follows:

650) this.width=650; "title=" QQ20140210135428 "border=" 0 "alt=" QQ20140210135428 "src=" http://images.cnitblog.com/ Blog/130623/201402/101541220397828.png "width=" 285 "height=" 229 "style=" border:0px;padding-top:0px;padding-left:0 Px;padding-right:0px;background-image:none; "/>

It's pretty much the same as opening the index.html page in Chrome, and, of course, you can configure Package.json to hide the browser's toolbars or borders so it's more like a desktop software.

Because the NW file needs to be supported by the NODE-WEBKIT environment, we also need to package the APP.NW file with the Node-webkit environment file as an executable file.

First open the CMD for Windows, and then enter the following command:

copy/b NW.EXE+APP.NW App.exe

Note that the file path to change according to your actual situation, this assumes that APP.NW is placed in the Node-webkit home folder, and then the output of App.exe will be in this folder.

After executing the command we got app.exe this executable file.

650) this.width=650; "title=" QQ20140210135428 "border=" 0 "alt=" QQ20140210135428 "src=" http://images.cnitblog.com/ Blog/130623/201402/101541229006728.png "width=" 207 "height=" 234 "style=" border:0px;padding-top:0px;padding-left:0 Px;padding-right:0px;background-image:none; "/>

At this point, we have got app.exe this file, but if only app.exe this file is not enough, the execution of this executable will require several DLL file support.

where Nw.pak and Icudt.dll this two files is necessary.

The Ffmpegsumo.dll file is a media support file that you must bring if your HTML page uses <video> or <audio> or other media-related items.

LibEGL.dll and LibGLESv2.dll Two files are required for use with WEBGL or GPU

The last thing we get is a folder like this:

650) this.width=650; "title=" QQ20140210135428 "border=" 0 "alt=" QQ20140210135428 "src=" http://images.cnitblog.com/ Blog/130623/201402/101541238476414.png "width=" 184 "height=" style= "border:0px;padding-top:0px;padding-left:0" Px;padding-right:0px;background-image:none; "/>

Execute the App.exe to run our demo.

But most of us want to give the user an EXE file that the user can use without having to attach some other files.

Well, so we can also put app.exe and other files again, all the files in the file into an executable file, the user can only get this file, will be able to run our application.

To do this we need a software called Enigma Virtual Box, first download and install this software, and then open it.

Then enter the path of our app.exe in the Enter input file name, and fill in the Enter output file name where we want to export the packaged executable. Finally, you can drag other files except app.exe into files, and you will be able to do so by default.

650) this.width=650; "title=" QQ20140210135428 "border=" 0 "alt=" QQ20140210135428 "src=" http://images.cnitblog.com/ Blog/130623/201402/101541248952302.png "style=" border:0px; "/>

Finally click the Process button in the bottom right corner and you're done.

650) this.width=650; "title=" QQ20140210135428 "border=" 0 "alt=" QQ20140210135428 "src=" http://images.cnitblog.com/ Blog/130623/201402/101541260835531.png "width=" 583 "height=" 336 "style=" border:0px;padding-top:0px;padding-left:0 Px;padding-right:0px;background-image:none; "/>

Finally we get a app_boxed.exe file, as long as the file to the user, the user can run.

Node-webkit Although convenient, but there is a big drawback is that the executable file is a bit large, we can measure the pros and cons after the decision to make not used.

Use Node-webkit to package Web applications into desktop applications