Angular + Electron + App Store = ❤️
In this article I’m going to tell you how to create awesome desktop apps and publish them to Apple App Store using your Angular skills and learning a little bit of Electron and Node.js.
First of all I intent to tell you my story, why I’ve decided to create the desktop app.
Some time ago I have been helping my friend to add content to his news website. And it was really boring because his editors always sent me unoptimized images to add. And I didn’t want to upload 2–4 mb for each to the server, so I had to resize them in photoshop, online tools, or other apps with awful design and usability etc. So, I haven’t liked them at all.
As I’m the frontend developer and don’t like routine — I’ve decided to automatize this process. And my first decision was to create simple Node.js server, which can use Image Magic library (really great tool). And that decision worked for me. I’ve created HTML5 form, file input, submit etc. Node.js used Image Magic to optimize, resize images and I could then take them from some folder after they have been optimized (you can also achieve this with gulp or grunt for ex.).
Despite the fact that the server did it’s work smooth, every time I had to optimize images I felt something goes wrong and I was absolutely right. Because they were uploaded to the local server then I had to find them in some folder and only after it I could upload it.
It shouldn’t work this way, it’s not natural at all. And the image magic has it’s main drawback for me — you have to install native module to the system with brew for ex. separately to it’s node module.
So, I’ve taken a look at electron, which provides javascript developers ability to create desktop apps. So, I’ve decided to use the following tech stack:
- Electron to build desktop app
- Angular for comprehensive frontend development
- Sharp.js to optimize/resize images
- Angular Material to use optimized components with google design
- and some other useful libraries to optimize images
- OOP 😊 (It suits great for apps)
- etc.
So, let the magic happen.
Electron patches HTML5's native file api with path to image. So, the process changed to something really reliable and natural.
So, in just 3 steps you are ready to go:
- Select images
- optimize/resize them
- Save archive or just rewrite ones.
I have felt extremely excited of this 😊.
And my main point of this article — if you have some case which you can optimize with the app — just create the app and then propose it to community or publish it for sale.
About 5 months of work in the weekends and I’ve created and published this app to Mac App Store. I really proud of it. It’s very fast, looks great (only my subjective opinion) and made with the most popular programming language — the javascript.
There is still lot of things to add, improve and change.
And I’m going to do it if I have more than 50 sales in App Store (my investments to create Apple Developer Account).
Anyways it has been a great challenge.
And I was really surprised that in first day it was 60 downloads without any advertisement (app was free at that time).
I know, that it is a very small probability, that it’ll cover my time and costs. Eventually, I’ll try.
And I’ve published it for for free in App Store (it’s not an advertisement, so you don’t have to 🙂). And I think you can do the same. Just find a good idea.
And I’ve decided to recap all challenges which I’ve faced with during developing the app.
- What boilerplate to chose? —
https://github.com/maximegris/angular-electron (I used angular 5 version). And optimized a little bit package.json to rebuild native modules (sharp.js and some others) to make it work in electron. Be aware that every native module should be rebuilt after it was installed as node_module in your app.
...,
"rebuild-electron": "./node_modules/.bin/electron-rebuild -p -t 'dev,prod,optional'","postinstall": "npx electron-builder install-app-deps",
"start": "npm-run-all --parallel webpack:watch electron:serve",
- How to store user data?- In Electron you can simply use the file to user’s settings and store it in remote.app.getPath(‘userData’). You can read how to do it in — How to store user data in Electron. If you need something more powerful you can use mongodb or sqlite3 as well — check it out in 5+ Ways to Persist Data in Node.js/Electron Apps .
- How to ship native modules? Sometimes I had issues with ones and asar (when you packaging your app — you have to use something called asar in order to improve performance on first loading). If you use electron builder — just define your modules in asarUnpack in electron-builder.json like this:
....,
"asarUnpack": [ "**/node_modules/sharp/**/*",
....],
- How to publish your great App in the Mac App Store? — you should read the official docs — Mac App Store Submission Guide. So, in order to publish your App in App Store you have to buy Apple Developer Certificate for 99$. And after submitting my app to App Store my App has been rejected due to needless rights in info.plist. So, my advice to use define only rights which you need in your app (for ex. you don’t have it add read rights if you have added read-write). For example, my parent.plist looks like this:
You have to sign your app and native modules. It was tricky thing for me anyways I’ve handle it with this script.
- You have to add ability for user to return to the app from top menu if you don’t shut down it from cmd + x, or clicking on cross button (my app was rejected because of absence of previous one).
- Read this article to know how to improve user experience — How To Make Your Electron App Sexy
And that’s it! Thank you for reading. I hope my article will be helpful for Angular devs.
Image resizer Tech in App Store
Don’t hesitate to write comments (if I did something wrong) and clap clap 😊
