How To Run Expo Cli App In Browser

We are going to be covering how to deploy a React Native Expo app to Appetize , a platform that lets you run mobile apps in your browser.

Getting started

First, you have to add your app to Bitrise. Unfortunately, the validation tool that works for most projects, doesn't work for Expo applications (yet).

This means that you should let the validator fail, restart scanning without validation...

and then choose "Other/Manual" from the list.

You will then be prompted to select a Stack. I recommend using the most recent macOS stack unless you have a good reason otherwise. Register a webhook and you are done here.

Writing the workflow

We will be using the workflow editor to create our workflow. To start, the workflow editor will contain four steps. Delete the last one (Deploy to Bitrise) and add the following steps in order:

Note: if you don't seem to find the steps, click All.

Now let's go over what each step in this workflow does and how to configure them.

Activate SSH key and Git clone

The Activate SSH key step simply sets up the given SSH key for the build. The Git clone step clones the app from your Git provider like GitHub, GitLab or Bitbucket.

Run NPM command

This step allows you to run commands using the Node Package Manager. This step should be configured to run npm install. This will install all of your app's dependencies. Make sure to set the required input "The npm command with arguments to run" to "install" (just install, nothing else).

[Beta] Expo Eject

This step uses the Expo CLI to create the native Xcode and Android Studio projects for your app. This allows us to run the CocoaPods step later on. Make sure to create an account on https://expo.io/signup and provide your credentials to the step. The password should be a secret.

Run NPM command

This step, like the previous one, allows you to run commands using NPM. This step should be configured to run npm test. This will run your run your unit tests or other kinds of tests as you have configured. Make sure to set the required input "The npm command with arguments to run" to "test" (just test, nothing else).

Run CocoaPods install

This step runs pod install on your native iOS Xcode project and Podfile generated by the Expo Eject step. No inputs should be necessary but if Bitrise has trouble finding the Podfile, try passing a direct path to it.

Script

This is the meat and potatoes of the build. Since Expo's main CLI tool is primarily for local usage, it creates a build on their servers. Since we are using Bitrise, we want to use Bitrise's servers instead of Expo's. This is where Turtle comes in. It is Expo's CLI tool for continuous integration usage. The script should contain:

                          npm install -g turtle-cli turtle setup:ios turtle build:ios -t simulator -u non-binary -p $expopassword -o /Users/vagrant/expo-apps/app.tar.gz

Copy code

But make sure to change non-binary to your username and use the $expopassword secret that you created earlier for the Expo Eject step. This will install the Turtle CLI, setup the iOS project for building and then build the iOS project.

Appetize.io Deploy

Lastly, we will have our Appetize.io Deploy step which, well, deploys our app to Appetize. Make sure to provide your Application path (which is /Users/vagrant/expo-apps/app.tar.gz) and your Appetize token that can be generated at

Closing Thoughts

If everything is configured correctly, you will get something that looks like:

                          +------------------------------------------------------------------------------+ |                               bitrise summary                                | +---+---------------------------------------------------------------+----------+ |   | title                                                         | time (s) | +---+---------------------------------------------------------------+----------+ | ✓ | activate-ssh-key@4                                            | 18.57 sec| +---+---------------------------------------------------------------+----------+ | ✓ | git-clone@4                                                   | 8.70 sec | +---+---------------------------------------------------------------+----------+ | ✓ | npm@1                                                         | 53.86 sec| +---+---------------------------------------------------------------+----------+ | ✓ | npm@1                                                         | 3.38 sec | +---+---------------------------------------------------------------+----------+ | ✓ | script@1                                                      | 3.6 min  | +---+---------------------------------------------------------------+----------+ | ✓ | expo-detach@0                                                 | 9.6 min  | +---+---------------------------------------------------------------+----------+ | ✓ | cocoapods-install@1                                           | 32.24 sec| +---+---------------------------------------------------------------+----------+ | ✓ | script@1                                                      | 4.6 min  | +---+---------------------------------------------------------------+----------+ | ✓ | appetize-deploy@0                                             | 10.34 sec| +---+---------------------------------------------------------------+----------+ | Total runtime: 19.9 min                                                      | +------------------------------------------------------------------------------+

Copy code

Check the Appetize Deploy step to find the link to the app on Appetize.

I hope that this was helpful and please don't hesitate to reach out to support if you have any questions.