How to publish Ionic 4 Apps on Play Store and App store
Tags: ionic, playstore, appstore, hybrid
Published: 2020-03-28 10:02:19

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-supplementalPostContentLoaded is-withAccentColors" lang="en" ><div class="postArticle-content js-postField js-notesSource editable" id="editor_6" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…" spellcheck="false"><section name="8558" class="section section--body section--first"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="6426" class="graf graf--p graf-after--figure">One of the important benefits of developing an Ionic App is&#8202;—&#8202;it can publish apps to both iOS App store and Android Play store, from the same source code.</p><p name="0d91" class="graf graf--p graf-after--p">In this blog, we’ll go through the steps required to be taken to <strong class="markup--strong markup--p-strong">publish your Ionic 4 apps to iOS App store and Android Play store.</strong></p><p name="8d3d" class="graf graf--p graf-after--p">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.</p><h3 name="d1da" class="graf graf--h3 graf-after--p">What Is&nbsp;Ionic?</h3><p name="a3e9" class="graf graf--p graf-after--h3">Ionic Framework is an open-source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies (HTML, CSS, and JavaScript).</p><p name="7e3a" class="graf graf--p graf-after--p">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.</p><p name="4226" class="graf graf--p graf-after--p">Currently, Ionic Framework has official integration with <a href="https://angular.io/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Angular</a>, but support for Vue and React are in development. If you’d like to learn more about Ionic Framework before diving in, we <a href="https://youtu.be/p3AN3igqiRc"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">check out this video</a>&nbsp;, this will walk you through the basics.</p><blockquote name="4197" class="graf graf--blockquote graf-after--p is-selected">Before proceeding to publish apps to store, make sure you have all the <a href="https://ionicframework.com/docs/angular/your-first-app#required-tools"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">prerequisites tools</a> installed on your local machine.</blockquote><h3 name="5c7f" class="graf graf--h3 graf-after--blockquote">Publishing your Ionic&nbsp;App</h3><p name="3cb2" class="graf graf--p graf-after--h3">Now, I am assuming that you already have the <a href="https://ionicframework.com/docs/angular/your-first-app#required-tools"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">prerequisite tools</a> 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.</p><h3 name="0606" class="graf graf--h3 graf-after--p">Publish an ionic app on Android play&nbsp;store</h3><p name="7eff" class="graf graf--p graf-after--h3"><strong class="markup--strong markup--p-strong">System Requirements: (preferably all latest)</strong></p><ol class="postList"><li name="52ea" class="graf graf--li graf-after--p"><a href="https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Java</a></li><li name="5b5d" class="graf graf--li graf-after--li"><a href="https://gradle.org/install/"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Gradle</a></li><li name="2c5f" class="graf graf--li graf-after--li"><a href="https://developer.android.com/studio/"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Android Studio</a></li><li name="1851" class="graf graf--li graf-after--li"><a href="http://developer.android.com/sdk/index.html"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Android SDK</a></li></ol><p name="e460" class="graf graf--p graf-after--li"><strong class="markup--strong markup--p-strong">Step 1: Manual customization of the config.xml file</strong></p><figure tabindex="0" contenteditable="false" name="a650" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 292px; max-height: 544px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 186.3%;"></div><img class="graf-image" data-image-id="1*-3iHLRK54aURiDvo8Apcjw.jpeg" data-width="292" data-height="544" src="https://cdn-images-1.medium.com/max/800/1*-3iHLRK54aURiDvo8Apcjw.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Folder Structure</figcaption></figure><p name="3fc8" class="graf graf--p graf-after--figure">Open the <strong class="markup--strong markup--p-strong">config.xml</strong> file into the editor. You can find this file in your project’s root folder.</p><ul class="postList"><li name="5ca9" class="graf graf--li graf-after--p">The first thing you have to change is <strong class="markup--strong markup--li-strong">your App Name</strong> which should be a human-readable name. You can replace the inside name tag</li></ul><pre name="1602" class="graf graf--pre graf-after--li">&lt;name&gt;TodoList&lt;/name&gt;</pre><ul class="postList"><li name="dfc4" class="graf graf--li graf-after--pre">Second, update the id attribute that comes with the widget tag. This is important.</li></ul><pre name="b437" class="graf graf--pre graf-after--li">&lt;widget id="com.todolist.appname" version="0.0.1" <br>xmlns="http://www.w3.org/ns/widgets" <br>xmlns:cdv="http://cordova.apache.org/ns/1.0"&gt;</pre><blockquote name="19f1" class="graf graf--blockquote graf-after--pre"><strong class="markup--strong markup--blockquote-strong">Note: </strong>The<em class="markup--em markup--blockquote-em"> </em><strong class="markup--strong markup--blockquote-strong"><em class="markup--em markup--blockquote-em">id</em></strong> 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</blockquote><ul class="postList"><li name="dfe2" class="graf graf--li graf-after--blockquote">Third, in case if you are updating anything in your build, don’t forget to change the <strong class="markup--strong markup--li-strong">version number</strong> to a higher value. If you are publishing your app for the first time then this is not a thing to worry about.</li></ul><p name="511c" class="graf graf--p graf-after--li"><strong class="markup--strong markup--p-strong">Step 2: Generating an android release build of an app</strong></p><p name="4668" class="graf graf--p graf-after--p">To distribute your app on Android Play Store and on the other app distribution channels, you will need to build a digitally signed APK.</p><blockquote name="abd7" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">Note: Make sure you have already installed Android SDK before moving to this step</strong></blockquote><ul class="postList"><li name="ad27" class="graf graf--li graf-after--blockquote">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.</li></ul><pre name="f048" class="graf graf--pre graf-after--li">ionic cordova platform add android</pre><ul class="postList"><li name="4236" class="graf graf--li graf-after--pre">Generate a release build of your app</li></ul><pre name="ceb2" class="graf graf--pre graf-after--li">ionic cordova build android --prod --release</pre><p name="c0af" class="graf graf--p graf-after--pre">Note: Running only <code class="markup--code markup--p-code">ionic cordova build android&#8202;—&#8202;prod</code> 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.</p><ul class="postList"><li name="9028" class="graf graf--li graf-after--p">Create your digital signed key- a <strong class="markup--strong markup--li-strong">Keystore. </strong>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.</li></ul><figure tabindex="0" contenteditable="false" name="03d9" class="graf graf--figure graf-after--li"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 118px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 16.900000000000002%;"></div><img class="graf-image" data-image-id="1*tA_t1ckNB9a0TVY_LgfyTg.jpeg" data-width="805" data-height="136" src="https://cdn-images-1.medium.com/max/800/1*tA_t1ckNB9a0TVY_LgfyTg.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Keytool Generate&nbsp;Key</figcaption></figure><p name="e51c" class="graf graf--p graf-after--figure">use the command given below:</p><pre name="8daa" class="graf graf--pre graf-after--p">keytool -genkey -v -keystore my-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000</pre><p name="f93d" class="graf graf--p graf-after--pre">Fill the following details when creating the keystore</p><figure tabindex="0" contenteditable="false" name="e829" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 622px; max-height: 248px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 39.900000000000006%;"></div><img class="graf-image" data-image-id="1*SXReCyDoGVMMhsy8X3J1ww.jpeg" data-width="622" data-height="248" src="https://cdn-images-1.medium.com/max/800/1*SXReCyDoGVMMhsy8X3J1ww.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Keystore Details</figcaption></figure><p name="ee61" class="graf graf--p graf-after--figure">You should see <code class="markup--code markup--p-code">my-key.keystore</code> in the root of your project</p><ul class="postList"><li name="26be" class="graf graf--li graf-after--p">To sign the <code class="markup--code markup--li-code">unsigned.apk</code> file i.e to create the signed release build run the jarsigner command tool which is also the part of Android APK.</li></ul><p name="5f26" class="graf graf--p graf-after--li">You should have an unsigned APK located in <code class="markup--code markup--p-code">platforms/android/app/build/outputs/apk/release/</code> in your Ionic project.</p><figure tabindex="0" contenteditable="false" name="c2ce" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 119px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 17.1%;"></div><img class="graf-image" data-image-id="1*piGbaqoOuN2EVhdTiKXcmg.jpeg" data-width="1208" data-height="206" src="https://cdn-images-1.medium.com/max/800/1*piGbaqoOuN2EVhdTiKXcmg.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Unsigned APK&nbsp;path</figcaption></figure><pre name="da30" class="graf graf--pre graf-after--figure">$ jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-key.keystore platforms/android/app/build/outputs/apk/release/todoList-release-unsigned.apk alias_name</pre><p name="e3b7" class="graf graf--p graf-after--pre"><strong class="markup--strong markup--p-strong">Note</strong>: <code class="markup--code markup--p-code">my-key.keystore</code> in the above command should point to the relative address of your keystore file, it’s not just the name of the keystore</p><ul class="postList"><li name="c45e" class="graf graf--li graf-after--p">At last, use the <code class="markup--code markup--li-code">zipalign</code> tool to optimize the APK. The tool can be found at this location</li></ul><p name="f4f8" class="graf graf--p graf-after--li"><strong class="markup--strong markup--p-strong">For Windows:</strong></p><pre name="8c9f" class="graf graf--pre graf-after--p">/path/to/Android/sdk/build-tools/VERSION/zipalign</pre><p name="6bf6" class="graf graf--p graf-after--pre"><strong class="markup--strong markup--p-strong">For macOS</strong></p><pre name="d01b" class="graf graf--pre graf-after--p">~/Library/Android/sdk/build-tools/VERSION/zipalign</pre><p name="d3fd" class="graf graf--p graf-after--pre">If you are not able to find the path then follow the steps below:</p><p name="e36c" class="graf graf--p graf-after--p">1. Open Android Studio</p><p name="855e" class="graf graf--p graf-after--p">2. Click on the File tab on the Top Header and click on the setting(use short key Ctrl+Alt+s).</p><p name="02e2" class="graf graf--p graf-after--p">3. Go to the Appearance &amp; Behaviour and click on System Setting and Android SDK.</p><figure tabindex="0" contenteditable="false" name="26d1" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 410px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 58.599999999999994%;"></div><img class="graf-image" data-image-id="1*FkSpTmc6WQWf-Hw6TgPzsw.jpeg" data-width="1039" data-height="609" src="https://cdn-images-1.medium.com/max/800/1*FkSpTmc6WQWf-Hw6TgPzsw.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Android SDK&nbsp;Path</figcaption></figure><p name="ee62" class="graf graf--p graf-after--figure">That should give you a version number like <em class="markup--em markup--p-em">28.0.3</em>.</p><ul class="postList"><li name="523d" class="graf graf--li graf-after--p">Finally type the below-given command to signed the APK:</li></ul><pre name="59a5" class="graf graf--pre graf-after--li">{androidSDK-buildtools-path}/zipalign -v 4 app-release-unsigned.apk TodoTask.apk</pre><p name="52f9" class="graf graf--p graf-after--pre">where <code class="markup--code markup--p-code">app-release-unsigned.apk</code> is the full path of the unsigned APK file, and <code class="markup--code markup--p-code">TodoTask.apk</code> is the path of the signed APK which you want to generate.</p><pre name="3361" class="graf graf--pre graf-after--p">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</pre><ul class="postList"><li name="3729" class="graf graf--li graf-after--pre">To Verify the Signature, run the command below:</li></ul><pre name="dc98" class="graf graf--pre graf-after--li">{androidSDK-buildtools-path}/apksigner verify TodoTask.apk</pre><ul class="postList"><li name="fc51" class="graf graf--li graf-after--pre">So, the <strong class="markup--strong markup--li-strong">TodoTask.apk</strong> is your final signed apk file that you need to upload on the Google Play Store or any other android distribution network.</li></ul><p name="8a56" class="graf graf--p graf-after--li"><strong class="markup--strong markup--p-strong">Step 3: Submitting the app to Google Play Store</strong></p><p name="ad65" class="graf graf--p graf-after--p">Now, this <strong class="markup--strong markup--p-strong">TodoTask </strong>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 <a href="https://play.google.com/apps/publish/"  class="markup--anchor markup--p-anchor" rel="nofollow noopener noreferrer noopener"    target="_blank">Google Play Store Developer Console</a> and create a developer account ( it will cost nearly $25 ).</p><p name="701b" class="graf graf--p graf-after--p">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.</p><figure tabindex="0" contenteditable="false" name="c0fa" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 304px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 43.4%;"></div><img class="graf-image" data-image-id="1*J15mptETZKtmAAYvxL2e8w.jpeg" data-width="788" data-height="342" src="https://cdn-images-1.medium.com/max/800/1*J15mptETZKtmAAYvxL2e8w.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Google Play Store&nbsp;Console</figcaption></figure><p name="c521" class="graf graf--p graf-after--figure">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.</p><h3 name="b130" class="graf graf--h3 graf-after--p">Publish an ionic app on Apple App&nbsp;Store</h3><p name="0f42" class="graf graf--p graf-after--h3"><strong class="markup--strong markup--p-strong">Requirements:</strong></p><ul class="postList"><li name="f4bd" class="graf graf--li graf-after--p"><a href="https://www.macupdate.com/app/mac/13621/xcode"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Xcode</a></li><li name="2fb4" class="graf graf--li graf-after--li"><a href="https://developer.apple.com/"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">A Paid Apple Developers account</a></li><li name="c4b1" class="graf graf--li graf-after--li">A valid provisioning profile</li><li name="555e" class="graf graf--li graf-after--li">App Development and Distribution certificates</li></ul><p name="5a39" class="graf graf--p graf-after--li"><strong class="markup--strong markup--p-strong">Step 1: Generating Signing Certificates</strong></p><p name="55cb" class="graf graf--p graf-after--p">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.</p><p name="0810" class="graf graf--p graf-after--p">You should be able to go to apple member area: <a href="https://developer.apple.com/membercenter/index.action"  class="markup--anchor markup--p-anchor" rel="nofollow noopener"    target="_blank">Apple Member Center</a> For publishing your app to Apple, you will need certification and Profile.</p><p name="b57d" class="graf graf--p graf-after--p">You can find out two types of certificates:</p><ul class="postList"><li name="7fe3" class="graf graf--li graf-after--p"><strong class="markup--strong markup--li-strong">Development</strong>: 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</li><li name="8ef5" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Distribution</strong>: By signing the apps with the distribution certificate the app can be installed on any of the device.</li></ul><p name="0a25" class="graf graf--p graf-after--li">We are using Xcode for publishing the app to Apple app store, where you will need to associate the expected certification and profile.</p><p name="ba69" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 2: Generating a release build through Xcode</strong></p><ul class="postList"><li name="4721" class="graf graf--li graf-after--p">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.</li></ul><pre name="1472" class="graf graf--pre graf-after--li">ionic cordova platform add ios</pre><ul class="postList"><li name="da47" class="graf graf--li graf-after--pre">After addition of the platform create a build pointing to the –prod flag. Use the command given below to make the prod build.</li></ul><pre name="6512" class="graf graf--pre graf-after--li">ionic cordova prepare ios</pre><p name="6120" class="graf graf--p graf-after--pre">The above command creates the minified code of an app.</p><p name="28cc" class="graf graf--p graf-after--p">Now, you can find the&nbsp;<strong class="markup--strong markup--p-strong">.xcworkspace</strong> <strong class="markup--strong markup--p-strong">file</strong> inside /platforms/ios/. Open the file in Xcode.</p><p name="772b" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Note</strong>: If your <code class="markup--code markup--p-code"><a href="https://www.npmjs.com/package/cordova-ios"  class="markup--anchor markup--p-anchor" rel="nofollow noopener"    target="_blank">cordova-ios</a></code> version is &lt; 5.0.0 and Xcode &gt; 10.0, you might need to select “Legacy build System” in Xcode. Check instructions in <a href="https://github.com/apache/cordova-ios/issues/407"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">this</a> <a href="https://github.com/apache/cordova-ios/issues/407"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Github issue</a> for more details.</p><h4 name="4234" class="graf graf--h4 graf-after--p">Add your developer account to&nbsp;Xcode</h4><ul class="postList"><li name="324e" class="graf graf--li graf-after--h4">Go to Xcode &gt; preference &gt; account. You should see <strong class="markup--strong markup--li-strong">NO ACCOUNT</strong> is registered.</li><li name="284e" class="graf graf--li graf-after--li">Click the left side “<strong class="markup--strong markup--li-strong">+</strong>” button at the lower side and login to your Apple developer account.</li><li name="727a" class="graf graf--li graf-after--li">Pick the account and click on the detail, it should open a popup to ask you to request Certificates.</li><li name="c40c" class="graf graf--li graf-after--li">Pick the valid iOS distribution and development certificate which you generated in your developer account earlier</li><li name="8c1a" class="graf graf--li graf-after--li">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.</li></ul><figure tabindex="0" contenteditable="false" name="7d06" class="graf graf--figure graf-after--li"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 508px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 72.5%;"></div><img class="graf-image" data-image-id="1*cWwWKz57XpzH4p2HxZD0-A.jpeg" data-width="808" data-height="586" src="https://cdn-images-1.medium.com/max/800/1*cWwWKz57XpzH4p2HxZD0-A.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Add new account in Xcode | You also see your already added accounts in&nbsp;Xcode</figcaption></figure><h4 name="3a90" class="graf graf--h4 graf-after--figure">Creating/Managing App ID (bundle&nbsp;ID)</h4><ul class="postList"><li name="f27e" class="graf graf--li graf-after--h4">You can pick your App IDs by going back to <a href="https://developer.apple.com/account/ios/identifiers/bundle/bundleList.action"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noreferrer noopener"    target="_blank">App Developer Center / Identifiers</a>.</li><li name="377a" class="graf graf--li graf-after--li">You can create a new App ID by clicking on the “+” icon from the upper right corner.</li><li name="430e" class="graf graf--li graf-after--li">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 <strong class="markup--strong markup--li-strong">continue</strong> button. In the next screen, make sure everything is valid and correct then click the “submit” button.</li></ul><figure tabindex="0" contenteditable="false" name="7a13" class="graf graf--figure graf-after--li"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 381px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 54.50000000000001%;"></div><img class="graf-image" data-image-id="1*Q7y7KLtw-Pp6bSOdAQnXtw.jpeg" data-width="806" data-height="439" src="https://cdn-images-1.medium.com/max/800/1*Q7y7KLtw-Pp6bSOdAQnXtw.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Add new app ID from Apple developer account</figcaption></figure><h4 name="85e1" class="graf graf--h4 graf-after--figure">Add provisioning profile</h4><ul class="postList"><li name="d6ed" class="graf graf--li graf-after--h4">To add new Provisioning Profiles and click the “+” button on the top right corner.</li></ul><figure tabindex="0" contenteditable="false" name="f6fa" class="graf graf--figure graf-after--li"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 361px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 51.6%;"></div><img class="graf-image" data-image-id="1*pkeKg_asIJQmtq_mr3qhSQ.jpeg" data-width="806" data-height="416" src="https://cdn-images-1.medium.com/max/800/1*pkeKg_asIJQmtq_mr3qhSQ.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Add new provisioning profile from your Apple developer account</figcaption></figure><figure tabindex="0" contenteditable="false" name="dc59" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 410px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 58.599999999999994%;"></div><img class="graf-image" data-image-id="1*R5EsGWw-TU7Um8xDUyO7Gg.jpeg" data-width="806" data-height="472" src="https://cdn-images-1.medium.com/max/800/1*R5EsGWw-TU7Um8xDUyO7Gg.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Select which profile you want | Select “App Store” for publishing the&nbsp;app</figcaption></figure><ul class="postList"><li name="cc9a" class="graf graf--li graf-after--figure">Pick <strong class="markup--strong markup--li-strong">App Store</strong> along with the correct app ID and then click on the continue.</li></ul><figure tabindex="0" contenteditable="false" name="b5ea" class="graf graf--figure graf-after--li is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 246px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.199999999999996%;"></div><img class="graf-image" data-image-id="1*fkT7YhQRx7DzMpPf_wnwTA.jpeg" data-width="804" data-height="283" src="https://cdn-images-1.medium.com/max/800/1*fkT7YhQRx7DzMpPf_wnwTA.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><ul class="postList"><li name="ca96" class="graf graf--li graf-after--figure">Select the certificate and then continue.</li><li name="b637" class="graf graf--li graf-after--li">Add a descriptive name like <strong class="markup--strong markup--li-strong">Todo List distribution</strong> and then click on <strong class="markup--strong markup--li-strong">Generate</strong>.</li><li name="f763" class="graf graf--li graf-after--li">Download the newly created provisioning profile and open the same in Xcode.</li><li name="e92d" class="graf graf--li graf-after--li">In Xcode, change the Deployment Target to iOS target you are going to support on.</li></ul><figure tabindex="0" contenteditable="false" name="a52d" class="graf graf--figure graf-after--li is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 466px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 66.60000000000001%;"></div><img class="graf-image" data-image-id="1*BVSuDaDlekB4R5bmRyW6Cw.jpeg" data-width="808" data-height="538" src="https://cdn-images-1.medium.com/max/800/1*BVSuDaDlekB4R5bmRyW6Cw.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><ul class="postList"><li name="3bbe" class="graf graf--li graf-after--figure">Before Archiving, set the Target to <strong class="markup--strong markup--li-strong">Generic iOS Device</strong></li></ul><figure tabindex="0" contenteditable="false" name="92c0" class="graf graf--figure graf-after--li is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 672px; max-height: 233px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 34.699999999999996%;"></div><img class="graf-image" data-image-id="1*Ukbev9QmvYZTMHPEK968tA.jpeg" data-width="672" data-height="233" src="https://cdn-images-1.medium.com/max/800/1*Ukbev9QmvYZTMHPEK968tA.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><ul class="postList"><li name="d0a4" class="graf graf--li graf-after--figure">In the Xcode menu, go to Product &gt; Archive and archive your app for release.</li></ul><p name="3d6b" class="graf graf--p graf-after--li"><strong class="markup--strong markup--p-strong">Step 3: Submitting the app to the App Store</strong></p><ul class="postList"><li name="f8a9" class="graf graf--li graf-after--p">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.</li><li name="9003" class="graf graf--li graf-after--li">This Organizer displays the list of the builds for the current app with the given version number.</li><li name="2390" class="graf graf--li graf-after--li">Pick the last build and click on the “Validate” button to validate App publishing process.</li><li name="fa57" class="graf graf--li graf-after--li">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.</li><li name="8858" class="graf graf--li graf-after--li">Once uploaded successfully, your app is listed in <strong class="markup--strong markup--li-strong">iTunes Connect</strong> 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</li></ul><h4 name="6c17" class="graf graf--h4 graf-after--li">iTunesConnect</h4><p name="b3cb" class="graf graf--p graf-after--h4">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.</p><figure tabindex="0" contenteditable="false" name="54e3" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 406px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 57.9%;"></div><img class="graf-image" data-image-id="1*6wYSgxnP_dvyTQ-P9nZkoA.jpeg" data-width="806" data-height="467" src="https://cdn-images-1.medium.com/max/800/1*6wYSgxnP_dvyTQ-P9nZkoA.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="3b4a" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">You will need to create a new app on your iTune connect account on </strong><a href="https://appstoreconnect.apple.com/"  class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">https://appstoreconnect.apple.com/</a></p><figure tabindex="0" contenteditable="false" name="f35f" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 389px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 55.60000000000001%;"></div><img class="graf-image" data-image-id="1*8HNgbEc-nr67yEpXjzttRg.jpeg" data-width="806" data-height="448" src="https://cdn-images-1.medium.com/max/800/1*8HNgbEc-nr67yEpXjzttRg.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Create new app in iTunesConnect</figcaption></figure><h3 name="8d1c" class="graf graf--h3 graf-after--figure">Conclusion</h3><p name="3275" class="graf graf--p graf-after--h3 graf--trailing">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.</p></div></div></section><section name="d359" class="section section--body section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><h3 name="5f29" class="graf graf--h3 graf--leading">References</h3><ul class="postList"><li name="0070" class="graf graf--li graf-after--h3"><a href="https://ionicframework.com/docs/publishing/play-store"  class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">https://ionicframework.com/docs/publishing/play-store</a></li></ul><h3 name="476a" class="graf graf--h3 graf-after--li">Next Steps</h3><p name="d7bd" class="graf graf--p graf-after--h3">Now that you have learned the implementation of Local Notifications in Ionic 4, you can also try</p><ul class="postList"><li name="39ea" class="graf graf--li graf-after--p">Ionic 4 Payment Gateways&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-stripe-payment-integration-with-firebase-for-apps-and-pwa/17"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Stripe</a> | <a href="https://enappd.com/blog/ionic-4-paypal-payment-integration-for-apps-and-pwa/16"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">PayPal</a> | <a href="https://enappd.com/blog/how-to-integrate-apple-pay-in-ionic-4-apps/21"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Apple Pay</a> | <a href="https://enappd.com/blog/how-to-integrate-razorpay-in-ionic-4-apps-and-pwa/20"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">RazorPay</a></li><li name="8665" class="graf graf--li graf-after--li">Ionic 4 Charts with&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-charts-using-google-charts/66"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Google Charts </a>| <a href="https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-3/60"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">HighCharts</a> | <a href="https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-2/54"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">d3.js</a> | <a href="https://enappd.com/blog/charts-in-ionic-4-apps-and-pwa-part-1/52"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Chart.js</a></li><li name="fd9c" class="graf graf--li graf-after--li">Ionic 4 Social Logins&#8202;—&#8202;<a href="https://enappd.com/blog/facebook-login-in-ionic-4-apps-using-firebase/25"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Facebook</a> | <a href="https://enappd.com/blog/google-login-in-ionic-4-apps-using-firebase/39"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Google</a> | <a href="https://enappd.com/blog/twitter-login-in-ionic-4-apps-using-firebase/24"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Twitter</a></li><li name="31b6" class="graf graf--li graf-after--li">Ionic 4 Authentications&#8202;—&#8202;<a href="https://enappd.com/blog/email-authentication-with-firebase-in-ionic-4/38"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Via Email</a> | <a href="https://enappd.com/blog/firebase-anonymous-login-in-ionic-4/37"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Anonymous</a></li><li name="4a75" class="graf graf--li graf-after--li">Ionic 4 Features&#8202;—&#8202;<a href="https://enappd.com/blog/using-geolocation-geocoding-and-reverse-geocoding-in-ionic-4/45"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Geolocation</a> | <a href="https://enappd.com/blog/qr-code-scanning-and-optical-character-recognition-ocr-in-ionic-4/9"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">QR Code reader </a>| <a href="https://enappd.com/blog/best-fitness-plugins-for-ionic-4-how-to-use-pedometer/15"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Pedometer</a></li><li name="819d" class="graf graf--li graf-after--li">Media in Ionic 4&#8202;—&#8202;<a href="https://enappd.com/blog/spotify-like-music-in-ionic-4-apps/48"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Audio</a> | <a href="https://enappd.com/blog/adding-video-player-in-ionic-4-app/64"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Video</a> | <a href="https://enappd.com/blog/image-picker-in-ionic-4-app/67"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Image Picker</a> | <a href="https://enappd.com/blog/how-to-add-image-cropper-in-ionic-4-app/68"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Image Cropper</a></li><li name="eee3" class="graf graf--li graf-after--li">Ionic 4 Essentials&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-save-and-retrieve-data-locally-on-device/59"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Native Storage</a> | <a href="https://enappd.com/blog/how-to-translate-in-ionic-4-globalization-internationalization-and-localization/11"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Translations</a> | <a href="https://enappd.com/blog/rtl-right-to-left-use-in-ionic-4/50"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">RTL</a></li><li name="8bbe" class="graf graf--li graf-after--li">Ionic 4 messaging&#8202;—&#8202;<a href="https://enappd.com/blog/implement-ionic-4-firebase-push/34"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Firebase Push</a> | <a href="https://enappd.com/blog/automatically-read-sms-in-ionic-4-apps/42"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Reading SMS</a></li><li name="2467" class="graf graf--li graf-after--li">Ionic 4 with Firebase&#8202;—&#8202;<a href="https://enappd.com/blog/how-to-integrate-firebase-in-ionic-4-apps/23"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Basics</a> | <a href="https://enappd.com/blog/firebase-with-ionic-4-hosting-auth-and-db-connection/58"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Hosting and DB</a> | <a href="https://enappd.com/blog/firebase-cloud-functions-in-ionic-4-complete-guide/32"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Cloud functions</a></li></ul><p name="2c47" class="graf graf--p graf-after--li">If you need a base to start your next Ionic 4 app, you can make your next awesome app using <a href="https://store.enappd.com/product/ionic-4-full-app"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Ionic 4 Full App</a></p><figure tabindex="0" contenteditable="false" name="7d3d" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 560px; max-height: 353px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 63%;"></div><img class="graf-image" data-image-id="1*TlVtf7LHz5b93esF68yG6A.jpeg" data-width="560" data-height="353" src="https://cdn-images-1.medium.com/max/800/1*TlVtf7LHz5b93esF68yG6A.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Ionic 4 Full&nbsp;App</figcaption></figure><p name="e164" class="graf graf--p graf--empty graf-after--figure graf--trailing" ><br></p></div></div></section></div></article></main>