@nx/expo

Expo is an open-source framework for apps that run natively on Android, iOS, and the web. Expo brings together the best of mobile and the web and enables many important features for building and scaling an app.

Expo is a set of tools built on top of React Native. The Nx Plugin for Expo contains generators for managing Expo applications and libraries within an Nx workspace.

Setting Up Expo

To create a new workspace with Expo, run the following command:

npx create-nx-workspace@latest --preset=expo --appName=your-app-name

Installation

Keep Nx Package Versions In Sync

Make sure to install the @nx/expo version that matches the version of nx in your repository. If the version numbers get out of sync, you can encounter some difficult to debug errors. You can fix Nx version mismatches with this recipe.

In any Nx workspace, you can install @nx/expo by running the following command:

nx add @nx/expo

This will install the correct version of @nx/expo.

How @nx/expo Infers Tasks

The @nx/expo plugin will create a task for any project that has an app configuration file present. Any of the following files will be recognized as an app configuration file:

  • app.config.js
  • app.json

In the app config file, it needs to have key expo:

1{ 2 "expo": { 3 "name": "MyProject", 4 "slug": "my-project" 5 } 6} 7

View Inferred Tasks

To view inferred tasks for a project, open the project details view in Nx Console or run nx show project my-project --web in the command line.

@nx/expo Configuration

The @nx/expo/plugin is configured in the plugins array in nx.json.

nx.json
1{ 2 "plugins": [ 3 { 4 "plugin": "@nx/expo/plugin", 5 "options": { 6 "startTargetName": "start", 7 "serveTargetName": "serve", 8 "runIosTargetName": "run-ios", 9 "runAndroidTargetName": "run-android", 10 "exportTargetName": "export", 11 "prebuildTargetName": "prebuild", 12 "installTargetName": "install", 13 "buildTargetName": "build", 14 "submitTargetName": "submit" 15 } 16 } 17 ] 18} 19

Once a Expo configuration file has been identified, the targets are created with the name you specify under startTargetName, serveTargetName, runIosTargetName, runAndroidTargetname, exportTargetName, prebuildTargetName, installTargetName, buildTargetName or submitTargetName in the nx.json plugins array. The default names for the inferred targets are start, serve, run-ios, run-anroid, export, prebuild, install, build and submit.

Creating Applications

Add a new application to your workspace with the following command:

nx g @nx/expo:app my-app

Start the application by running:

nx start my-app

Generating Libraries

To generate a new library run:

npx nx g @nx/expo:lib your-lib-name

Generating Components

To generate a new component inside library run:

npx nx g @nx/expo:component your-component-name --project=your-lib-name --export

Replace your-lib-name with the app's name as defined in your tsconfig.base.json file or the name property of your package.json

Using Expo

Start a Development Server

You can start a development server by running:

nx start <app-name>

Compile App Locally

You can compile your app locally with run-ios and run-android commands:

Compile for iOS:

nx run-ios <app-name>

To run these commands, you need to have your development environment setup. To run an iOS app,it can only be run on a Mac, and Xcode must be installed. Similarly, to run an Android app, it requires Android Studio and Java to be installed and configured on your computer. Setup steps: https://reactnative.dev/docs/environment-setup.

Compile Web Assets

You can build your JavaScript bundle using Metro bundler by running:

nx export <app-name>

Compile for all platforms:

nx export <app-name> --platform=all

Generate Native Code

To generate native code, run:

nx prebuild <app-name>

Generate for all platforms:

nx prebuild <app-name> --platform=all

Install Compatible NPM Packages

To install packages that is compatible with current version of Expo, run:

nx install <app-name>

Unlike npm's install command, this install command will install the exact right version for currently installed copy of Expo.

To install a specify NPM package, run:

nx install <app-name> --packages=<packpage-name>

nx install <app-name> --packages=<packpage-name-1>,<packpage-name-2>,<packpage-name-3>

To check and fix package versions, run:

Check which packages needed to be updated:

nx install <app-name> --check

Run an EAS Build

Expo Application Services (EAS) are deeply integrated cloud services for Expo and React Native apps. EAS Build is a hosted service for building app binaries for your Expo and React Native projects.

To run an EAS build:

nx build <app-name>

If you are not signed into an EAS account, run the following command to log in:

npx eas login

To check the details of your build status, run:

nx build-list <app-name>

Submit an EAS Build

EAS Submit is a hosted service for uploading and submitting your app binaries to the app stores. Since it's a hosted service, you can submit your app to both stores as long as you can run EAS CLI on your machine.

To submit an EAS build:

nx submit <app-name>

Update an EAS Build

EAS Update is a hosted service that serves updates for projects using the expo-updates library.

EAS Update makes fixing small bugs and pushing quick fixes a snap in between app store submissions. It accomplishes this by allowing an end-user's app to swap out the non-native parts of their app (for example, JS, styling, and image changes) with a new update that contains bug fixes and other updates.

To update an EAS build:

nx update <app-name>

Testing Projects

You can run unit tests with:

nx test <project-name>

Expo Commands

Below table is a map between expo commands and Nx commands:

Expo CommandsNx Commands
expo startnx start <app-name>
expo run:iosnx run-ios <app-name>
expo run:androidnx run-android <app-name>
expo exportnx export <app-name>
expo prebuildnx prebuild <app-name>
expo installnx install <app-name>
eas buildnx build <app-name>
eas build:listnx build-list <app-name>
eas updatenx update <app-name>
eas submitnx submit <app-name>

More Documentation

Package reference

Here is a list of all the executors and generators available from this package.

Guides

Executors

  • update

    Start an EAS update for your expo project

  • build

    Start an EAS build for your expo project

  • build-list

    List all EAS builds for your Expo project

  • run

    Run the Android app binary locally or run the iOS app binary locally

  • start

    Start a local dev server for the app or start a Webpack dev server for the web app

  • sync-deps

    Syncs dependencies to package.json (required for autolinking).

  • ensure-symlink

    Ensure workspace node_modules is symlink under app's node_modules folder.

  • prebuild

    Create native iOS and Android project files for building natively.

  • install

    Install a module or other package to a project.

  • export

    Export the JavaScript and assets for your app using Metro/webpack bundler

  • submit

    Submit app binary to App Store and/or Play Store

  • serve

    Serve up the Expo web app locally

Generators

  • initInternal

    Initialize the @nx/expo plugin

  • application

    Create an application

  • library

    Create a library

  • component

    Create a component

  • convert-to-inferred

    Convert existing Expo project(s) using @nx/expo:* executors to use @nx/expo/plugin. Defaults to migrating all projects. Pass '--project' to migrate only one target.