Project: See Why

The Stream

Today we started development on a productivity tool called SeeWhy. It’s an integrated markdown editor, file browser and automation tool.

Come and enjoy the stream live!

Or you can check out our past videos here.

Source Code

The boilerplate repository we put together yesterday is available on Github.com here:

Comyune/electron-typescript-vue-boilerplate

Overview

SeeWhy is the combination of a few things:

  • A simple markdown editor.
  • A digital workflow based on the “bullet journal” pattern.
  • A file browser which revolves around directory traversal using primarily keyboard shortcuts.
  • An simple automation tool which uses markdown, JSON and TOML as the input for content pipelines.

Tooling

We will be using the following technologies and tools:

  • Electron to provide the basic “application” wrapper, which will allow us to easily deploy our application as a MacOS, Windows, iOS and Android application all-in-one.

  • VueJS to provide us with a framework for the application UI.

  • Typescript a typed language that compiles to Javascript, to make development as error-free as possible.

  • ESLint a code formatting tool for JavaScript which ensures we adhere to industry standard formatting.

  • Jest a unit testing framework for testing JavaScript components.

  • Cypress an E2E testing framework for automating complex UI interactions through the browser.

  • Babel a JavaScript transpiler which ensures we can use the latest ECMAScript features in our project.

  • SASS a CSS preprocessor which allows a number of useful CSS utility functions.

  • Spectron a unit testing framework specifically to test Electron applications.

Boilerplate

Yesterday we spent most of the day setting up our boilerplate project. As you can see above, we had a complex list of requirements, and getting all these tools to play nice with eachother was… I’m going to go with “fun”.

We tried a number of different boilerplate projects available for free online, but unfortunately none of them seemed to provide exactly what we were really after.

We tried many of the boilerplates here to no avail.

Ultimately, we started fresh using the vue-cli-service and the vue ui command. We set up a VueJS project with ESLint, Typescript, Jest, Cypress and Dart-SASS.

Then we installed the electron-builder plugin for VueJS. We configured this correctly, but hit a snag.

It seems a bug in the newer versions of Electron caused the Typescript compiler to trip. We were able to version lock our @node/types package to 12.12.21 to ensure we had the correct typing available. Github issue electron/electron#23701

Useful Resources

Electron

VueJS

Other


comments powered by Disqus