{"id":4854,"date":"2023-02-22T14:48:05","date_gmt":"2023-02-22T19:48:05","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=4854"},"modified":"2023-02-24T11:30:19","modified_gmt":"2023-02-24T16:30:19","slug":"building-and-releasing-your-capacitor-ios-app","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/building-and-releasing-your-capacitor-ios-app","title":{"rendered":"Building And Releasing Your Capacitor iOS App"},"content":{"rendered":"\n<div class=\"wp-block-jetpack-markdown\"><blockquote>\n<p>This is a guest post from Simon Grimm, Ionic Developer Expert and educator at <a href=\"https:\/\/ionicacademy.com\/\">the Ionic Academy<\/a>, an online school with 70+ video courses focused entirely on building awesome mobile apps with Ionic!<\/p>\n<\/blockquote>\n<\/div>\n\n\n\n<p>Have you just built your first<a href=\"https:\/\/ionicframework.com\/docs\/react\"> Ionic App<\/a>, but you have no idea how to submit it to the App Store? Then you\u2019ve come to the right place.&nbsp;<\/p>\n\n\n\n<p>In this guide, you will learn all the steps required to go from an Ionic app to a released iOS app. You don\u2019t need to have any previous experience with building native mobile apps to follow along. All you need is basic knowledge of how to build modern web applications!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Prerequisite<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">What is Capacitor?<\/h3>\n\n\n\n<p><a href=\"https:\/\/capacitorjs.com\/\">Capacitor<\/a> is a native runtime that gives modern web application access to native APIs such as Camera, File System, Notifications, Network, GPS, and more using JavaScript. In a nutshell, Ionic is for building UIs, and <a href=\"https:\/\/ionic.io\/blog\/capacitor-everything-youve-ever-wanted-to-know\">Capacitor<\/a> makes it possible to build and run your app on a native device. It comes with a very slim API, so a lot of the build and deploy process we cover is actually just using the native iOS and <a href=\"https:\/\/ionic.io\/blog\/building-and-releasing-your-capacitor-android-app\">Android<\/a> tools!<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"814\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/capacitor-1-1024x814.png\" alt=\"\" class=\"wp-image-4856 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/capacitor-1-1024x814.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/capacitor-1-300x238.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/capacitor-1-768x610.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/capacitor-1.png 1233w\" data-sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/814;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"814\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/capacitor-1-1024x814.png\" alt=\"\" class=\"wp-image-4856\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/capacitor-1-1024x814.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/capacitor-1-300x238.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/capacitor-1-768x610.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/capacitor-1.png 1233w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Install Native Tools<\/h3>\n\n\n\n<p>To later build our app, we rely on the tools that native developers use as well. This means on a Mac, you should install Xcode which you can download from the App Store.<\/p>\n\n\n\n<p>After downloading Xcode, please also make sure to install the command line tools with the following command:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-shell\">xcode-select --install<\/code><\/pre>\n\n\n\n<p>You will also need to be enrolled in the <a href=\"https:\/\/developer.apple.com\/\">Apple Developer Program<\/a> which costs $99\/year in order to submit your app to the store.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">App Preparation<\/h3>\n\n\n\n<p>For simplicity, I will explain all steps based on a sample<a href=\"https:\/\/ionicframework.com\/docs\/react\/quickstart\"> Ionic React app<\/a>.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Your Capacitor Configuration<\/h3>\n\n\n\n<p>Your project already comes with a capacitor.config.ts in which you can define some general settings.<\/p>\n\n\n\n<p>First, you should make sure that you replace the default appId with an actual bundle ID that matches your company\/app name. This is a unique identifier that we will later use for Android (and I have a <a href=\"https:\/\/ionic.io\/blog\/building-and-releasing-your-capacitor-android-app\">whole other blog post<\/a> dedicated just to creating and shipping an Android app), so change it to something specific to your company or project.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Adding Native Platforms with Capacitor<\/h3>\n\n\n\n<p>To build your Ionic app with Capacitor, we need to create a native project for iOS.<\/p>\n\n\n\n<p>Make sure you also run the build command before, because Capacitor will <strong>sync your web build to the native platform folder<\/strong> &#8211; which is part of the magic of Capacitor.<\/p>\n\n\n\n<p>Later on, you will simply update your code and sync the changes again. Get started by running:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">ionic build\nionic cap add ios<\/code><\/pre>\n\n\n\n<p>At this point, you can open your native projects and deploy the app to a device or simulator:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">ionic cap open ios<\/code><\/pre>\n\n\n\n<p>You will be asked which device you want to use, and once it&#8217;s done you can see your app on a device &#8211; and it&#8217;s automatically updated when you change the code of your Ionic app!<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"542\" height=\"1024\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/capacitor-device-preview-542x1024.png\" alt=\"\" class=\"wp-image-4857 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/capacitor-device-preview-542x1024.png 542w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/capacitor-device-preview-159x300.png 159w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/capacitor-device-preview.png 565w\" data-sizes=\"auto, (max-width: 542px) 100vw, 542px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 542px; --smush-placeholder-aspect-ratio: 542\/1024;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"542\" height=\"1024\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/capacitor-device-preview-542x1024.png\" alt=\"\" class=\"wp-image-4857\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/capacitor-device-preview-542x1024.png 542w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/capacitor-device-preview-159x300.png 159w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/capacitor-device-preview.png 565w\" sizes=\"auto, (max-width: 542px) 100vw, 542px\" \/><\/noscript><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Generating Splash Screen and App Icon<\/h3>\n\n\n\n<p>Every app needs a cool icon and splash screen, which is the first screen users see when starting your app later. For this task, we can use the Capacitor assets plugin, and to get started you should add an icon to a new <strong><code>assets<\/code><\/strong> folder at the root of your project:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">assets\/\n\u251c\u2500\u2500 icon.png\n\u2514\u2500\u2500 splash.png<\/code><\/pre>\n\n\n\n<p>Make sure you are using the right dimensions for those files:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>assets\/icon.(png|jpg) must be at least 1024\u00d71024px<\/li>\n\n\n\n<li>assets\/splash.(png|jpg) must be at least 2732\u00d72732px<\/li>\n<\/ul>\n\n\n\n<p>Now we can install the Capacitor assets plugin and run the generate command in our project:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-shell\">npm install @capacitor\/assets\nnpx capacitor-assets generate<\/code><\/pre>\n\n\n\n<p>This will generate the icon and splash in different dimensions, and if you get a success message, you can see that the images were updated in your native projects:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"729\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-assets-1024x729.png\" alt=\"\" class=\"wp-image-4858 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-assets-1024x729.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-assets-300x214.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-assets-768x547.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-assets.png 1173w\" data-sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/729;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"729\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-assets-1024x729.png\" alt=\"\" class=\"wp-image-4858\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-assets-1024x729.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-assets-300x214.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-assets-768x547.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-assets.png 1173w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/figure>\n\n\n\n<p>Now let\u2019s get that app released!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">iOS App Store Deployment<\/h2>\n\n\n\n<p>To publish your app on the <a href=\"https:\/\/www.apple.com\/app-store\/\">Apple App Store<\/a>, you also need to sign your application with a specific key and profile that\u2019s bound to your App Store account.<\/p>\n\n\n\n<p>To create those assets and be allowed to release apps, you need to be enrolled in the <a href=\"https:\/\/developer.apple.com\/programs\/\">Apple Developer Program<\/a> and you need an actual Mac to build the native package, unless you are using a cloud build which <a href=\"https:\/\/useappflow.com\/\">Appflow<\/a> offers.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Build your App with Xcode<\/h3>\n\n\n\n<p>To upload our app we first need to create an Archive from our app using Xcode, so let\u2019s begin by creating our web build, syncing it to the iOS platform, and then opening Xcode:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-shell\">ionic cap build ios --prod\nionic cap open ios<\/code><\/pre>\n\n\n\n<p>Within Xcode we now need to set up the app signing, which requires you to be part of a development team that\u2019s enrolled in the Apple Developer Program.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"723\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-signing-1024x723.png\" alt=\"\" class=\"wp-image-4866 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-signing-1024x723.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-signing-300x212.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-signing-768x542.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-signing.png 1144w\" data-sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/723;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"723\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-signing-1024x723.png\" alt=\"\" class=\"wp-image-4866\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-signing-1024x723.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-signing-300x212.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-signing-768x542.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-signing.png 1144w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/figure>\n\n\n\n<p>For this, you need to select the Signing &amp; Capabilities tab, from where you can first log in with your Apple ID and then select the team from your account.<\/p>\n\n\n\n<p>It\u2019s usually recommended to check \u2018Automatically Manage Signing\u2019 unless you have reasons to change it, like running Xcode in a CI\/CD environment or having custom profiles.<\/p>\n\n\n\n<p>Now we need to select Product \u2192 Archive from the top menu, which will bundle all the assets of the iOS app and open a new window with all the previous archives we have built.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"471\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-archives-1024x471.png\" alt=\"\" class=\"wp-image-4867 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-archives-1024x471.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-archives-300x138.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-archives-768x354.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-archives.png 1112w\" data-sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/471;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"471\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-archives-1024x471.png\" alt=\"\" class=\"wp-image-4867\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-archives-1024x471.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-archives-300x138.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-archives-768x354.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-archives.png 1112w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/figure>\n\n\n\n<p>Make sure to check your details again on this page, which shows the bundle identifier and version of your app \u2013 you don\u2019t want to submit an old build of your app!<\/p>\n\n\n\n<p>If everything looks good, proceed by clicking Distribute App.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"553\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-distribution-1024x553.png\" alt=\"\" class=\"wp-image-4868 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-distribution-1024x553.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-distribution-300x162.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-distribution-768x414.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-distribution.png 1112w\" data-sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/553;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"553\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-distribution-1024x553.png\" alt=\"\" class=\"wp-image-4868\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-distribution-1024x553.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-distribution-300x162.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-distribution-768x414.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-distribution.png 1112w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/figure>\n\n\n\n<p>Keep the settings at App Store Connect if you simply want to release a standard iOS app. Other settings cover enterprise profiles and distribution through other channels, but nothing we need for a regular app.<\/p>\n\n\n\n<p>In the next step, keep the settings at Upload, as you don\u2019t want to manually upload the bundle later. This can only be helpful if you want to distribute the bundle by using the command line tools directly or using a different uploader.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"553\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-uploader-1024x553.png\" alt=\"\" class=\"wp-image-4869 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-uploader-1024x553.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-uploader-300x162.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-uploader-768x414.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-uploader.png 1112w\" data-sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/553;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"553\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-uploader-1024x553.png\" alt=\"\" class=\"wp-image-4869\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-uploader-1024x553.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-uploader-300x162.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-uploader-768x414.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-uploader.png 1112w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/figure>\n\n\n\n<p>The next step takes a moment to load as we are getting closer to the actual upload. Now we need to connect the app we want to upload to an app in the <a href=\"https:\/\/developer.apple.com\/app-store-connect\/\">App Store Connect portal<\/a>.<\/p>\n\n\n\n<p>App Store Connect is a suite of tools to manage your apps, check their statistics, or use the TestFlight testing program.<\/p>\n\n\n\n<p>You can set up an app in App Store Connect manually, but we can also let Xcode handle this task for us now.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"533\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-appstore-connect-1024x533.png\" alt=\"\" class=\"wp-image-4870 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-appstore-connect-1024x533.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-appstore-connect-300x156.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-appstore-connect-768x400.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-appstore-connect.png 1068w\" data-sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/533;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"533\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-appstore-connect-1024x533.png\" alt=\"\" class=\"wp-image-4870\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-appstore-connect-1024x533.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-appstore-connect-300x156.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-appstore-connect-768x400.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-appstore-connect.png 1068w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/figure>\n\n\n\n<p>Simply give your app a name and use the bundle identifier you choose for it.<\/p>\n\n\n\n<p>Be aware that this stage can be tricky. A few issues to look out for (and how you can fix them):<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Failed to register bundle identifier \u2013 If you get this error cancel the upload and go back to the general settings in Xcode, rename your bundle identifier, then re-archive the app from Product \u2192 Archive<\/li>\n\n\n\n<li>App name trademark error \u2013 Someone has already trademarked the name you\u2019re trying to use, so pick a different name<\/li>\n<\/ol>\n\n\n\n<p>Leave all the defaults checked in the App Store Connect distribution options screen, and also keep Automatically manage signing selected unless you have a reason to change it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"533\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-distribution-signing-1024x533.png\" alt=\"\" class=\"wp-image-4871 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-distribution-signing-1024x533.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-distribution-signing-300x156.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-distribution-signing-768x400.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-distribution-signing.png 1068w\" data-sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/533;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"533\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-distribution-signing-1024x533.png\" alt=\"\" class=\"wp-image-4871\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-distribution-signing-1024x533.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-distribution-signing-300x156.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-distribution-signing-768x400.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-distribution-signing.png 1068w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/figure>\n\n\n\n<p>When the next screen comes up, you are just one step away from uploading. This screen presents a summary of your app\u2019s information and the content of the ipa file \u2013 the file extension of an iOS bundle.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"533\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-upload-summary-1024x533.png\" alt=\"\" class=\"wp-image-4872 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-upload-summary-1024x533.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-upload-summary-300x156.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-upload-summary-768x400.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-upload-summary.png 1068w\" data-sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/533;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"533\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-upload-summary-1024x533.png\" alt=\"\" class=\"wp-image-4872\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-upload-summary-1024x533.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-upload-summary-300x156.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-upload-summary-768x400.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-upload-summary.png 1068w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/figure>\n\n\n\n<p>Click that upload button, wait a few minutes, and you should see a green checkmark on the screen and a link to monitor the status of your app on App Store Connect.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"533\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-success-1024x533.png\" alt=\"\" class=\"wp-image-4873 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-success-1024x533.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-success-300x156.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-success-768x400.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-success.png 1068w\" data-sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/533;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"533\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-success-1024x533.png\" alt=\"\" class=\"wp-image-4873\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-success-1024x533.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-success-300x156.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-success-768x400.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-success.png 1068w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/figure>\n\n\n\n<p>The link will take you to App Store Connect, where we now need to add some general information about our app before it can be released.<\/p>\n\n\n\n<p>If you\u2019ve come this far, the rest is just working off some tasks, and you can close Xcode for now.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Submitting your iOS App<\/h2>\n\n\n\n<p>Within App Store Connect, you should now find a new box in the Apps dashboard with the name of the app you just uploaded.<\/p>\n\n\n\n<p>I do have a bunch of unsuccessful apps in there already, but the most important one is the My File App that I uploaded from Xcode.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"536\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/appstore-connect-apps-1024x536.png\" alt=\"\" class=\"wp-image-4874 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/appstore-connect-apps-1024x536.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/appstore-connect-apps-300x157.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/appstore-connect-apps-768x402.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/appstore-connect-apps.png 1241w\" data-sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/536;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"536\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/appstore-connect-apps-1024x536.png\" alt=\"\" class=\"wp-image-4874\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/appstore-connect-apps-1024x536.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/appstore-connect-apps-300x157.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/appstore-connect-apps-768x402.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/appstore-connect-apps.png 1241w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/figure>\n\n\n\n<p>Most likely, your app shows no icon as well, which indicates that we have some more work to do!<\/p>\n\n\n\n<p>Select your app, and you will come to the details of that app.<\/p>\n\n\n\n<p>At this point the status of your app is \u2018Prepare for Submission,\u2019 which means you need to add a bunch of information on that page like description, keywords, and URLs but most importantly also a minimum of 3 app screenshots in the right format!<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"827\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/appstore-connect-submission-1024x827.png\" alt=\"\" class=\"wp-image-4875 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/appstore-connect-submission-1024x827.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/appstore-connect-submission-300x242.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/appstore-connect-submission-768x620.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/appstore-connect-submission.png 1444w\" data-sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/827;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"827\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/appstore-connect-submission-1024x827.png\" alt=\"\" class=\"wp-image-4875\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/appstore-connect-submission-1024x827.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/appstore-connect-submission-300x242.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/appstore-connect-submission-768x620.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/appstore-connect-submission.png 1444w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/figure>\n\n\n\n<p>There are tools to help you with this (I even created a service called <a href=\"https:\/\/appstorekit.com\/\">AppstoreKit<\/a> for that in the past), just make sure you create the screenshots following the <a href=\"https:\/\/help.apple.com\/app-store-connect\/#\/devd274dd925\">Apple screenshot specifications<\/a>.<\/p>\n\n\n\n<p>Now we also need to attach the build we uploaded from Xcode to the submission.<\/p>\n\n\n\n<p>Simply scroll down to the Build section on the same page and click on \u2018Add Build.\u2019<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"821\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/appstore-connect-add-build-1024x821.png\" alt=\"\" class=\"wp-image-4876 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/appstore-connect-add-build-1024x821.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/appstore-connect-add-build-300x240.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/appstore-connect-add-build-768x615.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/appstore-connect-add-build.png 1400w\" data-sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/821;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"821\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/appstore-connect-add-build-1024x821.png\" alt=\"\" class=\"wp-image-4876\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/appstore-connect-add-build-1024x821.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/appstore-connect-add-build-300x240.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/appstore-connect-add-build-768x615.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/appstore-connect-add-build.png 1400w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/figure>\n\n\n\n<p>If your build is not yet showing up, you can check the TestFlight tab, where you find the status of your uploads. It takes a few minutes after upload until your app is ready, and you usually also receive an email once it has completed processing.<\/p>\n\n\n\n<p>Right now it looks like the build has Missing Compliance, but you can select it despite the warning and click \u2018Done\u2019 to add it.<\/p>\n\n\n\n<p>You can get rid of the warning by clicking on \u2018Manage\u2019 next to the warning and answering the questions about the compliance of your app.<\/p>\n\n\n\n<p><em>Note: You can get rid of this warning upfront by <a href=\"https:\/\/stackoverflow.com\/questions\/35841117\/missing-compliance-status-in-testflight\">adding the ITSAppUsesNonExemptEncryption to your plist<\/a> in case your app is not using any kind of special encryption<\/em>.<\/p>\n\n\n\n<p>Fill out all the other fields and pages about pricing and availability of your app, and then proceed by clicking \u2018Add for Review\u2019 at the top of the page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"609\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/appstore-add-review-1024x609.png\" alt=\"\" class=\"wp-image-4877 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/appstore-add-review-1024x609.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/appstore-add-review-300x179.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/appstore-add-review-768x457.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/appstore-add-review.png 1383w\" data-sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/609;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"609\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/appstore-add-review-1024x609.png\" alt=\"\" class=\"wp-image-4877\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/appstore-add-review-1024x609.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/appstore-add-review-300x179.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/appstore-add-review-768x457.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/appstore-add-review.png 1383w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/figure>\n\n\n\n<p>If some errors arise, make sure to fix the tasks before you try the submission again.<\/p>\n\n\n\n<p>Otherwise, it\u2019s time to wait \u2013 congratulations on submitting your first Ionic React app to the iOS App Store! \ud83c\udf89<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Updating your App<\/h2>\n\n\n\n<p>Let\u2019s jump forward in time a few weeks (honestly, sometimes it\u2019s just a minute until the next release) when you want to update your Ionic app. This process is the same in many aspects, but a lot faster because you don\u2019t have to fill out all the general information of your app again.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">iOS App Update Process<\/h3>\n\n\n\n<p>To update your iOS version, you need to change the version or if you just want to upload another build (because the previous build didn\u2019t work for some reason), you can also only update the Build number inside Xcode.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"723\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-update-1024x723.png\" alt=\"\" class=\"wp-image-4878 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-update-1024x723.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-update-300x212.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-update-768x542.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-update.png 1144w\" data-sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/723;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"723\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-update-1024x723.png\" alt=\"\" class=\"wp-image-4878\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-update-1024x723.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-update-300x212.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-update-768x542.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/xcode-update.png 1144w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/figure>\n\n\n\n<p>What follows next is the same procedure as when you released the first version of your Ionic app:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Create an Archive through Xcode<\/li>\n\n\n\n<li>Upload it to App Store Connect<\/li>\n\n\n\n<li>Fill out update notes \/ changed information<\/li>\n\n\n\n<li>Submit for review<\/li>\n<\/ol>\n\n\n\n<p>Keep in mind that updates also go through the review process, so any update through the store will take some time between hours and days, which can be pretty long if there is a major bug in your app.<\/p>\n\n\n\n<p>There\u2019s actually a feature called <a href=\"https:\/\/ionic.io\/docs\/appflow\/deploy\/intro\">live updates within Appflow<\/a> that makes your life a lot easier, but more on that in a second.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Managing Settings with Trapeze<\/h3>\n\n\n\n<p>Although Capacitor will never magically overwrite your native projects (like Cordova did!), there is now a handy package called <a href=\"https:\/\/trapeze.dev\/\">Trapeze<\/a> which allows applying changes to your projects based on a YAML file.<\/p>\n\n\n\n<p>Especially if you run your builds on a server, Trapeze can automate the task of updating native project settings with a single command based on your configuration.<\/p>\n\n\n\n<p>You can also <a href=\"https:\/\/youtu.be\/lYEkdSn7uFw?t=1269\">check out my video if you want to see Trapeze in action<\/a>, if all of this sounds theoretical!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Live Updates with Appflow<\/h3>\n\n\n\n<p>Now wouldn&#8217;t it be nice if you didn&#8217;t have to worry about builds, signing, upload, or even <strong>app store review times<\/strong> anymore? Well, all of that is actually possible with<a href=\"https:\/\/useappflow.com\/\"> Appflow<\/a>, a paid cloud platform for teams building any kind of mobile applications &#8211; yes, Appflow can build Cordova, Capacitor, and even React Native and traditional iOS and Android apps!<\/p>\n\n\n\n<p>Appflow can manage your signing keys, connect to your repository and automatically build your native iOS or Android app after pushing to a specific branch. By defining different pipelines, you can set up <strong>powerful automations<\/strong>, like automatically uploading a new build to Google or Apple after it&#8217;s been built in the cloud.<\/p>\n\n\n\n<p>On top of that, you get access to a feature called <strong>live updates<\/strong>:<\/p>\n\n\n\n<p>With live updates, you can actually skip the app store review process because apps connected with Appflow can load their web sources from a remote server.<\/p>\n\n\n\n<p>There&#8217;s also an<a href=\"https:\/\/ionicacademy.com\/\"> in-depth look at Appflow inside the Ionic Academy<\/a>, so if you want to learn how to use it or build even better Ionic React apps, become a member and get immediate access to 70+ video courses, app templates and our private community of Ionic developers.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Parting Thoughts<\/h2>\n\n\n\n<p>While it can seem like a complex process, building, signing, and releasing your app is actually a lot more approachable than you might think. Missed the guide on how to release your Android app? <a href=\"https:\/\/ionic.io\/blog\/building-and-releasing-your-capacitor-android-app\">Check it out here!<\/a>&nbsp;<\/p>\n\n\n\n<p>Looking to take your Ionic knowledge ever further? Check out <a href=\"https:\/\/ionicacademy.com\/\">Ionic Academy<\/a>, which has helped hundreds of developers build and release beautiful, performant apps.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Have you just built your first Ionic App, but you have no idea how to submit it to the App Store? Then you\u2019ve come to the right place.&nbsp; In this guide, you will learn all the steps required to go from an Ionic app to a released iOS app. You don\u2019t need to have any [&hellip;]<\/p>\n","protected":false},"author":11,"featured_media":4959,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[124],"tags":[151],"class_list":["post-4854","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-capacitor"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Building And Releasing Your Capacitor iOS App - Ionic Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/building-and-releasing-your-capacitor-ios-app\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building And Releasing Your Capacitor iOS App\" \/>\n<meta property=\"og:description\" content=\"Have you just built your first Ionic App, but you have no idea how to submit it to the App Store? Then you\u2019ve come to the right place.&nbsp; In this guide, you will learn all the steps required to go from an Ionic app to a released iOS app. You don\u2019t need to have any [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/building-and-releasing-your-capacitor-ios-app\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-22T19:48:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-24T16:30:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/cap-ios-feature-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2240\" \/>\n\t<meta property=\"og:image:height\" content=\"1120\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Simon Grimm\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@schlimmson\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Simon Grimm\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/building-and-releasing-your-capacitor-ios-app#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/building-and-releasing-your-capacitor-ios-app\"},\"author\":{\"name\":\"Simon Grimm\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/24d44b251756bd6488dcb741eec0bef6\"},\"headline\":\"Building And Releasing Your Capacitor iOS App\",\"datePublished\":\"2023-02-22T19:48:05+00:00\",\"dateModified\":\"2023-02-24T16:30:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/building-and-releasing-your-capacitor-ios-app\"},\"wordCount\":2248,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/building-and-releasing-your-capacitor-ios-app#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/cap-ios-feature-image.png\",\"keywords\":[\"Capacitor\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/building-and-releasing-your-capacitor-ios-app#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/building-and-releasing-your-capacitor-ios-app\",\"url\":\"https:\/\/ionic.io\/blog\/building-and-releasing-your-capacitor-ios-app\",\"name\":\"Building And Releasing Your Capacitor iOS App - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/building-and-releasing-your-capacitor-ios-app#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/building-and-releasing-your-capacitor-ios-app#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/cap-ios-feature-image.png\",\"datePublished\":\"2023-02-22T19:48:05+00:00\",\"dateModified\":\"2023-02-24T16:30:19+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/building-and-releasing-your-capacitor-ios-app#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/building-and-releasing-your-capacitor-ios-app\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/building-and-releasing-your-capacitor-ios-app#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/cap-ios-feature-image.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/cap-ios-feature-image.png\",\"width\":2240,\"height\":1120},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/building-and-releasing-your-capacitor-ios-app#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Building And Releasing Your Capacitor iOS App\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/24d44b251756bd6488dcb741eec0bef6\",\"name\":\"Simon Grimm\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/08\/simon-150x150.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/08\/simon-150x150.jpg\",\"caption\":\"Simon Grimm\"},\"sameAs\":[\"https:\/\/x.com\/schlimmson\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/schlimmson\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Building And Releasing Your Capacitor iOS App - Ionic Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/building-and-releasing-your-capacitor-ios-app","og_locale":"en_US","og_type":"article","og_title":"Building And Releasing Your Capacitor iOS App","og_description":"Have you just built your first Ionic App, but you have no idea how to submit it to the App Store? Then you\u2019ve come to the right place.&nbsp; In this guide, you will learn all the steps required to go from an Ionic app to a released iOS app. You don\u2019t need to have any [&hellip;]","og_url":"https:\/\/ionic.io\/blog\/building-and-releasing-your-capacitor-ios-app","og_site_name":"Ionic Blog","article_published_time":"2023-02-22T19:48:05+00:00","article_modified_time":"2023-02-24T16:30:19+00:00","og_image":[{"width":2240,"height":1120,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/cap-ios-feature-image.png","type":"image\/png"}],"author":"Simon Grimm","twitter_card":"summary_large_image","twitter_creator":"@schlimmson","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Simon Grimm","Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/building-and-releasing-your-capacitor-ios-app#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/building-and-releasing-your-capacitor-ios-app"},"author":{"name":"Simon Grimm","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/24d44b251756bd6488dcb741eec0bef6"},"headline":"Building And Releasing Your Capacitor iOS App","datePublished":"2023-02-22T19:48:05+00:00","dateModified":"2023-02-24T16:30:19+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/building-and-releasing-your-capacitor-ios-app"},"wordCount":2248,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/building-and-releasing-your-capacitor-ios-app#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/cap-ios-feature-image.png","keywords":["Capacitor"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/building-and-releasing-your-capacitor-ios-app#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/building-and-releasing-your-capacitor-ios-app","url":"https:\/\/ionic.io\/blog\/building-and-releasing-your-capacitor-ios-app","name":"Building And Releasing Your Capacitor iOS App - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/building-and-releasing-your-capacitor-ios-app#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/building-and-releasing-your-capacitor-ios-app#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/cap-ios-feature-image.png","datePublished":"2023-02-22T19:48:05+00:00","dateModified":"2023-02-24T16:30:19+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/building-and-releasing-your-capacitor-ios-app#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/building-and-releasing-your-capacitor-ios-app"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/building-and-releasing-your-capacitor-ios-app#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/cap-ios-feature-image.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/cap-ios-feature-image.png","width":2240,"height":1120},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/building-and-releasing-your-capacitor-ios-app#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Building And Releasing Your Capacitor iOS App"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/24d44b251756bd6488dcb741eec0bef6","name":"Simon Grimm","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/08\/simon-150x150.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/08\/simon-150x150.jpg","caption":"Simon Grimm"},"sameAs":["https:\/\/x.com\/schlimmson"],"url":"https:\/\/ionic.io\/blog\/author\/schlimmson"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/02\/cap-ios-feature-image.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/4854","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=4854"}],"version-history":[{"count":6,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/4854\/revisions"}],"predecessor-version":[{"id":4949,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/4854\/revisions\/4949"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/4959"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=4854"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=4854"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=4854"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}