Ionic Apps for Windows & MacOS

Whilst there are two camps always debating whether we need to opt for native mobile apps or go the hybrid path, Ionic comes with another option, Ionic everything. Like, literally!

Ionic Framework

I hope you’ve heard about the Ionic framework. For starters, below is
the Ionic team’s website description:

It started with angular.js. Then the team moved ahead and joined the Angular bandwagon. Most of us would think they embraced the Angular framework and used it to create their framework for helping us develop our new hybrid mobile apps for iOS and Android but…… no! The Ionic team didn’t stop there. The v5 allows you to use Angular, Vue.js, React.js, and Vanilla JavaScript. Things don’t stop just yet, Ionic allows you to create macOS and Windows apps. Yeah, that’s right! But,not exactly!

Ionic helps you create an Electron.js build and the next part of the magic is in Electron’s hands. What’s Electron?

Electron.js

Electron allows you to create hybrid apps for most of the desktop OS’ using HTML, CSS & JS. Below is what their website says:

Never heard of it? There are a lot of desktop apps you have been using which exist in their current form thanks to Electron. For example, Skype, VS Code, Whatsapp, and MS Teams, to name a few.

How does it work with Ionic?

It’s simple.
Two steps (processes).
Ionic gives you an Electron build.
Electron allows you to build for Windows or macOS. Let’s give it a try, shall we?

Let’s build an Electron build of our Ionic app

Before you start creating your app, you need to have node.js installed.

• Now, to start creating your Ionic app let’s install Ionic first (duh!).

npm install -g @ionic/cli (-g for global)

You can skip this step if you do not have access to install the package globally.

Create your Ionic app (we shall use an Ionic team defined template here)

1
2
3
4
ionic start ionic - react - electron - app tabs--type = react– capacitor
or
if you don 't have access to install packages globally 
npx ionic start ionic - react - electron - app tabs--type = react– capacitor

Here, we created an Ionic app using react.js and capacitor.
Let’s try to run this app and see what we get out of the box with the tabs template. To run your app, enter the application directory and run this:

ionic serve

Once your app starts, it will open a browser window for you with the app URL opened by default (normally it’s localhost:8100 for react based apps). Your app will look something like below (depending on the theme of your OS).

• Next we need to use npx cap add <platform> to add the platforms we want our app to support, for example.

For Android: npx cap add android
For iOS: npx cap add ios
F̶o̶r̶ ̶E̶l̶e̶c̶t̶r̶o̶n̶:̶ ̶n̶p̶x̶ ̶a̶d̶d̶ ̶a̶d̶d̶ ̶e̶l̶e̶c̶t̶r̶o̶n̶
Here Lies the problem! you get the above output when you create your app but when you actually try to add Electron as the platform, Ionic gives you a warning because…… it’s deprecated.

So, what to do? Use the community-based Electron platform plugin? Yeah! Let’s give it a try.

install the electron plugin

npm i @capacitor-community/electron --save-dev

then add it to your ionic app

npx cap add @capacitor-community/electron

once you have electron added, you should give it a try running your app ionic app’s electron build running…

npx cap open @capacitor-community/electron

…and your app will load up as a separate application, thanks to Electron (and Chromium which it uses to create your application).

Let’s create windows and macOS packages of your electron app (build)

In your project directory, go to the folder named ‘electron’. (Yay! you guessed this right).
This folder consists of your Electron build app you just ran a few minutes ago.

Windows package

It’s actually quite simple from here, all you need to do is run the below command:
npm run electron:build-windows

This will download Electron, Electron-builder for you and create an exe file of your windows build.

macOS package

This again is simple, and in fact, similar to the one above.

npm run electron:build-windows

This will download Electron’s darwin release for macOS and create a dmg file of your mac build.
Both the above build files are inside the ‘dist’ folder of your Electron directory.

URL to the skeleton codebase is at https://github.com/psharneja/ionic-react-electron-app.git

Disclaimer:

All the app names, framework names are properties of their respective owners, they have all the rights to those. (Comment if you want me to remove any of the names).
Read more about Ionic at ionicframework.com
Read more about Electron at https://www.electronjs.org/
You require mac for macOS and iOS build!

Until next time, bye!