Tools: How to Build and Test iOS Apps on a Physical Phone: Expo EAS and Apple TestFlight (Part 1/3)

Part 1 — Identity & Setup ## Step 1/7 : Install and log in to EAS ## Step 2/7 : Initialize EAS in your project ## Step 3/7 : Verify app.json (or app.config.*) ## Step 4/7: Define build Profiles in eas.json ## Step 5/7: Add the Corresponding submit Profiles ## Step 6/7: Channels and OTA (Over the Air Updates) ## Step 7/7: Check into remote GitHub So you have turned a bright idea into a release-ready iOS app, time to test it properly by friends and family on their physical phones! This 3-part article will explain how we can go from an app created on our PC/laptop to the Apple App Store, via an app called TestFlight which enables external testers to use the preview version of our app. The analogy (from this article) This part connects your local project, Expo, and Apple so they all agree on your app’s identity. This links your repo to an Expo project. Make sure these two things are correct: Regardless of a build profile (eg "preview" or "production"), there are two types of builds: We are building the latter so we can download it via TestFlight. Also, it is useful to auto increment the build number with every EAS build The convention is to use EAS remote build number instead of keeping tracks of it ourselves: In this system, build number is a single counter tied to your Project ID and Platform (iOS), not to a specific build profile. This means, both will both increase the same build number. Make sure the entries are available, even if empty. Otherwise the build will give errors. Final eas.json can be found in this GitHub repository. Since we have specify different channels for each build profile, we can send code updates (bug fixes, small changes) over the air (OTA) via the channels to phones that already have the app installed, without having to resubmit to the App Store. You can choose to skip this step, but EAS will give a warning. Run the followings for this function Next, we are ready to build our app! Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse COMMAND_BLOCK: npm i -g eas-cli eas login Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: npm i -g eas-cli eas login COMMAND_BLOCK: npm i -g eas-cli eas login CODE_BLOCK: eas init Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: "expo": { "name": "oauth-pro2", "ios": { "bundleIdentifier": "com.cathyapp1234.oauthpro2", }, } Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: "expo": { "name": "oauth-pro2", "ios": { "bundleIdentifier": "com.cathyapp1234.oauthpro2", }, } CODE_BLOCK: "expo": { "name": "oauth-pro2", "ios": { "bundleIdentifier": "com.cathyapp1234.oauthpro2", }, } CODE_BLOCK: "expo": { "extra" : { "eas": { "projectId": "a31c0453-d16e-4818-aa19-d380a5bfc5d4" } } } Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: "expo": { "extra" : { "eas": { "projectId": "a31c0453-d16e-4818-aa19-d380a5bfc5d4" } } } CODE_BLOCK: "expo": { "extra" : { "eas": { "projectId": "a31c0453-d16e-4818-aa19-d380a5bfc5d4" } } } CODE_BLOCK: "distribution": "internal" Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: "distribution": "internal" CODE_BLOCK: "distribution": "internal" CODE_BLOCK: "distribution": "store" Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: "distribution": "store" CODE_BLOCK: "distribution": "store" CODE_BLOCK: "autoIncrement": true, Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: "autoIncrement": true, CODE_BLOCK: "autoIncrement": true, CODE_BLOCK: { "build": { "preview": { "distribution": "store", "channel": "preview", "autoIncrement": true, }, } } Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: { "build": { "preview": { "distribution": "store", "channel": "preview", "autoIncrement": true, }, } } CODE_BLOCK: { "build": { "preview": { "distribution": "store", "channel": "preview", "autoIncrement": true, }, } } CODE_BLOCK: { "cli": { "appVersionSource": "remote" } }, Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: { "cli": { "appVersionSource": "remote" } }, CODE_BLOCK: { "cli": { "appVersionSource": "remote" } }, CODE_BLOCK: eas build --profile preview Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: eas build --profile preview CODE_BLOCK: eas build --profile preview CODE_BLOCK: eas build --profile production Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: eas build --profile production CODE_BLOCK: eas build --profile production CODE_BLOCK: { "submit": { "production": {}, "preview": {} } } Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: { "submit": { "production": {}, "preview": {} } } CODE_BLOCK: { "submit": { "production": {}, "preview": {} } } CODE_BLOCK: npx expo install expo-updates eas update:configure Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: npx expo install expo-updates eas update:configure CODE_BLOCK: npx expo install expo-updates eas update:configure COMMAND_BLOCK: git push origin main Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: git push origin main COMMAND_BLOCK: git push origin main - We (the developers): The brand owners - Our app: The product - EAS (Expo Application Service): The manufacturer + logistics company - Apple App Store: The supermarket - TestFlight: supermarket's tasting room. The product (our app) must be "registered" first before it can be entered in this room - ios.bundleIdentifier This must match what you’ll use in App Store Connect. - extra.eas.projectId This links your local project to Expo EAS. - Ad Hoc Build, binary is on Expo : - Signed and is permitted to be on the App Store