Things to Know about Publishing Ionic Apps!
Things to Know about Publishing Ionic Apps!
Getting ready to kick start your next hybrid mobile application development framework and not sure about whether to publish your progressive web apps? This blog is for you!
So let’s quickly look at the outline of the Ionic Framework and its usage in the emerging technology era.
What is meant by the ionic framework?
Ionic is an open source framework mostly used to create Hybrid Mobile Applications. Hybrid Applications are essentially small websites running in a browser shell in an app having only one codebase which can work on both the iOS and Android platforms. Ionic build on top of the Cordova and AngularJS where one can write his own logic with the help of CSS, HTML, and JavaScript languages.
One of the prominent benefits of developing Ionic App is, it 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 PhoneGap or Cordova as the native wrapper in order to run as the native apps.
Before we move ahead with the topic publishing Ionic App, 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 prerequisites installed and app is in working state, which is ready to broadcast in the world. So first, we need to generate a release build version of our app based on the target we wish to deploy on.
How do I publish an ionic app on Android play store?
Step 1: Manual customization of the config.xml file
Open the config.xml file into the editor of your interest, where you can find this file in your project’s root folder.
- The first thing to change is your App Name which should be a human-readable name. You can replace the name inside
<name>My Task App</name>
- Second, update the id attribute comes with the widget tag. This is important.
<widget id="com.task.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. The id with Android build is nothing but your package name and with iOS it’s bundle ID.
- Third, in case if you are updating anything through your build, please 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.
- You can also restrict your app on the orientation basis by changing the value to a specific orientation
<preference name="orientation" value="portrait" />
For more references, please visit Cordova Official Site
Step 2: Build and Sign your Android Release App
To distribute your app on Android Play Store and on the other app distribution channels, we will need to build a digitally signed APK (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
- Form a digital signed key through the command given below:
$ keytool -genkey -v -keystore my-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000
Follow the instructions given on the terminal to type in your password and other information. Please save this file in a safe location as this is needed in case if you want to sign a new build again and release an update.
- Generate a release build of your app
$ ionic cordova build --release android
This will generate an android-release-unsigned.apk file under your platform/android/build/output/apk path.
- 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.
$ jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-key.keystore android-release-unsigned.apk alias_name
- At last, use the zipalign tool to optimize the APK. The tool can be found at the
/path/to/Android/sdk/build-tools/VERSION/zipalign
For the Mac OS with Android Studio installed the path to zipalign is:
~/Library/Android/sdk/build-tools/VERSION/zipalign
Finally type the below-given command to signed the APK:
$ zipalign -v 4 android-release-unsigned.apk MyTask.apk
- If you are getting any error to doing so with zipalign, copy the zipaling.sh (executable file) and paste in your platform/android/build/output/apk folder. Then fire the command:
$ ./ zipalign -v 4 android-release-unsigned.apk MyTask.apk
- So, the MyTask.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 app to Google Play Store
Now that this release APK was 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 enrolled with a developer account, you can go ahead to “Publish an Android App on Google Play” and follow the on-screen instructions.
How do you publish an ionic app for IOS iTunes?
Step 1: Generating Signing Certificates
First, make sure you have a valid Apple Developer account (it will cost nearly $99). Then, the next thing is to generate the certificates for the iOS which is a bit tedious process, so be sure to verify Apple’s documentation on what certificates are and how to generate them. To create the profiles and certificates needed, visit Apple’s member center and follow the links described in the same. 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.
- 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, where you will need to associate the expected certification and a provisioning profile.
Step 2: Build and Sign your app 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 fulfill the same:
$ ionic cordova build ios --prod
- The above command creates the minified code of the web portion of an app. Now, you can find out the .xcworkspace file inside /platforms/ios/. Double click on the same and open the file into Xcode.
- Go to Xcode > preference > account. You can see now that none of the accounts are 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.
- 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.
- 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.
- 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 “My task 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.
- 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. 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.
Conclusion
Ionic is a better choice for mobile application development which comes with stunning features. One can combine Ionic with continuous integration & delivery, where it really starts to shine and provide great value to the business and higher productivity. I hope that this blog has been able to give you some context about publishing Ionic Apps to the Android Play Store and the iOS App Store.