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.apkfile 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
zipaligntool 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.
Note: If your cordova-ios version is < 5.0.0 and Xcode > 10.0, you might need to select “Legacy build System” in Xcode. Check instructions in this Github issue for more details.
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.
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 provisioning profile
- To add new Provisioning Profiles and click the “+” button on the top right corner.
- 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.
References
Next Steps
Now that you have learned the implementation of Local Notifications in Ionic 4, you can also try
- Ionic 4 Payment Gateways — Stripe | PayPal | Apple Pay | RazorPay
- Ionic 4 Charts with — Google Charts | HighCharts | d3.js | Chart.js
- Ionic 4 Social Logins — Facebook | Google | Twitter
- Ionic 4 Authentications — Via Email | Anonymous
- Ionic 4 Features — Geolocation | QR Code reader | Pedometer
- Media in Ionic 4 — Audio | Video | Image Picker | Image Cropper
- Ionic 4 Essentials — Native Storage | Translations | RTL
- Ionic 4 messaging — Firebase Push | Reading SMS
- Ionic 4 with Firebase — Basics | Hosting and DB | Cloud functions
If you need a base to start your next Ionic 4 app, you can make your next awesome app using Ionic 4 Full App
Top comments (0)