SERIES: Preparing Your React Native App for Production(Android) — Part 1
If you have ever wondered how to build the production or release version of your React Native app, then you have come to the right place. Before proceeding, this tutorial is targeted only at the android version of our React Native app.
Table of Content 📖
- Create a React Native App from Scratch
- Develop version 0.0.1 of our app
- Build a production-ready version of our app for android
You would not be here if you do not have an app already. You can feel free and jump to topic three(3) of the table content. Due to educational purposes, I will start from scratch. And also, this is a long series I am creating hence the detailing.
Step 1: Creating A React Native App
Under this section, I am going to skip setting up a React Native environment. Check out a detailed guide on how to set up your development environment for React Native.
- Node, npm, and npx
- Android Studio, Android Emulator, or A physical Android device
- A text editor (recommend: vscode)
- In your terminal, run the command:
After successful completion, you should see something similar below:
2. Open the project inside your preferred text editor or IDE(Integrated Development Environment)
3. Start the development environment by running the command below:
4. Run the app on an android emulator or physical android device by running the command below:
Below is a result of what you should expect after running the application for the first time.
Under step one, we created a react-native app from scratch and ran our application locally.
Step 2: Develop version 0.0.1 of our app 🛠
Under this section, we’re going to pretend to be building the first MVP(Minimum Viable Product) version of our application. I am going to do this by rendering the version of the application inside the App.js file.
Nothing too much, just something simple. 😊
- Render the version number of the app by importing the
2. Style the app.
Step 3: Build a production-ready version of our app for android 🛠🚀
This is the crucial step we have all been waiting for right?😊 Building a production-ready version requires some steps. Under this section, we will look at :
- Some key terms you will come across and their meaning
- Generating a release key
- Setting up Gradle variables
- Adding signing config to your app’s Gradle config
- Generating the release APK
- Testing the release build of your application
1. Some Key Terms You Will Come Across and Their Meaning:
Android Keystore System:
An Android Keystore System lets you store cryptographic keys in a container called a Keystore to make them more difficult to extract from the device.
An android Keystore is a container for authorization certificates or public key certificates and is often used by Java-based applications for encryption, authentication, and serving over HTTPS.
A Debug Keystore is a randomly generated certificate(Keystore) that is used to sign an APK(Android Package). The Debug Keystore is generated by our build tools(Android SDK) the first time we run our app on an emulator or physical device in development or debug mode.
What can you use a debug key for?
- A debug Keystore is used to sign an APK so we can run our app on an emulator or physical android device connected to our development machine via a USB.
What you cannot use a debug key for?
- You cannot use a debug key to distribute your app to the play store or other platforms.
NB: By default, the debug configuration uses a debug keystore with a known password and a default key with a known password. Also, the debug keystore can be located at $HOME/.android/debug.keystore and is created if not present.
$ keytool -genkey -v -keystore debug.keystore -storepass android -alias androiddebugkey -keypass android -keyalg RSA -keysize 2048 -validity 10000
A release Keystore is a custom generated certificate that is used when you want to run in the release or production mode or build the release version of your application so you can distribute directly to users or publish on an application market such as Google Play, Firebase App Distribution, etc.
Difference Between Release Keystore and Debug Keystore
There are two modes, the debug mode and release mode. The debug keystore is used when we are developing and testing our application whilst the release keystore is used when we want to distribute or publish our app to an application market like Google Play.
APK (Android Package):
Android Package is the package file format used by the Android operating system, and several other Android-based operating systems for the distribution and installation of mobile apps, mobile games, and middleware. (Wikipedia)
A signed apk is an android package file that has been digitally signed with a certificate for which the developer holds the private key. You can sign an application using a debug key or a release key. A device will not install an APK or bundle file that is not signed.
Gradle is a build system, which is responsible for code compilation, testing, deployment, etc.
2. Generating a release key
We will use a tool called a key tool to generate our release-key.keystore file. Note, if you don’t have a key tool on your system, kindly get that to work before proceeding.
Before generating the release Keystore, let’s have a look at how our android folder within our project looks like:
You can see that we only have the debug.keystore file. As I said earlier, this helps us to sign our apk so that we can develop and test our app when in debug mode.
a) Run the command:
keytool -genkeypair -v -storetype PKCS12 -keystore release-key.keystore -alias rnProduction-key -keyalg RSA -keysize 2048 -validity 10000
Breaking down the command:
- Keystore name: “release-key.keystore”
- Key alias: “rnProduction-key”
b) Enter a key and Keystore password when prompted:
💡Pro Tip: never forget your keystore file name, key alias, keystore, and key password as it will be needed to set up your Gradle variables.
c) Fill in the rest of the details such as first name, last name, etc when prompted
The release-key.keystore file will be placed inside the root of your project folder after generating. Drag and drop the file into the
android/appfolder. Below is the result of how the android folder looks after generating the release-key.keystore file:
3. Setting Up Gradle Variables:
As mentioned earlier, Gradle is a build system that is responsible for code compilation, testing, deployment, etc. During the process of building our production application, Gradle will require some information to complete the build. These are the task, type, properties, etc.
For the properties key, we will have to supply Gradle with the following key-pair values:
a) ✏️ Edit the file
android/gradle.properties, and add the values in the image above.
In our case, I will open the
~/.gradle/gradle.properties file and pass the values there. This approach is safer because your key and Keystore password are not exposed when you commit your project to a version control site like Github.
❗️Note: If you don't see the
gradle.properties file inside of the ~/.gradle folder, just create one.
4. Adding signing config to your app’s Gradle config
Up until now, the only signingConfig we have is the debug which is automatically generated by our build tool when in debug mode. Below is how our android/app/build.gradle looks like :
Now, we are going to make changes to the signingConfigs and buildTypes by adding a release build and pointing our build type to the release build.
👇Below is the final result of the steps above:
5. Generating a release APK
a) Change directory into the android folder:
b) Run the command
./gradlew assembleRelease to bundle your application into an apk file
6. Testing the release build of your App
You can test out the production build of your application thoroughly by running the command
npx react-native run-android --variant=release . But before that, you will have to uninstall the debug version of the app from the emulator or physical device you are running on.
--variant=release is only available if you’ve set up signing as described above.
In this blog tutorial, we looked at how:
👉 Create a react-native app from scratch
👉Built a “fake” MVP version of the app
👉Prepare the app for production by generating a release key and signing our app
See you in the next post as we look at how to publish the production-ready app to Firebase App Distribution for users to test our application.
Publishing to Google Play Store · React Native
Android requires that all apps be digitally signed with a certificate before they can be installed. In order to…
What is the use of debug.keystore in android?
Thanks for contributing an answer to Stack Overflow! Please be sure to answer the question. Provide details and share…