How to Build Your Electron Project Using CircleCI

All this time I have been wondering what my first article on dev.to would be. I have been writing ocassionally on www.elevatika.com. As it seems, nature has its ways.

I was trying to figure out how to build an electron project for the Windows platform on MacOS (some people still prefer OSX). Why was this a problem?

It appears one can't simply build an electron project for Windows using a Mac without sacrificing their unborn children, sometimes.

So, dev.to and the Internet, here is my story.

In 2018, I built a security system using JavaScript in the front-end, the backend and in the accompanying desktop and mobile apps. The part that is relevant to this article is electron.

I made the desktop app using electron + Vue.js based on a boilerplate I found through Vuetifyjs.com. I had no issue building for Windows back then since, well, I was on a Windows machine.

When you run the electron build command without any flags, it will detect the operating system you are running on and build for it as the default target. Therefore, back in 2018, I was on a Windows machine and my target build was for Windows. No problem.

However, last week, a friend of mine wanted me to modify the code a bit. I thought it would be simple. I cloned my Bitbucket repository on Mac, made the changes and everything looked ok.

Time to build the Windows binary came and I simply edited the build script. I added -w which tells the electron-builder to target Windows. By the way, you can do -mwl to build for Mac, Windows and Linux at the same time. My build script now looked like so:

"build": "node .electron-vue/build.js && electron-builder -w",

I then ran yarn build and waited.

Build failed. I encountered the following error message:

Error: Cannot check wine version: Error: Exit code: ENOENT. spawn wine ENOENT

Granted, things were not going according to my expectation and I thought I would find a simple fix. In fact, I confess I love build errors as long as they are helpful. In this case, I saw wine and recalled that's the thing that allows you to run Windows apps on *nix systems like Mac or Linux. I popped up a new terminal window and typed: brew install wine and waited for one hour as Homebrew poured it's magic onto the system. Why does Homebrew take forever to install stuff?

Trust me: everyone who hates npm install has never sat and watched brew install for 5 years and a some hours, give or take.

When wine was done installing, I did yarn build again and I got the same error.

---

I love Google.

That was my next stop. I tried searching for a solution and then I remembered how hard it is developing electron apps. It is not as easy as people make you think. As a front-end developer, you will not be at home and you will always have to accept it when you cannot find a solution of issues you face on Google.

I have a basis for this argument.

For example, there is not enough helpful stuff out there for electron yet. Don't people build for Desktop? I know there are some forums and platforms like StackOverflow where you can just ask a question and get an answer. I mean, no platform is as friendly as StackOverflow, right?

Who am I kidding, I don't even recall the name of my profile on StackOverflow.

You see, my grandmother and her great great grandmother got insulted when I posted a question 4 years ago and got down voted by some random smarts. I never ask questions over there anymore.

Besides, all the JavaScript's undefined is not an Object questions have been answered already. Therefore, being a web developer, I can just read answers over there. Also, I am the kind of person who prefers real-time answers and therefore when my immediate friends don't have answers and Google is also failing me, I decide to figure the solutions on my own.

---

Building for Windows on Mac was not going to work. But CircleCI is amazing for that. In fact, I use CircleCI to build static websites and deploy to ftp servers all the time.

I created a .circleci folder on my project root and added the following config.yml file inside it. This script is a modification of one that can be found on Github.

version: 2
jobs:
  build_windows:
    docker:
      - image: electronuserland/builder:wine
    steps:
      - checkout
      - run: yarn && yarn run build
      - store_artifacts:
          path: /root/project/build

workflows:
  version: 2
  build:
    jobs:
      - build_windows

While doing my research, I found this config on Github. In my case though, I wanted to download the resulting .exe file after building the project and I found out I can simply add the following section on the list of steps:

- store_artifacts:
    path: /root/project/build

Doing this allows you to download the resulting files. You just click on the file name and it downloads immediately.

Conclusion

My simple setup doesn't just hold true for building electron apps. In fact, with how cool and simple CircleCI makes automated builds whenever you push to your git repository, you can build any project and download the files. You get 250 build minutes free every week. My electron project took just 3 minutes to build.

Thank you for reading. Ask any question in the comments below. Cheers!