Today we started development on a productivity tool called SeeWhy. It’s an integrated markdown editor, file browser and automation tool.
Or you can check out our past videos here.
The boilerplate repository we put together yesterday is available on Github.com here:
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.
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.
Cypress an E2E testing framework for automating complex UI interactions through the browser.
SASS a CSS preprocessor which allows a number of useful CSS utility functions.
Spectron a unit testing framework specifically to test Electron applications.
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
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
- Electron Homepage - Documentation and resources for getting started with Electron
- Awesome Electron - Recommended Resources for Electron development
- Electron Builder - Build and release tools for Electron projects
- Electron Forge - An alternative build and release tool for Electron projects
- Electron Repository - Git repository for the Electron codebase
- Spectron - Unit testing tools for Electron
- Awesome Vue - Recommended Resources for VueJS development
- VueJS Devtools for Chrome - Chrome extension for debugging VueJS code
- VueJS Typescript Documentation - A Guide for getting started with Vue using Typescript
- Element UI Vue Plugin - A VueJS plugin for using the Element UI framework in Vue
- Vue CLI - Development tool to build and configure Vue applications
- Dart-SASS vs. Node-SASS A comparison on Stack Overflow
- EditorConfig for Typescript - Microsoft’s recommended editor settings for Typescript projects