Electron on the App Store, Early stages.
Tags: electron, javascript, appstore, menubar
Published: 2021-02-09 21:40:27

This article is part of a 5 articles series about the publication of an Electron application into the Mac AppStore, [Fenêtre](https://fenêt.re).

> [Fenêtre,](https://fenêt.re/) `fənɛtʁ`, lets you better multitask on your mac. It enables a [picture-in-picture](https://en.wikipedia.org/wiki/Picture-in-picture) mode for any website/web-app, image, video or flat file.
> You can find the [free version](https://itunes.apple.com/us/app/fen%C3%AAtre-lite/id1288451627)and the [paid version](https://itunes.apple.com/us/app/fen%C3%AAtre/id1286743037) on the Mac App-Store.

---

My name is [Yoann Moinet](https://yoannmoi.net).

I'm a French 🇫🇷 Senior Software Engineer at [Datadog](https://datadoghq.com/) since 2019.

Writing JavaScript since 2007, I started programming professionally as an ActionScript (Flash ⚡️) developer in 2011 at [Cossette](http://www.cossette.com) (Montréal based advertising company) and then at [Autodesk](https://www.autodesk.com/) on [3dsMax](https://www.autodesk.com/products/3ds-max/overview) in 2013 as a Web Application Engineer, later at [Zendesk](https://www.zendesk.com) in Montpellier, starting in 2016.

I wanted to do a post-mortem article on my journey, my stress, my joy and my frustrations conceptualizing, developing, packaging and publishing an Electron application on the Mac AppStore.

It was a lot of pain and tears, but in the end, I really think it was a positive and teaching experience.

So much that I ended up writing too much content for just one article and decided to split it into 5 different articles, to ease the pain of reading that much content coming from a Frenchie blabbering in English, about his shitty experience with programming.

---

# Inspiration

It all started in early 2017 when a colleague of mine showed me [Helium](http://heliumfloats.com/) . A very nice piece of software that lets you have a floating window in front of everything else.

In the following months, I've used it extensively, listening to talks and watching Netflix while coding (_please, don't tell my boss_ 🙏). But, the more I used it, the more frustrations grew in me. It was missing very niche features I needed. Like a see-through mode, the ability to load local files, a markdown viewer, some code highlighting, more embeds and custom shortcuts...

# Proof of concept

In the mean time I also wanted to learn more about the Mac application's ecosystem, packaging, submission and review loop.

So, in June, I started working on a proof of concept to see if I could have a similar feature-set quickly, with a technology I knew well, JavaScript.

[Electron](https://electron.atom.io/) to the rescue (👋 _haters_), since all I wanted, primarily, was to load a website in a window, it was **very** relevant to use a web-view framework.

A week later, working late hours at home and supporting my very pregnant wife 🤰🏻, I had a first, very rough, PoC, a logo and a minimal feature set. That's all I needed to keep the motivation going for the next 6 months or so (_TBD_).

{% youtube szI6JklWONI %}
> Very first prototype of Fenêtre.

This video helped me hook my colleague, [Max William Neilson](https://www.producthunt.com/@max_william_neilson), the biggest Beyonce fan ever, and convinced him to do some designs for Fenêtre. Starting with the logo. Then, the website and the settings screen of the application.

![1_Ryv3m5_jNWExdv_N7EXMvw](https://dev-to-uploads.s3.amazonaws.com/i/z4c7wkgce4u8lhgysnsq.jpeg) 
> Logo evolution, from my first try on the left to Max's latest, awesomest one.

From there I was able to make a nifty little animation in CSS:

{% codepen https://codepen.io/YoannM/pen/MvzxBR default-tab=result %}

# Cost

This was a side project, so I wanted to have something with minimal cost and maintenance possible (_because I'm cheap and lazy_). That's why I chose to publish it on the Mac AppStore, following the great advice from another colleague.

At first, I wanted to handle both licensing and updating myself, but for the small price of 30% of everything, Apple can handle that for you.

All in all, the application cost me ~115$ (+30% of all sales), which is a fair investment in my opinion... of a cheap person.

* **Apple Developer License 99$**: this is mandatory if you want to publish your app on the AppStore.
* **Domain name ~15$**: I had to buy [fenêt.re](https://fenêt.re) to deliver the website. Some people were having an issue typing the "ê" character, and **MANY** services still don't support it correctly ([more on this later](https://dev.to/yoannmoinet/electron-on-the-app-store-pain-tears-nce)). So I finally bought [getfenet.re](https://getfenet.re) as well, which brings the final cost to 30$, but it's still an exceptional cost.
* **Private git 0**$: I'm using [GitLab](https://about.gitlab.com/) which offers private repository for free as well as other very neat features, like a CI.
* **Hosting 0**$: Since I wasn't handling licenses or updates I didn't need any infrastructure for these. The only hosting I needed was for the website, which is a simple [GitLab Page](https://about.gitlab.com/features/pages/).

---

That was all fun and games, wasn't it? Now, come to the dark side and get your hands dirty, come cry with me in the next part of this series, [Pain & tears](https://dev.to/yoannmoinet/electron-on-the-app-store-pain-tears-nce).