How to publish Ionic 4 Apps on Play Store and App store

One of the important benefits of developing an Ionic App is — it can publish apps to both iOS App store and Android Play store, from the same source code.

In this blog, we’ll go through the steps required to be taken to publish your Ionic 4 apps to iOS App store and Android Play store.

Ionic apps can be developed mostly through the browser itself (where developers don’t need any mobile device to debug the changes). Since Ionic is an HTML5 framework, it uses the Cordova as the native wrapper in order to run as the native apps.

What Is Ionic?

Ionic Framework is an open-source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies (HTML, CSS, and JavaScript).

Ionic Framework is focused on the frontend user experience, or UI interaction of an app (controls, interactions, gestures, animations). It’s easy to learn and integrates nicely with other libraries or frameworks, such as Angular, or can be used standalone without a frontend framework using a simple script include.

Currently, Ionic Framework has official integration with Angular, but support for Vue and React are in development. If you’d like to learn more about Ionic Framework before diving in, we check out this video , this will walk you through the basics.

Before proceeding to publish apps to store, make sure you have all the prerequisites tools installed on your local machine.

Publishing your Ionic App

Now, I am assuming that you already have the prerequisite tools and the app is in a working state. So first, we need to generate a release build version of our app based on the target we wish to deploy on.

Publish an ionic app on Android play store

System Requirements: (preferably all latest)

Step 1: Manual customization of the config.xml file

Open the config.xml file into the editor. You can find this file in your project’s root folder.

The first thing you have to change is your App Name which should be a human-readable name. You can replace the inside name tag

<name>TodoList</name>

Second, update the id attribute that comes with the widget tag. This is important.

<widget id="com.todolist.appname" version="0.0.1" 

xmlns="http://www.w3.org/ns/widgets" 

xmlns:cdv="http://cordova.apache.org/ns/1.0">

Note: The id is a unique identifier used to publish your app to iOS or Android store. It generally remains common for both store, and is the identification means for a wide variety of services and plugins e.g. payments

Third, in case if you are updating anything in your build, don’t forget to change the version number to a higher value. If you are publishing your app for the first time then this is not a thing to worry about.

Step 2: Generating an android release build of an app

To distribute your app on Android Play Store and on the other app distribution channels, you will need to build a digitally signed APK.

Note: Make sure you have already installed Android SDK before moving to this step

Add support for the Android Platform into your app, if you have not done so. Type the command given below into the terminal pointing to your app’s root folder.

ionic cordova platform add android

Generate a release build of your app

ionic cordova build android --prod --release

Note: Running only ionic cordova build android — prod only creates an unsigned build, which you can install in a test device to test. But this will not be accepted on Play store. You will have to “sign” this APK to publish it.

Create your digital signed key- a Keystore. It is just a binary file that holds the private keys needed to sign the app. You can change the name of your Keystore, alias_name and increase the days if you want.

use the command given below:

keytool -genkey -v -keystore my-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000

Fill the following details when creating the keystore

You should see my-key.keystore in the root of your project

To sign the unsigned.apk file i.e to create the signed release build run the jarsigner command tool which is also the part of Android APK.

You should have an unsigned APK located in platforms/android/app/build/outputs/apk/release/ in your Ionic project.

$ jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-key.keystore platforms/android/app/build/outputs/apk/release/todoList-release-unsigned.apk alias_name

Note: my-key.keystore in the above command should point to the relative address of your keystore file, it’s not just the name of the keystore

At last, use the zipalign tool to optimize the APK. The tool can be found at this location

For Windows:

/path/to/Android/sdk/build-tools/VERSION/zipalign

For macOS

~/Library/Android/sdk/build-tools/VERSION/zipalign

If you are not able to find the path then follow the steps below:

1. Open Android Studio

2. Click on the File tab on the Top Header and click on the setting(use short key Ctrl+Alt+s).

3. Go to the Appearance & Behaviour and click on System Setting and Android SDK.

That should give you a version number like 28.0.3.

Finally type the below-given command to signed the APK:

{androidSDK-buildtools-path}/zipalign -v 4 app-release-unsigned.apk TodoTask.apk

where app-release-unsigned.apk is the full path of the unsigned APK file, and TodoTask.apk is the path of the signed APK which you want to generate.

C:/Users/"Aditya Sharma"/AppData/Local/Android/Sdk/build-tools/28.0.3/zipalign -v 4 platforms/android/app/build/outputs/apk/release/app-release-unsigned.apk TodoTask.apk

To Verify the Signature, run the command below:

{androidSDK-buildtools-path}/apksigner verify TodoTask.apk

So, the TodoTask.apk is your final signed apk file that you need to upload on the Google Play Store or any other android distribution network.

Step 3: Submitting the app to Google Play Store

Now, this TodoTask APK is ready for the Google Play Store, make sure we have Play Store listing to upload our APK. Before you start, please visit the Google Play Store Developer Console and create a developer account ( it will cost nearly $25 ).

Once you have a developer account, you can go ahead and click “Publish an Android App on Google Play” and follow the on-screen instruction.

Be sure to fill out the description for the app along with providing screenshots and additional info. When ready, upload the signed release APK that was generated and publish the app.

Publish an ionic app on Apple App Store

Requirements:

Xcode
A Paid Apple Developers account
A valid provisioning profile
App Development and Distribution certificates

Step 1: Generating Signing Certificates

First, make sure you have a valid Apple Developer account( it will cost nearly $99 and is valid for 1 year only). Then, the next thing is to generate the certificates for the iOS which is a bit monotonous process, so be sure to verify Apple’s documentation on what certificates are and how to generate them. A developer needs to have only one development, and one distribution certificate ideally.

You should be able to go to apple member area: Apple Member Center For publishing your app to Apple, you will need certification and Profile.

You can find out two types of certificates:

Development: This is basically used to sign the app and deploy the signed apps to the registered device which has access to certificates, used mainly for development purpose
Distribution: By signing the apps with the distribution certificate the app can be installed on any of the device.

We are using Xcode for publishing the app to Apple app store, where you will need to associate the expected certification and profile.

Step 2: Generating a release build through Xcode

Add support for the iOS Platform into your app, if you have not done so. Type the command given below into the terminal pointing to your app’s root folder.

ionic cordova platform add ios

After addition of the platform create a build pointing to the –prod flag. Use the command given below to make the prod build.

ionic cordova prepare ios

The above command creates the minified code of an app.

Now, you can find the .xcworkspace file inside /platforms/ios/. Open the file in Xcode.

Add your developer account to Xcode

Go to Xcode > preference > account. You should see NO ACCOUNT is registered.
Click the left side “+” button at the lower side and login to your Apple developer account.
Pick the account and click on the detail, it should open a popup to ask you to request Certificates.
Pick the valid iOS distribution and development certificate which you generated in your developer account earlier
Close the preferences window. You can connect to your iPhone to run the app on your connected iPhone or else you can choose your simulator to do so.

Add new account in Xcode | You also see your already added accounts in Xcode

Creating/Managing App ID (bundle ID)

You can pick your App IDs by going back to App Developer Center / Identifiers.
You can create a new App ID by clicking on the “+” icon from the upper right corner.
Give a descriptive name to a new app and put in the Bundle ID (The reverse domain name. For example, com.task.appname you set up in your Ionic config.xml file). And then hit the continue button. In the next screen, make sure everything is valid and correct then click the “submit” button.

Add new app ID from Apple developer account

Add provisioning profile

To add new Provisioning Profiles and click the “+” button on the top right corner.

Add new provisioning profile from your Apple developer account

Select which profile you want | Select “App Store” for publishing the app

Pick App Store along with the correct app ID and then click on the continue.

Select the certificate and then continue.
Add a descriptive name like Todo List distribution and then click on Generate.
Download the newly created provisioning profile and open the same in Xcode.
In Xcode, change the Deployment Target to iOS target you are going to support on.

Before Archiving, set the Target to Generic iOS Device

In the Xcode menu, go to Product > Archive and archive your app for release.

Step 3: Submitting the app to the App Store

Generating archive will build a version of the app which is ready for distribution in the app stores. After archive has been created, Xcode Organizer modal gets opened.
This Organizer displays the list of the builds for the current app with the given version number.
Pick the last build and click on the “Validate” button to validate App publishing process.
Once it is successfully validated. Then, you are able to see the “Upload to App Store” button, just click on the same to submit your app.
Once uploaded successfully, your app is listed in iTunes Connect under the Activities section. You’ll have to fill out all app listing details here asd well, just like you did in Play store. From there one can enable the TestFlight for the beta testing version of your app or else app can be sent for the approval from Apple

iTunesConnect

iTunesConnect is Apple’s dashboard where developers can see the uploaded apps, edit its information etc and finally submit for release. There are option to do Beta testing, add in-app features like in-app purchases etc, and add description and screenshots etc.

You will need to create a new app on your iTune connect account on https://appstoreconnect.apple.com/

Conclusion

In this post, you learned how to publishing Ionic Apps to the Android Play Store and the iOS App Store. Publishing the apps is also a matter of experience, as there are hundreds of things that can go wrong. On top of that, Apple and Google keep changing little things in the publishing flow. Comment below if you are facing any issue in publishing your Ionic app to apple or google store.