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.

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

Android

iOS

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

3. 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 you 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