Build Desktop Apps with Node and Web Tech on VS Code Platform

Build desktop apps with Node and web is very cool, however, Electron is a bit heavy. VS Code, one of the most popular editors, is the program I use every day. It is built with Electron. Can I run apps written with Node and web on its platform without install the runtime again? After some attempts, yes! I did it!

I made a VS Code extension that provides a gallery to show and launch such an app. You can install it from https://marketplace.visualstudio.com/items?itemName=sneezry.vscode-toolkit.

The extension is at its very early stage, and it's just for to verify my idea.

After install the extension, you can find a green beaker at bottom left corner of VS Code window, click it to open the app gallery.

In the gallery, you can see an app called Installer has already been installed. Click it and select any .tka (Toolkit App) to install.

Here's a sample Toolkit App you can download and have a try: https://github.com/Sneezry/cpu.tka/releases.

This sample app with show CPU usage on your machine.

How to write your own app? It's very simple!

The first thing is to create package.json, in the file to define displayName, icon, main and view. displayName is the text shows in the gallery, and icon is the relative path of the app icon. main is the entry file of the app, index.js for example. You need always declare a main function and export it in the entry file:

exports.main = function(webview) {
  // do something
}

The main function will be called when launch the app. webview is the context of the web interface. You can call webview.send(data) to send data to web.

view is the root path of web. index.html in the web root path will be open when the app launches.

On the web side, you can call any export Node function with a built-in NodeJS object.

For example, in the entry file, we have exported a function called foo:

exports.main = function(webview) {}

exports.foo = function() {
  // do something
  return data;
}

And you can call it in web like this:

const data = await NodeJS.foo();

All NodeJS functions are async in the web, no matter how you declare it on Node side.

If you want to receive data sent from Node on web side, declare a function call messager, and data sent by webview.send will pass to this function.

function messager(data) {
  // do something
}

Here's the data flow between Node and web:

+--------------+                     +--------------------+
| Node         |                     | Web                |
|              |                     |                    |
| webview.send ----------------------> messager(data)     |
|              |                     |                    |
| exports.foo  <---------------------- await NodeJS.foo() |
|              |                     |                    |
+--------------+                     +--------------------+

Also, you can install any node module in your app.

After all, zip your app and rename it to .tka.

Still have trouble to make it? See the sample app code: https://github.com/Sneezry/cpu.tka.

Enjoy!