Reading Time: 8 minutes
Appcircle is a mobile CI/CD platform that provides a fully automated environment to manage mobile app lifecycle end-to-end, transforming DevOps to NoOps with the best practices.
Appcircle supports the full lifecycle of React Native apps for all CI/CD needs. In this article, we will be building and deploying a React Native app with Appcircle with no need for a Mac or any third-party tools.
Build, distribute and test your React Native project quickly with Appcircle
The first step is getting started with Appcircle. Just go to https://appcircle.io/start and register. (Regardless of the login provider you select, you can connect any other provider for the repository connections.)
Creating a Build Profile for a React Native Project
In Appcircle, a build profile contains the build workflows and the configuration of an app per target platform. (i.e. Separate for iOS and Android).
To create your first build profile, click on the orange "Add New" button on top right of the screen.
Enter a name for your build profile and select the target operating system (iOS or Android) and the target platform as React Native. If you have two different targets in your project for iOS and Android, you need to create two separate profiles. This allows you to manage separate build workflows for different operating systems.
You will see your build profile once it has been created. Click on the build profile to connect to a repository that contains a valid React Native app.
You can connect GitHub, Bitbucket and GitLab repositories to your build profile through oAuth apps. Alternatively, You can connect private repositories through SSH and public repositories directly on GitHub, Bitbucket, GitLab and other compatible git providers.
You can authorize Appcircle to connect to your cloud repository provider account. This will allow you to use auto-build your project with hooks. If you authorize Appcircle to access your repositories, you can select the repository that you want to connect. If you use a private repository using an SSH Key, you need to have an SSH key pair ready and enter your private key to Appcircle so Appcircle can access your repository.
Appcircle will then pull your branches, commits, and other information from your repository.
To test drive the Appcircle platform for React Native app builds, you can also use our sample React Native App by forking it or adding it as a public repository: https://github.com/appcircleio/appcircle-sample-react-native
React Native Application Build Configuration for iOS and Android
The build configuration has different flows for iOS and Android and the projects are configured on a branch basis. You can have different configurations for different branches and you can build any of your commits (assuming that they are compatible with the current configuration).
iOS Build Configuration
Click on the gear icon on the top right to access the build configuration. The first step will be entering the project details. You can enter these details manually or click on the Fetch button to retrieve them from your project to detect the correct path for the Xcode project automatically.
Your iOS project needs to have an Xcode project or an Xcode workspace and a shared scheme to complete the build configuration successfully. Appcircle can fetch these workspaces and shared schemes from your branch automatically.
You can also select a specific Xcode version if you have certain dependencies or if you want to test your build on a specific version.
Android Build Configuration
Click on the gear icon on the top right to access the build configuration. The first step will be entering the project details. You can enter these details manually or click on the Fetch button to retrieve them from your project to get the available modules and the variants in your project. You can also select the output type (APK or Splik APK as AAB).
Build Triggers for Auto Builds
The next section, Triggers, is common for both iOS and Android.
Appcircle allows you to trigger builds manually or automatically using build triggers.
- On push: Whenever code is pushed to a configured branch, the build is triggered.
- On a tagged push: Whenever a tagged commit is pushed, the build is triggered for that commit. Commits without any tags are ignored.
- On push with selective tags: Whenever a commit includes one of typed in tags, the build is triggered. You can specify tags with Unix shell-style wildcards to trigger builds.
Signing Configuration
Appcircle allows you to sign your app for deployment.
Appcircle is unique that it doesn't require you to generate signing identities with a third-party tool. You can simply create your iOS certificates/profiles and Android keystores within the platform and use them in any project in a centralized manner.
If you have readily available signing identities, you can also upload them once to the Appcircle Signing Identities module and use them centrally in any project. (No need for separate uploads of the same certificate for separate projects.)
- For more information on iOS certificate and provisioning profile management, please refer to the following document: https://docs.appcircle.io/signing-identities/ios-certificates-and-provisioning-profiles
- For more information on Android keystore management, please refer to the following document: https://docs.appcircle.io/signing-identities/android-keystores
For signing iOS apps, press add, select the bundle ID from the first dropdown and then select a compatible provisioning profile (added from the signing identities module) from the second dropdown.
For signing Android apps, simply select a keystore (added from the signing identities module).
Distribution (Deployment) Configuration
Appcircle is an end-to-end mobile CI/CD tool and enables you to build and deploy your apps to mobile devices with full automation.
Distribution is a critical step when it comes to test your application on real devices. You may need multiple testers and test groups to download, install, and test your application and make sure it works on different devices and operating system versions.
Distribution configuration allows you to set up which testing groups will receive your application after the build is complete. You can manually send your binary file to testers or Appcircle can do this for you.
For more information on how to set up testing groups and deploy your app after the build, please refer to the following document: https://docs.appcircle.io/distribute/create-or-select-a-distribution-profile.
You can select a previously created distribution profile or create a new one in this window. Use the top input box to enter a name for the new distribution profile you want to create. Press enter or click on the green + icon on the right to create the distribution profile.
Finally, check Auto Distribute if you want your build to be sent to the distribution profile automatically. If the target profile has autosend configured, your testers will receive the latest version automatically.
There are three main automation points in Appcircle:
- Autobuild: builds new pushes automatically
- Autodistribute: deploys new binaries automatically to the Appcircle Distribute module, where you can use it with the online mobile device simulator/emulator or share with the testers.
- Autosend: Sends new versions of the apps automatically to the selected testing groups.
Environment Variables Configuration
The final tab is to add environment variables to the build. For advanced use cases, you can define variables and secrets to be incorporated during the build in the Environment Variables submodule so that you don't need to store certain keys and configurations within the repository.
Workflows for Advanced Build Configuration
Appcircle is a simple, but flexible platform. You can make basic changes in a simple user interface with the build configuration and use the workflows for advanced use cases. A workflow is a ladder of steps taken to build your applications. Each step has a different purpose and the workflow can be customized by modifying step parameters and inputs, running custom scripts or re-ordering steps. Workflows allow you to have complete control on your build process and enhance it with third-party services and features.
Also note that the workflows are set up by default, so you don't need to set them up for builds.
For more information on the workflows, you can refer to the following document: https://docs.appcircle.io/workflows/why-to-use-workflows
You have a wide variety of options with workflows. For instance, if you want to run a specific npm command before or after the build, you can add a custom script step at any point in the workflow. If you want to deploy your app with a third-party service instead of Appcircle, you can configure it with the workflows.
Starting a Build and After a Build
To start your first build, just press the start build button -- the play button under the actions columns (or push some code to your repo if autobuild is configured.)
You will see the build progress and the log in realtime.
Once your build is complete, you can now download the binary file or deploy it to distribute module manually (if autodistribute is enabled, it will be sent automatically after a successful build).
You can also view or download your build logs anytime.
Testing the React Native App
With Appcircle, you have two options to test your app. You can use the standard unit testing workflows by adding the related Android and iOS test steps or by running custom scripts or as for the second option, you can use the Appcircle in-browser mobile device emulator/simulator to run your app for manual testing.
Deploying Your App to the In-Browser Emulator
If you set a distribution profile in the distribution configuration, you can deploy your app and share it with the testers or preview them right in your browser in the online Android emulator or the iOS Simulator.
In the Distribute module, click on the selected profile, select your OS on the top left and then select a version. To run that version in the online emulator, just press the "Preview on Device" button on the top right. (Your app must support the x86 architecture for this feature to work.)
With Appcircle, you can manage the CI/CD of your React Native apps for iOS and Android for free.
Top comments (0)