Apr 13, 2019

Getting Started with Electron and Vue

There are a lot of boilerplates and blogs on how to set up Electron, Vue, Webpack, React, etc. But they all assume you know something about how they all relate and interact with each other.

Since I haven’t kept track of the changes in how development using JavaScript has come since the early days, hopefully this provides some insight from an old-timer.

Getting Started

Since I want to build a standalone application, Electron is a very convenient way to go about it. This is a framework built upon Chromium so you can develop an application using Node.js, HTML, CSS, and JavaScript.

Now you ask, what is wrong with using native SDKs like GTK and Qt? I would rather not deal with the dependencies in building on multiple platforms, as well as dealing with the intricacies of GUI widgets. By leveraging HTML+CSS, building the front-end should be fairly cross-platform and straightforward.

So what are the problems I’m going to cover in this write-up?

  • How to set it up.
  • What do the parts all do?
  • How do you publish/distribute?
  • How do you run it?
  • What does development look like?

We’ll be using Vue.js as the frontend framework. While there are many frameworks available to select from (React, AngularJS, etc), this seemed to be the best documented “from the ground up”. So here we are.

Installation

There’s no “right” way it seems to do all this, so let’s go with the general concensus and what seems easy so far.

First, get a Node.js environment set up, in whichever way you prefer.

Global Tools

Next, install Vue CLI (version 3), which is not used as a component in the project, but instead is used for setting up and building the project.

$ npm install -g @vue/cli

Install pnpm, which is a disk space efficient package manager.

$ npm install -g pnpm

Vue

With the prereqs installed, let’s set up the project, using default settings. I don’t know enough about the customizations, to do anything special.

$ vue create my-app
$ cd my-app

This will create the directory my-app, set it up as a git repository, and get Node.js install and configured. How convenient.

Let’s look at what’s there…

  • babel.config.js – Babel is a transpiler, converting JavaScript into a version that is backwards-compatible in various environments. This is the main config file for the tool; no need to touch it.
  • package.json – NPM package registry, which lists the packages necessary to run the project or perform development. We’ll be adding to this later.
  • public/ – Directory to store static assets for the project.
  • src/ – Directory to store “the code” for the project.

If you pnpm run serve at this point, we can serve up default contents in the “development build” environment, which can be accessed using your web browser. There’s not much to see here.

Electron Builder

Since we don’t intend to host this application somewhere and access via a web browser, we now integrate Electon into the Vue app. This is done by installing the electron-builder plugin.

$ vue add electron-builder

This added a few more files. Take a peek at the changes, and commit them to git.

  • src/background.js – the source code for the Electron main thread.

If you pnpm run electron:serve at this point, we get the same default app, now in its own application context.

Vuetify

Finally, lets add Vuetify, which is a UI toolkit for Vue, which provides an implementation of the Material Design Specification.

$ vue add vuetify

Again, this changed or added a few more files. Commit them.

If you pnpm run electron:serve now, the application has prettified a little bit.

Build

Now, lets see what happens when we build this.

$ pnpm run electron:build

After a bit of churning, a dist_electron directory should be generated. This contains the binary packages that can be executed standalone. The linux-unpacked directory is of most use to me right now; tar it up and we have our application!

Development

Okay, now that we have the essentials out of the way, how do we turn this “Hello World” Electron-based application into something real?

Here are the main files that you’ll deal with first:

  • src/background.js – Electron main process code. This handles creating the app and any non-rendering work you may be doing.
  • src/main.js – App (renderer) process code. This is run in the application window via public/index.html.
  • src/App.vue – The main Vue component.
  • src/components/ – Additional Vue components.

For example, if you want to muck with how Electron renders the application, you would modify src/background.js.

In my application, I don’t need the menu bar, so I set the autoHideMenuBar option. I also wanted to save the window state, so I installed and hooked up the electron-window-state module.

The things for Vue are a bit more complicated to describe; the tutorials and examples are fairly well written, so use them before diving in. But some side notes for the beginner into NodeJS and Vue…

Global Application State

You can create an object in main.js that can be referenced in other components. This can make tracking global application state into one place.

# main.js

export const appData = {
  title: 'Foo',
  someVariable: false
}

# App.vue

export default {
  // ...
  data: () => {
    return appData
  }

Now that you have application state, you may want to poke at it in DevTools. I haven’t found a way that seems non-hacky, so here is the hacky:

# main.js

global appData = appData

Vue Notes

As Vue is a framework, it obviously has some new syntax to go with.

  • element :property="method" – hook up method() to a property. The method is defined in the computed section.
  • element @click – hook up some code to an action.
  • {{ ... }} – execute some code

References