Continuous Integration for React Native

This guide is for you if…

  • You don’t want to write code twice.
  • You have a cat named after your favorite JS library.
  • You’re using the same high-level, dynamic, untyped, run-time interpreted programming language for every task in your life.
  • You don’t like to press build-test-deploy button thousand times a day.

We will show you how to setup Continuous Integration for React Native builds in just a few clicks using Nevercode.

Let’s get started!

“One tool to build them all” — Sauron, Lead Developer

First steps

All you need to get started is a web browser. Nevercode doesn’t require any kind of additional software from your side. You don’t even have to write any tedious configuration files full of technical boilerplate. It will simply scan your repository and from what you have there the builders find everything they need. You’ll just have to confirm what configuration you want to build.

The first time you log in to Nevercode you’ll be presented with an empty dashboard.

Let’s get going by clicking on “add new app”.

That’s how your dashboard looks like after you’ve signed up.

Clicking the add new app card on the dashboard will open a new project creation flow that asks for your Git repository URL and authentication type. If you sign up via Bitbucket or Github using OAuth, you can simply select the repository via UI.

Otherwise, you have three options for authentication:

  • public repository
  • username and password
  • SSH key

Select configuration

We’re scanning your repo, looking for apps to build.

The next step for you is to select the branch from the dropdown. (Note that you can change the branch later.)

Clicking on the “select branch” makes Nevercode to scan the repository from the specified branch. This includes cloning the repository, looking for projects from it and searching for the configurations. All these actions can be monitored at the same time from your browser via the live log window as seen above.

When the scanning completes you’ll be presented with three options:

  • Project
  • Configuration
  • Build for Platforms

Configuring your project.

The Project selection here means a directory in your repository where your React Native configuration file package.json is stored. In the configuration selection you can select whether Nevercode should build either debug or release version of your application. And finally, you can choose whether you’d like to build your app for just Android or iOS, or for both platforms.

Click ‘save and start build’ to proceed.

Dependency management

Usually React Native applications depend on additional Node modules. Nevercode installs the dependencies listed out in your project’s package.json file automatically using Yarn package manager right after your repository is cloned for building. The exact command that is used for installing the dependencies is yarn install .

Code signing

Signing React Native applications in Nevercode is done just like it is with native Android and iOS applications.

The easiest way to sign iOS apps is by using the automatic signing method. Execute the provided code snippet in your Mac machine terminal and it will automatically fetch available signing files. All you have to do is to select appropriate signing files combination for your purposes. Alternatively, you can manually add an appropriate pair of signing files. You can read more about iOS code signing from corresponding tutorials for iOS apps.

To sign Android binaries you can use custom environment variables and environment files functionality Nevercode provides. You can read more about signing Android apps from corresponding tutorial for Android apps.

Testing React Native Apps

Nevercode supports Jest tests out of the box for React Native. When you submit your repository, it scans the package.json for jest dependency. If there are any tests present, it will run the tests for every build you make.

Configure tests for your React Native project.

In case you want to use another test framework to test your React Native application, you can enable testing via a custom test step. Please take a look at the official documentation for testing hybrid applications to see how you can set that up.

Test results

Publishing Build Artifacts

Publishing options

Build distribution is an integral part of app development life cycle. Nevercode supports publishing your build artifacts to several distribution channels such as:

  • Google Play, iTunes Connect
  • HockeyApp, Crashlytics, TestFairy, Relution
  • Slack, HipChat, Email

To fully automate your continuous integration process you can setup different workflows for each branch describing how your project should be built, tested and published.

Conclusion

The times when setting up a continuous integration pipeline was a pain in the args* are over. Modern CI platforms like Nevercode take care of the heavy lifting and let you build in just a few clicks. With support for React Native, iOS, Android, Cordova and Ionic, Nevercode is truly a mobile developer’s choice to release defect-free mobile apps faster.

Leave a Reply

Your email address will not be published. Required fields are marked *