Expo Web Build in Vercel - Command "npx expo-cli build:web" exited with 1

user_8896573 0
Viewed 508

I want to build and deploy my expo app in vercel. I know that I can build it locally (expo build:web), cd into the build folder and run vercel, but I would like it to be done automatically with source control integration.

So I have connected my github repository, npm install seems to be working ok. The problem is with the build command. I tried expo build:web but this failed because the expo cli is not installed in vercel, so I tried npx expo-cli build:web and got the folloowing output: Command "npx expo-cli build:web" exited with 1.

Error: Could not find MIME for Buffer <null>
 at /vercel/.npm/_npx/727/lib/node_modules/expo-cli/node_modules/xdl/src/Webpack.ts:294:23
 at finalCallback (/vercel/.npm/_npx/727/lib/node_modules/expo-cli/node_modules/webpack/lib/Compiler.js:257:39)

Does anyone know how I can run expo build:web in vercel? Many thanks

vercel expo
2 Answers

From my perspective, I think you need to use something like GitHub actions for this task.

I wrote a post on How I automated the releases with the expo-cli and I think we need to follow the same logic.

// .github/workflows/staging.yml

name: Expo Publish on Staging
on:
  push:
    branches:
      - develop
jobs:
  publish:
    name: Install and publish
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - uses: actions/setup-node@v1
        with:
          node-version: 12.x
      - uses: expo/expo-github-action@v5
        with:
          expo-version: 3.x
          expo-username: ${{ secrets.EXPO_CLI_USERNAME }}
          expo-password: ${{ secrets.EXPO_CLI_PASSWORD }}
          expo-cache: true
      - run: yarn
      - run: expo build:web <------- not sure if it works tho
      - run:                <------- here we need a way to upload to vercel

I am in the same situation as you —trying to automate the react-native-web to vercel release.

user_45897290

I had the same issue, but found a solution. expo build:web creates a production ready static bundle in the web-build/ directory, which Vercel can deploy. Thus, to deploy the Expo Web-app to Vercel, one can first have a GHA-step that runs expo build:web and then deploy the bundle it produces to Vercel.

Note that one either has to specify the path to the web-build directory as the root-directory in Vercel (which is done in the code below) or has to set the working-directory to the web-build-path in the Vercel step in the code.

Full Github Actions code for job:

  deploy-web-staging:
runs-on: ubuntu-latest
steps:
  - name: Checkout
    uses: actions/checkout@v2

  - name: Setup .npmrc and use node 14.15.1
    uses: actions/setup-node@v1
    with:
      node-version: 14.15.1

  - name: Expo Web
    uses: expo/expo-github-action@v5
    with:
      expo-username: ${{ secrets.EXPO_CLI_USERNAME }}
      expo-password: ${{ secrets.EXPO_CLI_PASSWORD }}
      expo-cache: true

  - name: Install dependencies
    if: steps.yarn-cache.outputs.cache-hit != 'true'
    run: yarn

  - name: Build Expo Web
    working-directory: ./packages/app
    run: expo build:web

  - name: Vercel Deploy
    uses: amondnet/vercel-action@v20.0.0
    with:
      vercel-token: ${{ secrets.VERCEL_TOKEN }}
      github-token: ${{ secrets.GITHUB_TOKEN }}
      vercel-org-id: VERCEL_ORG_ID
      vercel-project-id: VERCEL_PROJECT_ID
      scope: TEAM
user_108678190
Related