Electron Wrapper

It’s now never been easier to make a desktop version of your favourite website/web app thanks to the Electron project.

You may even be using an Electron app and didn’t even realise that it was powered by web technology with an embedded version of Chrome. For example Slack's desktop app is built on Electron. So is the desktop WordPress app.

Being a Windows user by day (at work) I’ve always missed having Simple Note (a great note taking app) as a desktop app. While they have a good web app, I’m always opening and closing sessions, deleting cookies etc with my work. So running it full-time can be a pain having to log in repeatedly.

To wrap a web app in Electron is very simple. Clone the Git repo for the Electron starter kit. Open the “main.js” file with your favourite text editor and change the following line:

mainWindow.loadURL('file://' + __dirname + '/index.html');

Now add the website address of the website you would like to wrap.

mainWindow.loadURL('https://app.simplenote.com');

Follow the rest of the Electron starter kit guide and install & start the project. Electron should now run and display the website address you’ve added.

To build a Simple Note app for Windows for yourself, grab my git repo SimpleNoteWrapper.

 

Tags:
 desktop,
 electron,
 development