Ionic AppFlow review – cross platform mobile development

Hello guys and welcome to this blog post. In this post, I’m going to speak about my experience with Ionic Appflow, which is, if you never heard of it, a great tool to build, deploy and test hybrid mobile applications developed with the same code base. This article assumes you know a bit about web development in general and that you have a NodeJS installed on your machine.

Web technologies – to the core

First, lets understand how it works. If we install Ionic CLI globally, we can use it to generate a new project:

$ npm i -g @ionic/cli
$ ionic start AppFlow-Test

The second command will create a new project in your current folder named “AppFlow-Test”. The CLI utility will promt for the Javascript Framework to use and a template (For this article I used the VueJS and list template). Basically, it creates a web app structure based on the Javascript framework you choose and the Ionic npm packages that include UI controls and manipulation. Now if we go into the newly created app structure, we can run:

$ ionic serve

This command will open up a local development server and if we navigate to http://localhost:8100/ we will see an app that looks like this:

This is really nice because it means we have an app structure with:

1. Our favorite Javascript framework
2. Lots of available controls in Ionic framework that are ready to use (see here)
3. Also lots of possibilities to access native features with Capacitor (see here)

Capacitor for native features

What we have is really cool, but what if we need to access native device features like Geolocalization, Camera or push notifications? This is where Capacitor comes into action, providing us with a set of APIs accessible from Javascript/Typescript, that work cross-platform and help us access the features we need. In order to enable Capacitor, we need to run these commands:

$ npx cap add android
$ npx cap add ios
$ npx cap add electron

Run one command once for each platform. If you don’t want to target desktop environments, you don’t need to run “npx cap add electron”. Note that not all Capacitor features are available in the browser. Camera might work, but Geolocalization will not be available.

For each platform that we add, Capacitor creates a folder with binaries and stuff for that specific platform. To build/publish a native app, you’ll need to have the SDKs installed with the right development tools (Android Studio and/or XCode).

While certainly, Android Studio will work on all major platforms, it’s not really the case when it comes to iOS development, since XCode is only available on Mac. I’m not a big fan of Mac because I don’t really feel as productive as in Linux Mint, so I recently tried the paid solution called AppFlow that the Ionic team has to offer.

AppFlow to the rescue

For my VentureFlow app, I had this issue that I no longer owned a Mac in order to perform deploys. I’ve managed to get through the process of acquiring a developer license, still not owning a Mac meant I didn’t manage to debug the app on a real device. I really thought that is not an issue if I chose AppFlow since it doesn’t require a Mac to publish your app to the Apple Store. Actually it’ll be cheaper if you are lucky enough to avoid the situations when you require the Mac computer.

And so I subscribed for the Appflow Launch paid membership and managed to setup my flows. Of course these were not working fine for the first time, but by reading the documentations for Android and iOS, I’ve managed to have two flows that build the app and published the binaries for both the Android and Apple Stores. And I was like Yuhuuuu!

A small disturbance to the flow, appflow

While everything seemed allright, when I submitted the app for review on Apple Store, the app was crashing on startup… The logs I’ve got were insufficient to determine the cause of the error so I was actually blocked until I got a Mac to examine exactly the root cause. After I got the Mac, I’ve discovered that the problem was with the configuration of Push Notifications with Google Firebase: the config file was not actually copied in the project and also the app was missing the Push Notifications entitlement that has to be added from XCode (I don’t think you can add it manually).

Pros and cons of using Appflow

From my perspective, Appflow does a very good job performing builds especially for Apple platforms. And these builds run quite fast. I also love the way it reads the source code from Gitlab. Appflow offers some URL to check your app directly in the browser. I didn’t use it too much just because my focus is primarily on the native platforms and I was quite lazy to modify CORS on backend so that HTTP calls work.

Anyway, going to the cons of using Appflow. My biggest issue is that your app doesn’t get pushed automatically to review in the Stores. You still have to go to the Store and submit for review. And another thing is that the automated flows triggered on push are available for another payment tier. I’m like baffled because even the first payment tier is quite expensive and I expected it to do more helpful things.

One important thing to notice is that you’ll need to have one Git repo per application and the package.json and all the files have to be in the root directory, not in a subdirectory. When I started the app, it was located somewhere in the /Client/app/ventureflow or similar and Ionic expected package.json to be in the root. It would be nice if the guys at Appflow implement a configuration option for this.

The last thing that annoyed me is that there’s no way it’ll increase your build numbers. Both Google and Apple Stores don’t accept packages for the same build number. You’ll have to script that manually so that your Ionic builds are not failing.

Conclusions

You know that I like to end each article with some conclusions so there you go: Ionic is a great framework to build native cross platform mobile apps. Appflow is a premium offering from Ionic that helps you with the deploy to Stores and building your app. However it’s not fully automated and you’ll have to do some work to increase the build numbers. I’ve did that with Gitlab, so if anyone is interested to find more about the solution, please contact me. A more automated Appflow is really costly and I think that the cheapest offering is already expensive enough for what they offer. If you own a Mac, you are good; I think you don’t ever need Appflow because you can do both Android and iOS development from the same machine. Other than that, it’s really worth trying.

Thanks for reading, I hope you found this article useful and interesting. If you have any suggestions don’t hesitate to contact me. If you found my content useful please consider a small donation. Any support is greatly appreciated! Cheers  😉