Note: Announcing Quark appstore. Discover and share Quark projects and all the best community-made resources. ⚡
Visit
Dismiss

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';

quark.views.tabsviewController.hideNavbar();

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');
    devtools.show();

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

    const status = quark.util.createStatusBarItem();
    status.text = 'Toggle dev tools';
    status.show();
    status.command = () => {
        webview.getWebContents().toggleDevTools();
    }
}
view.focus();
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: 7/16/2019, 1:27:44 PM
MIT Licensed | Copyright © 2019-present Nishkal Kashyap