Don’t be scared of Electron

6 min readDec 1, 2021

Introduction

Imagine being able to write a desktop application using HTML, CSS, and JavaScript. Well, nowadays this is realistic — if you use the Electron framework.

Electron is a framework for cross-platform application development which uses Chromium and Node.js under the hood. Applications are known around the world, such as Skype, Slack, Discord, WhatsApp, Visual Studio Code, Twitch, InVision, and over 700 others have been created using this framework.

In this article, we’ll show how to create a desktop app for Windows with publishing to AWS S3 using Electron 2 ways.

One of our Intspirit engineers took an old Calculator — one of his first projects while learning to code years ago — and decided to make it into a desktop app with an option to publish data to AWS S3.

So, how do you create a desktop app with Electron? Well, there are a couple of ways. Let’s take a look at both of them and then do a quick comparison.

DIY

Step 1 — initialize an empty node project:

$ npm init

Step 2 — Install Electron dependency:

$ npm install electron — save-dev

Step 3 — Modify package.json by adding a script to start the electron app and changing the main file:

Step 4 — Create an index.js file in the src subfolder, and add the following:

The index.js file is, in very simple terms, a layer of Electron controlling the desktop shell of your app.

This shows in the code we added to it — we call the createWindow function once the app is ready, and we quit the app if the window is closed. This is the basic Electron functionality that we’ll need for this small app.

Step 5 — Create an index.html file (and CSS/js files if you need them).

In this case, we just copied over the HTML, CSS & js files from the old calculator.

Step 6 — Launching the Electron app with the script we added in step 3:

$ npm start

And here it is, a working Electron app!

Step 7 — Now we need a way to generate the executables for the app. First, let’s install electron-builder:

$ npm install electron-builder — save-dev

and add another script and a new key to the package.json:

and run

$ npm run dist

After the builder is finished, you will see there’s a new folder in the project named “dist”. Inside it, there is an .exe installer for the app as well as a folder named “win-unpacked”, which, as the name suggests, contains the unpacked version of the app. So now you can install the app onto your machine, or launch the unpacked .exe file to check how everything works (spoiler — it works quite well!).

Step 8 — Now, we need to push the installer files to AWS S3. First, let’s add some more stuff to package.json:

Also, you’ll need credentials for your AWS account, more specifically

AWS_SECRET_ACCESS_KEY
and AWS_ACCESS_KEY_ID

They have to either be defined as environment variables, or you can put them into ~/.aws/credentials. The second option is quicker, so let’s go with it this time. This file would have to look like this:

Step 9 — Now you can run the new script we added in the previous step with

$ npm run publish

and once the builder is finished, you will find the installer in your AWS S3 bucket.

A simpler way

Source: https://giphy.com/gifs/anchorman-really-ron-burgundy-5fBH6zf7l8bxukYh74Q

We managed to do all that we wanted, but the amount of trial-and-error was pretty huge, and this might be a problem for some folks. Not to worry, open-source software to the rescue. This time, it’s electron-forge. So, what do we do?

Step 1 — Initialize an app using electron-forge:

$ npx create-electron-app

Looking at this, you might think of create-react-app, and you’d be correct. This command will generate a very basic Hello World Electron app, but it already has pretty much everything we need to move forward quickly. The src/index.js file contains the same code we put together on our own, with a couple of additional function calls and lots of comments explaining every piece of code in detail.

You can run the app with this command:

$ yarn start

Step 2 — Put your own code into index.html along with CSS/JS if you need it. We, once again, just copied the old calculator’s files over into the src folder.

At this point, the app is running the same as the first option.

Even more, in package.json we can see a few scripts besides start: package, make and publish.

The package creates an unpacked version of the app, Make turns it into an installer — this works the same as “npm run dist” worked in the previous project. And there is Publish — it, well, publishes the installer to the selected source. But which source is that?

Step 3 — Well, for now, it’s none. Let’s fix that by pointing it to AWS S3. First, run

$ yarn add @electron-forge/publisher-s3

And after that, let’s mess with package.json a little:

Electron-forge actually has great documentation, so don’t hesitate to jump there for reference.

Step 4 — Let’s publish the app:

$ yarn run publish

And that’s it, once the builder is done your installer is available for download in your AWS S3 bucket!

So which is better?

Source: https://giphy.com/gifs/idk-shrug-i-dont-know-9w3w4eP5ZUgiQ

Both options have a right to live. If you don’t want to be bothered with setting up the project and you just want an app that works out-of-the-box for personal use or as a showcase project, then the second one is definitely for you. But if you want to build a large-scale production application, you should seriously consider the first one, as it’s much more customizable and you don’t have to follow any preexisting guidelines regarding the ways of distribution and packaging.

In conclusion

In this article, we showed how one of our Intspirit engineers went about learning the ways of a new framework. Now, you too have the knowledge needed to do the same yourself or even write your own Electron-based desktop application.

Comment below, do you use the Electron framework in your projects?

Electronize and look for our next posts!

Materials

The following resources will be useful to digest this article even better: