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 ✅ |
- 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
![image](https://private-user-images.githubusercontent.com/13395979/304425111-7bce8ee4-0eb7-4cde-b640-0e7a13047ec7.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTgwNTc0OTQsIm5iZiI6MTcxODA1NzE5NCwicGF0aCI6Ii8xMzM5NTk3OS8zMDQ0MjUxMTEtN2JjZThlZTQtMGViNy00Y2RlLWI2NDAtMGU3YTEzMDQ3ZWM3LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjEwVDIyMDYzNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWUzNzQyYmVmYjU4MmJlNmExZTdmZTM4MzZmYTA3ZWRmNTA5OWI0NDlhZmMwNmM4ODBiODJhODkxZjI0OGQ1ZGMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.E7oNF3MPTnUVv6yn4gvYtJ_JK9xycB6JiZEzaOlFtFc)
To make things work in AppCenter, we need to tune our project configuration as follows.
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 andAndroid
/iOS
as OS.
- Add build configuration to your branch using the app's
package.json
, not the workspace rootpackage.json
.
![image](https://private-user-images.githubusercontent.com/13395979/304427094-00c97adb-5b98-4bde-89e4-a292fd361d3a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTgwNTc0OTQsIm5iZiI6MTcxODA1NzE5NCwicGF0aCI6Ii8xMzM5NTk3OS8zMDQ0MjcwOTQtMDBjOTdhZGItNWI5OC00YmRlLTg5ZTQtYTI5MmZkMzYxZDNhLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjEwVDIyMDYzNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTlmZWE0M2EwNDA4MDU0ZTQ5MWM1M2Q0MjQ3OGQxMWJlZmJlNTM2MzViYmZjZTkyOWJiNzA5ODJiYTIyYzk4YzgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.gIDgF4c2BM9AP36Th7v1pJxzMXtA1tPQ0v1EfwJ3s-Y)
- Envrionment variables
Refer to the environment variables section about what to add for each platform build configuration.
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
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 |
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
![image](https://private-user-images.githubusercontent.com/13395979/304303067-5561e2ee-75b1-4c6e-b252-e86b1c08d0e4.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTgwNTc0OTQsIm5iZiI6MTcxODA1NzE5NCwicGF0aCI6Ii8xMzM5NTk3OS8zMDQzMDMwNjctNTU2MWUyZWUtNzViMS00YzZlLWIyNTItZTg2YjFjMDhkMGU0LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjEwVDIyMDYzNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTc4MjUxMTE1YmQxMWI0Mjg2MmQxOTE2ODVkYzI1MjNlMzhhNmViMGUzYjM3YmQwYjEzZmEyNTQwNzc3NjUwYjImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.OLtHiYHx8hRrZWxr6HyvQQOESohtwpaAjdt--hlcx4I)