I’ve been looking forward to working on a desktop application. I ended up going with Electron (as it powers Visual Studio Code, and few other well known applications).

Electron played into my strengths - Typescript, and some Html. My application I built was called Notifi, and pages you into meetings that are on your calendar.

Electron spawns a process, where you can create windows from Html files. And if we can do that, we can use React.

But there’s a lot to the iceberg of creating an application:

  1. Setting up the Repository

  2. Understanding Flow of Data in Electron

  3. Implementing Authentication

  4. Managing Credentials from Google, working with Apis

  5. Connecting with Stripe, and managing transactions

  6. Subscription Logic

  7. Understanding how to publish

In order to hit the ground running, I wanted to have some Q.O.L. features already provided in the Repository:

  • Typescript - Causes a lot of Runtime Errors to be Compile Errors

  • React - My favorite frontend rendering engine

  • Eslint - A great quality checker for Typescript/Javascript

  • Hotreload - Save cause the change to render

  • Autoupdate - New builds cause old versions to update

I ended up finding a template repository called Electron React Boilerplate, which served all of my purposes.

It was simple to get started, clone the repo, and run npm start.

The repository took me a bit of time to digest, understanding all of the fields in the package.json, and folder structure. If you do begin to work with this app, I recommend you start by becoming familiar with the package files.

Caution: Some of the fields are misconfigured in this template, especially pertaining to publishing, codesigning, and notarization. We will go more into that in the future.

A Quick npm download && npm start and I was off to the races.

Stay tuned for more info about writing an App in Electron.

Keep reading