Demo: Nx + React Native + AppCenter

This repo aims to provide an example react native application under an Nx workspace using AppCenter for it's CI/CD.

Versions used:

Package manager: yarn@1
Nx: 18.0.3
Node: 18.X
React native: 0.73.2
Java JDK: 17.0.10

Platform	Status
Android	`working` ✅
iOS	`working` ✅

Backlog

Re-use workspace dependencies installation
Reusable AppCenter custom build scripts via zx
Only run if mobile Nx project is affected by the changes
Cache node_modules dependencies
Cache Pod dependencies for iOS

Workspace layout

Configuration

To make things work in AppCenter, we need to tune our project configuration as follows.

AppCenter project creation

Go ahead to AppCenter and create an Android project and an iOS project for your react native app.

Create the AppCenter project using React Native as platform and Android/iOS as OS.

Android

iOS

Add build configuration to your branch using the app's package.json, not the workspace root package.json.

Envrionment variables

Refer to the environment variables section about what to add for each platform build configuration.

Custom build scripts

Using AppCenter custom build scripts we can setup the Nx workspace dependencies so that workspace libs are included in our build.

Check the following scripts:

apps/mobile/appcenter-post-clone.sh

AppCenter environment variables

The following are the custom environment variables to need to add in the AppCenter build configuration for each project.

Name	Value	Platform
`APPCENTER_CURRENT_PLATFORM`	`android` or `ios`	both
`APPCENTER_NX_PROJECT`	`mobile`	both
`APPCENTER_NX_PROJECT_DIR`	`apps/mobile`	both
`JAVA_HOME`	`$(JAVA_HOME_17_X64)`	android

Significant changes

In order to make the react-native build work from AppCenter some files needed changes as we cannot spawn the nx build targets (AppCenter runs their own build commands).

./apps/mobile/.babelrc.js

reriveram/nx-reactnative-appcenter