Knack Snack: Standalone Apps with Electron

Using Knack with Electron

Knack (the platform that enables ordinary people to do great things with their data, and also my employer) makes it easy to build apps accessible from anywhere in a web browser. If you use a Knack app heavily in your day to day business, however, it can be convenient to have a standalone version that you can use without having to have a web browser open at all times. This article describes how to set up a development version of an embedded Knack app running in an Electron container using a Yeoman generator.

Electron is extremely developer-friendly and in many cases single-page web apps can be embedded with little or no modification. In our case, we can create an embed for our app in the Knack builder and include that in an HTML page displayed by the Electron application.

However, if you simply copy this into the Hello World application from the Electron documentation, the app will not work. This is because the Electron starter app and other boilerplate defaults to loading your page through the file:// protocol, although scripts are still executed in the Electron renderer. Knack embedded apps, however, uses EasyXDM to manage cross-domain communication with the Knack API, which enforces a security policy prohibiting its use on an origin without a domain, likefile://. To get around this, we can use a lightweight node server like http-server to serve the page to the Electron container, ensuring that it has an originating domain.

Using a Generator

To simplify this process and make it easily repeatable, I’ve published a Yeoman generator that scaffolds out a working Knack embed in an Electron app with interactive configuration requiring minimal command line usage and no code.

Requirements

This generator has only been tested on Mac and Linux, so while it will probably work on Windows your miles may vary.

• node and npm
• Yeoman installed globally ($ npm install -g yo)
• generator-knack-electron installed directly via npm or using the interactiveyo tool

Scaffolding the Application

• Make a new folder in your working directory and go to it (mkdir my-knack-app && cd my-knack-app).
• Run yo knack-electron to start the generator.
• Answer the prompts with the details for your application. The application id and distribution key can be found in the embed code generated by the builder.

• Once the generator has finished, run npm run start to launch your standalone app!

Notes and Next Steps

• The scaffolded app does not include any styles except for a reset to ensure the embed fills the web view. You should add your own custom styles to embed/embed.css to match your existing web site or app.
• You could distribute your Electron app via npm, but if you’re interested in distributing this as a truly standalone app check out the Electron docs on application packaging.

Thank you for reading! If you have any comments or questions, hit me up on Twitter (@Overlapping) or email me at jeremy@knack.com.