expo / expo

An open-source framework for making universal native apps with React. Expo runs on Android, iOS, and the web.
https://docs.expo.dev
MIT License
32.31k stars 5.12k forks source link

`expo start` opens wrong dev client when multiple dev clients are installed on simulator #25253

Closed evrimfeyyaz closed 9 months ago

evrimfeyyaz commented 9 months ago

Summary

I use two development clients, one uses the staging APIs and the other the production APIs. The staging dev client uses the bundle identifier com.example.devstage and the production dev client uses com.example.devprod.

I use the following code to determine the name and the bundle identifier for the app in app.config.js:

const name = process.env.BUILD_TYPE === 'DEV_STAGE' ? 'Dev Stage Test' : 'Dev Prod Test';
const identifier = process.env.BUILD_TYPE === 'DEV_STAGE' ? 'com.example.devstage' : 'com.example.devprod';

And I have these two scripts in my package.json:

"start:stage": "BUILD_TYPE=DEV_STAGE expo start"
"start:prod": "BUILD_TYPE=DEV_PROD expo start"

I build the two dev clients and install them on an iOS simulator. But no matter what script I use to run expo start, it opens the staging app (com.example.devstage).

What platform(s) does this occur on?

iOS

SDK Version

49

Environment

expo-env-info 1.0.5 environment info: System: OS: macOS 14.0 Shell: 5.9 - /bin/zsh Binaries: Node: 18.14.0 - ~/.nodenv/versions/18.14.0/bin/node Yarn: 1.22.19 - ~/.nodenv/versions/18.14.0/bin/yarn npm: 9.6.7 - ~/.nodenv/versions/18.14.0/bin/npm Watchman: 2023.07.24.00 - /opt/homebrew/bin/watchman Managers: CocoaPods: 1.12.1 - /Users/username/.rbenv/shims/pod SDKs: iOS SDK: Platforms: DriverKit 23.0, iOS 17.0, macOS 14.0, tvOS 17.0, watchOS 10.0 Android SDK: API Levels: 31, 33 Build Tools: 30.0.3, 33.0.0, 33.0.2 System Images: android-33 | Google APIs ARM 64 v8a IDEs: Android Studio: 2022.2 AI-222.4459.24.2221.10121639 Xcode: 15.0.1/15A507 - /usr/bin/xcodebuild npmPackages: expo: ~49.0.15 => 49.0.16 react: 18.2.0 => 18.2.0 react-native: 0.72.6 => 0.72.6 npmGlobalPackages: eas-cli: 5.6.0 Expo Workflow: managed

Minimal reproducible example

Sample repo that implements the following steps: https://github.com/evrimfeyyaz/multiple-dev-clients-test.

  1. Create a new Expo project using npx create-expo-app my-app.
  2. Initialize EAS Build using eas build:configure.
  3. Change your eas.json to this:
    {
    "cli": {
    "version": ">= 5.6.0"
    },
    "build": {
    "dev-stage": {
      "developmentClient": true,
      "distribution": "internal",
      "ios": {
        "simulator": true
      },
      "env": {
        "BUILD_TYPE": "DEV_STAGE"
      }
    },
    "dev-prod": {
      "developmentClient": true,
      "distribution": "internal",
      "ios": {
        "simulator": true
      },
      "env": {
        "BUILD_TYPE": "DEV_PROD"
      }
    },
    },
    }
  4. Rename app.json to app.config.js and replace its contents with this:
    
    const name = process.env.BUILD_TYPE === 'DEV_STAGE' ? 'Dev Stage Test' : 'Dev Prod Test';
    const identifier = process.env.BUILD_TYPE === 'DEV_STAGE' ? 'com.example.devstage' : 'com.example.devprod';

export default { "expo": { "name": name, "slug": "multiple-dev-clients-test", "version": "1.0.0", "orientation": "portrait", "icon": "./assets/icon.png", "userInterfaceStyle": "light", "splash": { "image": "./assets/splash.png", "resizeMode": "contain", "backgroundColor": "#ffffff" }, "assetBundlePatterns": [ "*/" ], "ios": { "supportsTablet": true, "bundleIdentifier": identifier }, "android": { "adaptiveIcon": { "foregroundImage": "./assets/adaptive-icon.png", "backgroundColor": "#ffffff" }, "package": identifier }, "web": { "favicon": "./assets/favicon.png" }, "extra": { "eas": { "projectId": "YOUR_PROJECT_ID" } } } }

5. Don't forget to replace `expo.extra.eas.projectId` with your own EAS project ID.
6. Add these four scripts to your `package.json`:
```json
"start:stage": "BUILD_TYPE=DEV_STAGE expo start",
"start:prod": "BUILD_TYPE=DEV_PROD expo start",
"build:dev-stage": "eas build -p ios --profile dev-stage",
"build:dev-prod": "eas build -p ios --profile dev-prod"
  1. Build the dev clients by running the build:dev-stage and the build:dev-prod scripts, and install them both on the same iOS simulator.
  2. Run start:stage and use the i command to open the app on a simulator. It should work correctly.
  3. Run start:prod and press i. It should incorrectly open com.example.devstage instead of com.example.devprod.
evrimfeyyaz commented 9 months ago

I realized that there is a scheme option in the CLI. I ended up conditionally setting a different scheme for different development clients and using the scheme option for expo start which opens the correct development client.

I wish this were more intuitive though, or at least better documented. Although, it might be that most people only use a single development client, so, this might not be a common use case.