A no-nonsense guide to webpack, *Electron* & WebAssembly — Part 2

A quick look at building Electron apps

Photo by Felix Mittermeier on Unsplash

We’re continuing on our journey of exploring a few new technologies. As a reminder, here’s the overall plan:

• webpack tl;dr
• Electron tl;dr
• C++ to WebAssembly with Emscripten
• Bringing it all together

Electron time!

Electron tl;dr

The easiest way to get started with Electron is to use the community-developed Electron Forge. We’ll use the Beta v6 version since it seems stable enough at the time of writing.

As the docs suggest, get started using npx and run the sample:

npx @electron-forge/cli init electron-tldr
cd electron-tldr
npm start

This will launch a basic Electron app with the developer tools already opened.

You can also create a binary by running npm run package. If you’re on macOS, you’ll see a electron-tldr.app which you can double-click to run.

Use Visual Studio Code? Configure debugging by adding a .vscode/launch.json file.

And that’s it for a basic Electron setup! Here’s all the files layout:

electron-tldr
|- /src
  |- assets
    |- github.icns
  |- index.html
  |- index.js
|- package.json

I also used github.icns from http://flaticns.com/.

Next up we’ll look at WebAssembly (finally)!