Build Desktop Apps with Node and Web Tech on VS Code Platform
Tags: showdev, vscode, javascript
Published: 2019-05-27 08:13:26

---
title: Build Desktop Apps with Node and Web Tech on VS Code Platform
published: true
description: 
tags: showdev, vscode, javascript
---

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.

![](https://thepracticaldev.s3.amazonaws.com/i/my4x9j1hiv36ij5djytc.png)

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.

![](https://thepracticaldev.s3.amazonaws.com/i/1yj31pvt50kq9a713leg.png)

This sample app with show CPU usage on your machine.

![](https://thepracticaldev.s3.amazonaws.com/i/6tmlp71pfdiormn9u7fe.png)

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:

```javascript
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`:

```javascript
exports.main = function(webview) {}

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

And you can call it in web like this:

```javascript
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.

```javascript
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!