Convert existing electron app to a sketch

Convert existing electron app to a Quark sketch. In this guide, we are going to load an existing electron application into a webview and also bundle the application as a Quark sketch.
Write the following code in the entry point of your application. In this case, index.js file.
// index.ts
import * as path from 'path';
import * as fs from 'fs';
import { remote } from 'electron';


const indexFilePath = path.resolve(`./${__projectfile}/index.html`);

const view = quark.views.createTabsView('My Electron App', document.createElement('webview'));
view.onDidConnectElement = () => {

    const url = `file://` + indexFilePath;

    let webview: Electron.WebviewTag = view.element as any;
    webview.setAttribute('src', url);
    webview.setAttribute('nodeintegration', '');
    webview.setAttribute('style', "display:flex;height:100%");

    const devtools = quark.util.createOutputChannel('App logs');;

    webview.getWebContents().on('console-message', (e, level, message, line, sourceId) => {

    const status = quark.util.createStatusBarItem();
    status.text = 'Toggle dev tools';;
    status.command = () => {
Build and test the application.

First build the application, and then package the application into the archive format. To pack the application, select Builder: Package command from the command palette.

If the application was packed successfully, test the app by running the command Run: Package.

Last Updated: 8/22/2019, 5:46:31 PM
MIT Licensed | Copyright © 2019-present Nishkal Kashyap