How to build React Native apps using codemagic
Today I would like to write a story about an exciting topic. I think everyone spends a lot of time building and delivering apps. So, I would like to share how to do it easily and quickly. For this purpose, we use Fastlane tools and Codemagic CI/CD.
First, we need to create a new empty project. react-native init codemagic
Add it to git. Then open this project in your IDE of choice.
Note: The new react-native template (for react-native version 0.71.0) requires the gem to be installed before installing the pod.So please run
bundle install
after thatcd ios && pod install
.
Open package.json
file and new script under it scripts
section
"build:ios": "react-native bundle --entry-file ./index.js --platform ios --bundle-output ios/main.jsbundle --assets-dest ios",
Next, add an app icon and splash screen to your project. To learn how to do this, check this article https://medium.com/litslink/how-to-add-app-icons-and-splash-screen-to-your-react-native-application-97c5aefb6978 .
Go to Apple Developer Program => press Account
=> Sign in with credentials => Select Identifiers
. Create a project bundle identifier. Then use this bundle ID to create a new app in App Store Connect. To be able to use Fastlane to push builds to TestFlight, you must also create an API key on App Store Connect.
Note: See this article for instructions on how to prepare your store.
Create (replace) the release keystore my-upload-key
and my-key-alias
specify the value and set any requested data) and place it in the path android/app
. To do this, run the following command in your project’s terminal:
keytool -genkeypair -v -storetype PKCS12 -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
Note: Don’t forget to add the release keystore to your repository.
Now go here android
=> app
=> build.gradle
Add the following code below defaultConfig
flavorDimensions "variants"
productFlavors {
prod {
dimension "variants"
applicationId "com.codemagic"
manifestPlaceholders = [crewcostApplicationLabel: "Codemagic"]
}
}
and below that signingConfigs
Add a new configuration named release
with the following code
release {
storeFile file(String.valueOf(System.getenv("RELEASE_KEYSTORE_FILE")))
storePassword System.getenv("RELEASE_KEYSTORE_PASSWORD")
keyAlias System.getenv("RELEASE_KEY_ALIAS")
keyPassword System.getenv("RELEASE_KEY_PASSWORD")
}
And then buildTypes
=> release
Add this code to the section
signingConfig signingConfigs.release
Before starting any other steps, make sure you have completed all required settings in the Google Play Console. Check this article for what you need to do.
Note: Please note that you must manually upload your first build to the Google Play Console for Faslane to automatically perform the next upload.
create fastlane
Create a folder in the root of your project and create a file Fastfile
There. Add the following code to the file.
Please update Gemfile
Run using this code bundle install
Add env files for all environments using the following code:for example .env.prod
etc
run it now bundle exec fastlane match_profiles — prod
Create a distribution certificate and provision a profile.
create codemagic.yaml
Create a file with the following code and add it to the root of your project
Note: Make sure the Ruby version is the same as your project’s.
.ruby-version
File
Now you can push this project to Git.
First, you need to create an account on the codemagic dashboard. If you don’t have one, sign up to create one.
After registering you will see this page
I press the button Add your first app
. In the pop-up, select your Git provider or add a repository from a URL.
In the next popup, press Click here
. A new window will open and you will need to allow access to your repository.
Once you allow access, you will be returned to codemagic. The following pop-up will appear.
You need to select a repository and project type React Native App
Now press the button Add application
. Then this page will be displayed.
Note: If you don’t see it,
codemagic.yaml
Click and select the branch where this file is located.
Go to tab Environment variables
Add the following variables:
- MATCH_KEYCHAIN ​​= fastlane_keychain = IOS secret (created group name)
- MATCH_PASSWORD = password = IOS secret (created group name)
- APP_STORE_CONNECT_API_KEY_KEY = Your API key = IOS secret (created group name)
- MODULE_SSH_KEY = private key = module_credentials (created group name). This variable is for accessing the certificate repository.See instructions here
- RELEASE_KEY_ALIAS = your alias = android-secrets (created group name)
- RELEASE_KEYSTORE_FILE = Name of keystore file = android-secrets (created group name)
- SUPPLY_JSON_KEY_DATA = your JSON key data = android-secrets (created group name)
- RELEASE_KEY_PASSWORD = Key password = android-secrets (created group name)
- RELEASE_KEYSTORE_PASSWORD = Keystore password = android-secrets (created group name)
Scroll down to see Global environment variables
.click team settings
Link:
You will be redirected to this page
Where you need to scroll down Code signing identities
and extend it
go to Android keystores
Click the tab to add your keystore file and fill out the form.press Add keystore
button.
I’ll go now Apps
find your project and press Finish build setup
You will be redirected to this page and you will need to press . Start your first build
button.
This popup will appear.
You need to select a branch codemagic.yaml
Create the file and select the workflow you want to build.Then press Start new build
button.
You will be redirected to this page containing the build process.
That’s it!
Feel free to check out my repository https://github.com/AlinaRadyk/codemagic for these changes.