https://github.com/sebastiandg7/nx-reactnative-appcenter

Example React Native app using AppCenter in an Nx monorepo
https://github.com/sebastiandg7/nx-reactnative-appcenter

android appcenter cd ios monorepo nx nx-workspace react-native

Last synced: 14 days ago
JSON representation

Example React Native app using AppCenter in an Nx monorepo

• Host: GitHub
• URL: https://github.com/sebastiandg7/nx-reactnative-appcenter
• Owner: sebastiandg7
• Created: 2024-02-09T14:29:33.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-02-21T17:40:52.000Z (9 months ago)
• Last Synced: 2024-10-11T04:46:56.916Z (about 1 month ago)
• Topics: android, appcenter, cd, ios, monorepo, nx, nx-workspace, react-native
• Language: TypeScript
• Homepage:
• Size: 652 KB
• Stars: 2
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Demo: Nx + React Native + AppCenter

This repo aims to provide an example react native application under an Nx workspace using [AppCenter](https://appcenter.ms/) 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

- [x] Re-use workspace dependencies installation

- [x] Reusable AppCenter custom build scripts via [zx](https://github.com/google/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](#appcenter-environment-variables) about what to add for each platform build configuration.

## Custom build scripts

Using [AppCenter custom build scripts](https://learn.microsoft.com/en-us/appcenter/build/custom/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`