Desktop Development for the Web Developer - Part 2

Let's continue our build of a desktop app with web technologies. So far we have a slick front-end framework for making a UI. Next let's make sure we can actually make an app out of it using electron. Electron will open up 3 major features that we can use later: access to the user's machine, access to a node environment, and ability to target builds for different OS's. There are of course many more but these 3 stick out as being difference makers to me.

Access to the user's machine

Electron will provide a secure way to interact with the user's machine via an API. With a traditional desktop environment, this is trivial. This is bridging an import gap between our stack and our end product.

Access to a node environment

Electron will also open up the world of node to the desktop. Regardless of how you feel about javascript as a language the ecosystem is agile and vast.
The node ecosystem can move faster than the desktop ecosystem and this is a big win for us.

Target builds for different OS's

Cross platform app development is possible in native approaches. Somehow, even in 2021, this can still be a pain though. Electron is going to let us write once and build to different targets. That is great. If you share libraries with your web app you will even be able to leverage that code too.

Setup

Setting up our app to work inside electron will be a little trickier than the Vite setup. But we'll get there and I'll try my best to explain the big take-aways.

We will need to add a few dependencies to our project:

➜ yarn add --dev electron electron-builder electron-reloader electron-window-state npm-run-all

Most of these are pretty self explanitory on what they help with. For clarification npm-run-all will let us run a few commands in our package.json at the same time.

Now we need a main entry file to bootstrap electron:

➜ touch src/electron.js

In this file we are going to do the heavy lifting of getting electron to work with our Vue app. I stumbled upon:
appinteractive/electron-vite-tailwind-starter. Most of what I have for electron.js I borrowed from here. I tried to simplify as much as I could.

const createWindow = require('./win-helper.js')
const { app } = require('electron')

try {
  require('electron-reloader')(module)
} catch {}

const isDev = !app.isPackaged

let mainWindow

function loadVitePage(port) {
  mainWindow.loadURL(`http://localhost:${port}`).catch((err) => {
    console.log(err)
    setTimeout(() => {
      // do it again as the vite build can take a bit longer the first time
      loadVitePage(port)
    }, 300)
  })
}

function createMainWindow() {
  mainWindow = createWindow('main')
  mainWindow.once('close', () => {
    mainWindow = null
  })

  const port = process.env.PORT || 3000
  if (isDev) {
    loadVitePage(port)
  } else {
    mainWindow.loadFile('dist/index.html')
  }
}

app.once('ready', createMainWindow)
app.on('activate', () => {
  if (!mainWindow) {
    createMainWindow()
  }
})
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

I was going to run through which-dependency-does-what, but this post could go on all day. What this file is doing is:

• loading our window helper
• loading electron
• loading the Vue app's index into our window
• window utilities for the app when open

You could just run this via the vite and electron commands, but that would get old fast. That is why npm-run-all is a dependency. If we change the scripts section of our package.json to:

  "scripts": {
    "dev": "run-p dev:*",
    "dev:vite": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "dev:electron": "electron src/electron.js"
  },

Now if we want to run electron in dev mode all we need to do is:

yarn dev

Success!!! Pretty cool. We are starting to build out a base to make something cool for the desktop. At this point in the series it doesn't make sense to talk about how to build with electron. So we'll tackle that later since we still have plenty of dev work to do.

Next Up

• Build a resuable layout for our app.
• Organizing resuable ui components with Vue.
• Put some components together with our layout to build out a page.

Reference

github repo - part 2