How to Build Your Electron Project Using CircleCI
Tags: electron, docker, devops, windows
Published: 2019-11-04 17:37:05

---
title: How to Build Your Electron Project Using CircleCI
published: true
description: I had a hard time figuring how to build for windows using mac and ended up picking a CI to do it. This works great and therefore decided to write this article. I love CircleCI.
tags: electron, docker, devops, windows
cover_image: https://thepracticaldev.s3.amazonaws.com/i/4v9xorrdkt3zavvyp0ur.jpeg
---

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](https://www.elevatika.com/). As it seems, nature has its ways. 

I was trying to figure out how to build an [electron](https://electronjs.org/) 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](https://electronjs.org/) 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](https://electronjs.org/).

I made the desktop app using [electron](https://electronjs.org/) + [Vue.js](https://vuejs.org/) based on a boilerplate I found through [Vuetifyjs.com](https://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](https://bitbucket.org/) 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:

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

I then ran `yarn build` and waited.

Build failed. I encountered the following error message:
```javascript
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](https://brew.sh/) poured it's magic onto the system. Why does [Homebrew](https://brew.sh/) 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](https://circleci.com/) is amazing for that. In fact, I use [CircleCI](https://circleci.com/) 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](https://github.com/joeireland/electron-circleci/blob/master/.circleci/config.yml).

```yaml
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](https://github.com/joeireland/electron-circleci/blob/master/.circleci/config.yml) 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:  

```yaml
- 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.

![Build Artifacts on CircleCI for an electron project built for windows target](https://thepracticaldev.s3.amazonaws.com/i/hd9f42l28ric6gqn925v.png)

## 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!