expo-github-action/preview should support generating dev-client QR codes

[thespacemanatee]

Description of the feature

How would you briefly summarise the feature?
The current QR code generated only works for Expo Go builds. Scanning the QR code opens Expo Go (which obviously fails). Should support an option to generate a QR code that opens the development build instead.

Right now we have to manually generate it in the comment parameter as follows:

This pull request was automatically deployed! 🛠️
- Project: **@{projectOwner}/{projectSlug}**
- Channel: **pr-${{ github.event.number }}**
<a href="padlet://expo-development-client/?url=https://u.expo.dev/{redacted}%3Fchannel-name%3Dpr-${{ github.event.number }}">
  <img src="https://qr.expo.dev/development-client?appScheme={redacted}&url=https://u.expo.dev/{redacted}%3Fchannel-name%3Dpr-${{ github.event.number }}" height="200px" width="200px" >
</a>
QR code not working or need a different client? Try the QR code or deep link from the [project page]({projectLink}).

Motivation

Why does this feature should be implemented?
So that we don't have to manually generate the dev-client QR code

Additional context

Can you further explain the feature? E.g., screenshots or real-world examples.

[byCedric]

Hi @thespacemanatee! Do you have the scheme configured in your app.json file? This is used inside expo/expo-github-action/preview to generate the QR code. If you have this defined, it will create a QR code that contains the link format:

exp+SCHEME://expo-development-client/?url=https://u.expo.dev/...

For example, this PR from my monorepo example repo doesn't have the scheme property. Which results in a QR code for Expo Go (link):

See QR code

https://qr.expo.dev/eas-update?projectId=d202a56f-0162-450d-af3b-a2d2e0678594&groupId=d9c656e8-d0e4-454d-abbe-9c17011cf155

But adding the scheme, will set the appScheme property of this URL. That will transform the QR code link into a dev client (link):

See QR code

https://qr.expo.dev/eas-update?projectId=d202a56f-0162-450d-af3b-a2d2e0678594&groupId=d9c656e8-d0e4-454d-abbe-9c17011cf155?appScheme=monorepo

[oscar-b]

But for a dev client build to pick it up properly, it shouldn't include the exp+ part, as far as I could tell when making these links manually. It should just be scheme://, no?

[bndkt]

Came here with the same problem and agree with @oscar-b: I think if the URL would start with scheme:// it would be fine, but the exp+ part leads to iPhone saying, "No usable data found" when scanning the QR code.

[henrymoulton]

@byCedric Is the intention to not change the existing scheme but to add a new scheme to prepend the exp+ just when adding expo dev client?

Separately, I don't think our apps are actually getting the exp+ scheme.

[oscar-b]

@byCedric The ticket is marked with need info, what info is needed here?

[LucasLFurini]

In this case, generating the QR code to dev-client, is it possible to open the app without having the server running in a pc, because when I was using managed workflow, the QA team could only have the expo go app and then scan the QR code and then see the new feature, but is it possible to have the same behaviour with dev-client QR codes?

[ardasatata]

Yea, I just realized this as well, I tried to generate qr code on my PR but on my iPhone it says No usable data found 😢

Edit:
In my case I tried to remove exp+ part from the URL then generate the qr code myself it works tho, should we have an option to omit exp+ from the generated qr?

[byCedric]

Hey all! Sorry for my late response. I was out sick and busy with other work. I saw a few things being discussed here, so let me go through them individually.

Separately, I don't think our apps are actually getting the exp+ scheme.

This is something we use internally within various Expo tools. We do add the exp+<scheme> as scheme to dev client builds, but not to production builds. This is done in the expo-dev-client config plugin (getDefaultScheme).

But, if you all mention that this isn't working, I guess we can't rely on that and we need to find something else for this.

The ticket is marked with need info, what info is needed here?

I was waiting on my initial question related to the scheme, if it was set or not. But you all showed that something else is going on, so I'll take a look at that.

---

I'll circle back to this during the SDK 49 beta release!

[oscar-b]

@byCedric Just for reference, the URL I'm currently generating that works look like this:

myapp.dev://expo-development-client/?url=https://u.expo.dev/id?channel-name=pr-33

Where scheme = myapp.dev

[blimmer]

Reiterating what @ardasatata said above, I would really like to see a flag for the preview action to specify that I want the QR code to open in Expo Go. Today, it always creates exp+scheme-style QR codes, which produce the "no usable data found" error.

So, like others, I'm now turning off the comment feature on the preview action and making my own comment.

- name: 🚀 Create preview
  id: expo_preview
  uses: expo/expo-github-action/preview@v8
  with:
    command: eas update --auto --non-interactive
    comment: false # see the step below for why we do this

# Because of https://github.com/expo/expo-github-action/issues/214, we have to generate our own QR code for now.
# They need to allow publishing a QR code without the schema for ExpoGO to "just work"
- name: 📝 Comment on PR
  uses: edumserrano/find-create-or-update-comment@v1
  with:
    issue-number: ${{ github.event.pull_request.number }}
    body-includes: "<!-- expo-qr-code -->"
    comment-author: "github-actions[bot]"
    body: |
      <!-- expo-qr-code -->

      ### <MY_APP_NAME> Preview

      <table>
      <tr>
        <td><b>Project
        <td><b>Channel
        <td><b>Project Link
      <tr>
        <td>${{ steps.expo_preview.outputs.projectName }}
        <td>${{ steps.preview_channel.outputs.channel }}
        <td><a href="${{ steps.expo_preview.outputs.link }}">${{ steps.expo_preview.outputs.link }}</a>
      </table>

      -----

      **Option 1 - 📱 Scan QR Code**

      <img src="https://qr.expo.dev/eas-update/?projectId=${{ steps.expo_preview.outputs.projectId }}&groupId=${{ steps.expo_preview.outputs.groupId }}" height="200px" width="200px" />

      **Option 2 - 📱 Open Link**

      [exp://u.expo.dev/${{ steps.expo_preview.outputs.projectId }}/group/${{ steps.expo_preview.outputs.groupId }}](exp://u.expo.dev/${{ steps.expo_preview.outputs.projectId }}/group/${{ steps.expo_preview.outputs.groupId }})
    edit-mode: replace

Interestingly, the Expo webapp even supports this behavior (defaulting to expo go). You can see this on your project at https://expo.dev/accounts//projects/<PROJECT_NAME>/updates/

So, in general, it feels like this should be easily customizable, even maybe defaulting to ExpoGO links, not the exp+schema stype.

[homburg]

I am using this with a custom app build. My workaround is to define the app scheme only for pr builds, eg.

- name: 🚀 Create preview
  id: expo_preview
  uses: expo/expo-github-action/preview@v8
  env:
    PR_PREVIEW: true
  with:
    command: eas update --auto --non-interactive

// app.config.ts

export default ({ config }: ConfigContext): ExpoConfig => {
  return {
	// ...
	scheme: process.env.PR_PREVIEW === "true" ? "my-own-dev-client-scheme" : undefined,
	// ...
  }
}

[LucasLFurini]

This is my current job for QR code branch preview, it's a managed project with development-client (not expo go).
You need to set the scheme in your app.config file.

Works like a charm and it points straight to dev-client, I hope it helps you!

deploy_branch_preview:
    name: Deploy Branch Preview
    needs: test
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: './apps/mobile'

    steps:
      - uses: actions/checkout@v3

      - name: Use Node.js (.nvmrc)
        uses: actions/setup-node@v3
        with:
          node-version-file: 'apps/mobile/.nvmrc'

      - uses: expo/expo-github-action@v7
        with:
          expo-cache: true
          expo-version: 6.x
          eas-version: latest
          token: ${{ secrets.EXPO_TOKEN }}

      - name: Get yarn cache directory path
        id: yarn-cache-dir-path
        run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT

      - uses: actions/cache@v3
        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
        with:
          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-

      - name: Install Packages
        run: yarn install

      - name: 🚀 Publish preview
        id: update
        run: |
          eas update --branch pr-${{ github.event.number }} --message ${{ github.event.number }} --non-interactive --json | jq '.[].id' -r > updates.txt
          ANDROID_URL="$(sed -n 1p updates.txt)"
          IOS_URL="$(sed -n 2p updates.txt)"
          echo "::set-output name=androidUrl::$ANDROID_URL"
          echo "::set-output name=iosUrl::$IOS_URL"

      - name: 💬 Expo Preview Comment
        uses: expo/expo-github-action/preview-comment@v7
        if: ${{ success() }}
        with:
          project: apps/mobile
          channel: pr-${{ github.event.number }}
          message-id: preview
          message: |
            <h2>📱 Expo Go Previews </h2>
            <p><strong>Channel:</strong> pr-${{ github.event.number }}</p>
            <table>
              <tr>
                  <th><strong>iOS</strong></th>
                  <th></th>
                  <th><strong>Android</strong></th>
              </tr>
              <tr>
                <td>
                  <a href="exp://u.expo.dev/update/${{ steps.update.outputs.iosUrl }}">
                  <img src="https://qr.expo.dev/eas-update?updateId=${{ steps.update.outputs.iosUrl }}&appScheme=YOUR_APP_SCHEME" height="200px" width="200px">
                  </a>
                </td>
                <td></td>
                <td>
                  <a href="exp://u.expo.dev/update/${{ steps.update.outputs.androidUrl }}">
                  <img src="https://qr.expo.dev/eas-update?updateId=${{ steps.update.outputs.androidUrl }}&appScheme=YOUR_APP_SCHEME" height="200px" width="200px">
                  </a>
                </td>
              </tr>
            </table>

[erickreutz]

Added more context here: #240

[byCedric]

This now should be fixed by #247, and was released in 8.2.0 (expo/expo-github-action/preview@v8).

If you still run into issues, open a new issue report.