Testing React Native apps with zero effort

--

> cli-rn remote:prod

Hi folks,

I am going to introduce a cool and convenient CLI that is aiming to make the React Native app developing experience as smooth as possible. It is not a replacer for react-native CLI but a good addition to it.

The project is currently in the very alpha stage and under heavy testing.

Quickstart

In this section, we are going to start using cli-rn and see it in action!

Note: I assume that you have some development experience with React Native.

Install cli-rn globally and generate new app

> npm i -g cli-rn
> cli-rn new AppName

It will start generating an app that is bootstrapped from rnn-starter. The process is going to take some time.

Once the process is finished, you will have a production-ready app on your local machine. If you’d like to read more about the app structure and related things, please follow the rnn-starter page.

Testing

Let’s assume that you have coded a feature in your app and would like to test it in release mode on a real device to feel the experience of an end-user. We have 2 options here:

  1. Open XCode and run the project in Release mode (takes ~4–5 minutes).
  2. Use cli-rn and cli-rn-app (takes < 1 minute).

As you may have guessed, we are going to stick with the second option πŸ™‚

In order to start testing your app remotely, you will need to download cli-rn-app from the App Store. As an alternative, you can install the most recent version from Github (with a single command > cli-rn app) and also modify it for your needs.

As was mentioned before, we want to test the app in release mode. In order to achieve it, run the following command:

> cli-rn remote:prod

This command will generate an App Code that has to be put in cli-rn-app as shown on the video below.

HD quality on Youtube.

After hitting the Run button, you will see the black screen which means that your app started loading.

Note: seeing the black screen is totally okay as I haven’t found a way to manage it yet πŸ™‚

Voila! You should be able to see your app! Happy testing πŸ€™

cli-rn-app can be reused for testing any of your RN apps. The only thing to keep in mind is that libraries that are installed in cli-rn-app might be not enough for your needs. You can always add it by yourself or open an issue.

Summary

Working on this project made me learn a lot of things such as writing a CLI for the first time and connecting all parts of the project together, like backend, server for tunneling, mobile app, etc.

πŸ’š Thanks to React Native

πŸ’™ Thanks to Expo for inspiration

❀️ Thanks to Wix team for initiating react-native-navigation and all contributors for maintaining it

cli-rn and cli-rn-app saved me a lot of time, I hope they will do the same for you! I will keep working on these tools as they have become essential attributes of my daily developer life. There are some cool features which I’d like to add and, of course, fixing existing issues and improving the codebase will need some time πŸ˜‡

I appreciate your time in reading this article. I wish you a great day and Happy Coding πŸ€™

https://cli-rn.batyr.io

--

--

π™±πšŠπšπš’πš›
π™±πšŠπšπš’πš›

Written by π™±πšŠπšπš’πš›

Social Entrepreneur, Bootstrapper, Open Source Staff, MS in CS β€” batyr.io

No responses yet