Use Sublime to quickly develop node-webkit client programs

When using node-webkit for client development, how to develop and debug becomes a more troublesome problem. Generally speaking, we need to write the Web program code, package the root directory into a zip package, and then package the zip package Drag and drop it to nw.js to run; when I first started learning node-webkit development, I only knew how to debug programs in this way, but obviously this is very inelegant and efficient.

After consulting the official documentation, you can actually use the text editor Sublime for development and debugging without repeated packaging

Sublime text is a very good cross-platform editor for developing node-webkit applications. It must be downloaded and installed on this machine.

Let's talk about the specific content of use and configuration on major platforms (take sublime text 2 as an example)

Mac OS X

1. Download node-webkit.app and put it in /Application folder
2. Select from sublime text 2 menu Tools -> Build System -> New Build System
3. Enter the following code:

{
    "cmd": ["node-webkit", "--enable-logging", "${project_path:${file_path}}"],
    "working_dir": "${project_path:${file_path}}",
    "path": "/Applications/node-webkit.app/Contents/MacOS/"
}

Note: If the package.json is in the project root, to facilitate launching NW when viewing files from any subdirectory, you can use ${project_path} instead of ${project_path:${file_path}}

In fact, after testing, if package.json is in the root directory of the project, and you want to compile and run directly when editing any HTML or JS, it should be set to use the directory variable of the project:

${project_path:${folder}}

4. Save the configuration content as nodeWebKit.sublime-bulid

5. Use sublime text 2 to File -> New Windowopen a new window
6. Use  Project -> Add Folder to Projectadd a project to the current window
7. Open your main application file (eg: index.html) from the menu on the left and selectTools -> Build

8. Select  Tools -> Build System -> nodeWebKit (This step is only required for Sublime Text 3)

9. Choose Tools -> Build

10. At this point the node-webkit application will start your project and you can see the debug output in sublime text2

The operation steps are the same in sublime text 3, only need to pay attention to the 8th point.

Windows

The same as above, the difference is the command to build the system, as follows (replace the actual path of nw.exe):

{
    "cmd": ["nw.exe", "--enable-logging", "${project_path:${file_path}}"],
    "working_dir": "${project_path:${file_path}}",
    "path": "C:/Tools/node-webkit/",
    "shell": true
}

1. Go to  https://nwjs.io/ to  download the sdk development package of node-webkit, and decompress it. The example in this article is decompressed under D:/dev/node-webkit/

2. Select from sublime text 2 menuTools -> Build System -> New Build System  

3. Enter the following code:

{
    "cmd": ["node-webkit", "--enable-logging", "${project_path:${file_path}}"],
    "working_dir": "${project_path:${file_path}}",
    "path": "/Applications/node-webkit.app/Contents/MacOS/"
}

Note: If the package.json is in the project root, to facilitate launching NW when viewing files from any subdirectory, you can use ${project_path} instead of ${project_path:${file_path}}

The above is the setting content provided by the official document. After testing, if package.json is in the root directory of the project, and you want to compile and run directly when editing any HTML or JS, you can achieve the effect according to the following settings:

{
    "cmd": ["nw.exe", "--enable-logging", "${project_path:${folder}}"],
    "working_dir": "${project_path:${folder}}",
    "path": "D:/dev/node-webkit/",
    "shell": true
}

4. Save the configuration content as nodeWebKit.sublime-bulid, the save directory will be in d:/Sublime.Text.3/Data/Packages/User, here we assume that sublime3 is installed in the d:/Sublime.Text.3/ directory

File -> New Window5. Open a new window using sublime text 2 

6. Use to  Project -> Add Folder to Projectadd a project to the current window

7. Open your main application file (eg: index.html) from the menu on the left and selectTools -> Build

8. Select  Tools -> Build System -> nodeWebKit (This step is only required for Sublime Text 3)

9. Choose Tools -> Build

10. At this point the node-webkit application will start your project and you can see the debug output in sublime text2

The operation steps are the same in sublime text 3, only need to pay attention to the 8th point.

 

Linux

As with Mac OS, just replace  the "path" parameter with  nw the actual path to the command

Use the command to  which nw find where the nw command is actually stored in linux, (eg return  /usr/bin/nw), so in this case nw is in the  /usr/bindirectory

Example:

{
    "cmd": ["nw", "--enable-logging", "${folder}"],
    "working_dir": "${folder}",
    "path": "/usr/bin/"
}

 

After the above configuration, after editing the page or script, you only need to operate the ctrl + B shortcut key to start the program interface for debugging, which is very convenient