How to configure your native react app for the store

luizrebelatto

Luiz Gabriel

Posted on May 19, 2023

How to configure your native react app for the store
  • Settings to do in your application to publish it on the play store

To publish an app in play store you need to generate an aab or an apk file, play store recommends generating an aab for publication. In this article I will teach you how to generate both types of files.

The first step is to access your project folder:

cd nameOfProject

Since we will be generating the file for the play store, it will only be the android part.

Go to the android folder and then go to the app folder:

cd android/app

Now we need to create a certificate in order to be able to generate the apk and the aab:

  • The keytool is the tool used to generate and is found in jdk

Windows

  • With this command we generate the certificate in Windows
keytool -genkeypair -v -storetype PKCS12 -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
Enter fullscreen mode Exit fullscreen mode

MacOS

  • With this command we generate the certificate in MacOS
sudo keytool -genkey -v -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
Enter fullscreen mode Exit fullscreen mode

The next step is to create a password of at least 6 characters, this password will be used for you to access the key.

After creating and entering your password, you will be asked a few questions and at the end of the questions you have to confirm the creation of the key:

Image description

if you check the key is inside the path:

  • nameProject/android/app

Setting up Gradle variables

We need to add the variables below to the end of the file android/gradle.properties

now you replace the asterisks with your password

MYAPP_UPLOAD_STORE_FILE=my-upload-key.keystore
MYAPP_UPLOAD_KEY_ALIAS=my-key-alias
MYAPP_UPLOAD_STORE_PASSWORD=*****
MYAPP_UPLOAD_KEY_PASSWORD=*****
Enter fullscreen mode Exit fullscreen mode

Adding signing config to your app's Gradle config

  • edit the file android/app/build.gradle
  • Now you will find a piece of code where signingConfigs {} is present and paste the following
release {
  if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {
    storeFile file(MYAPP_UPLOAD_STORE_FILE)
    storePassword MYAPP_UPLOAD_STORE_PASSWORD
    keyAlias MYAPP_UPLOAD_KEY_ALIAS
    keyPassword MYAPP_UPLOAD_KEY_PASSWORD
  }
}
Enter fullscreen mode Exit fullscreen mode
  • In the block below inside buildtypes and inside release, you will add the following
signingConfig signingConfigs.release
Enter fullscreen mode Exit fullscreen mode

Scripts to Generating the AAB and APK

APK

cd android && ./gradlew assembleRelease
Enter fullscreen mode Exit fullscreen mode

AAB

cd android && ./gradlew bundleRelease
Enter fullscreen mode Exit fullscreen mode

To make your life easier, I recommend that you create a script in package.json.

Example below:

"scripts": {
    "android:bundle": "cd android && ./gradlew bundleRelease",
    "android:apk": "cd android && ./gradlew assembleRelease"
  }
Enter fullscreen mode Exit fullscreen mode

Where are these files generated?

  • APK is in the path:

nameOfProject/android/app/build/outputs/apk

  • AAB is in the path:

nameOfProject/android/app/build/outputs/bundle

References


Follow me on LinkedIn and github

💖 💪 🙅 🚩
luizrebelatto
Luiz Gabriel

Posted on May 19, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related