DEV Community: Aashish Karki

Building and uploading a non signed react-native apk to slack using github action

Aashish Karki — Tue, 16 Mar 2021 05:48:57 +0000

Building an apk takes huge amount of time and resource this can hog your local machine too much and make it a bit difficult to work on it. Also when working in react-native we can build a debug free apk without signing it, this comes in handy before rolling an authentic release. So to tackle the resource we use github action which uses a linux image to build our app for us and then send it to slack channel. For that add a devDependency @slack/bolt, and we move forward.

Github Action:


name: Push to slack channel
on:
  push:
    branches:
     - master
jobs:
  ship-pr:
    name: Push to slack
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: '14.x.x'
      - name: Build android apk and send to slack
        run: |
          yarn
          yarn package:android
          cd android && ./gradlew wrapper --gradle-version 5.5 && ./gradlew assembleRelease -x bundleReleaseJsAndAssets
          cd ..
          yarn shipit:android
        env:
          SLACK_TOKEN: ${{ secrets.SLACK_TOKEN }}
          SLACK_SIGNING_SECRET: ${{ secrets.SLACK_SIGNING_SECRET }}

We use node 14 version as a package @slack/bolt (which will be used to send apk to slack) uses node version > 10.

In build step here yarn package:android is run which in returns packages react-native assets in android for us the corresponding script for this will be written in root package.json as :

"scripts": {
    "android": "react-native run-android",
     ......
    "test": "jest",
    "package:android": " react-native bundle --platform android --dev false --entry-file index.ts --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res",
  },

Currently the latest image of ubuntu and even macos use gradle version 6 or higher, this might be an issue for us as most of react native app 0.63.* version are mostly based on gradle 5, this is an issue as using gradle 6 or higher doesn't resolve dependencies issue for us. So we use gradle-version 5.5 and then apk is built and placed inside android/app/build/outputs/apk/release/app-release.apk

so we send this to our slack channel, to do that we can create a simple bit with file write and channel join access https://api.slack.com/apps?new_app=1 after giving the bot access we need to grab token which we receive after creating access to bot and signing secrets which is available in general information screen. We set that in github environments and then, yarn shipit:android command to send the file to slack channel, the corresponding script for this will be written in root as:

"scripts": {
    "android": "react-native run-android",
     ......
    "package:android": ...,
    "build:android": "yarn && node ./shipit.js",
  },

Contents of shipit.js will be something as.


// Require the Bolt for JavaScript package (github.com/slackapi/bolt)
const { App } = require("@slack/bolt");
// For Node.JS, you need to import the fs (file system) module
const { createReadStream } = require('fs');
const path = require('path');

const token = process.env.SLACK_TOKEN 
const slackBot = new App({
  token,
  signingSecret: process.env.SLACK_SIGNING_SECRET 
});


async function sendApk() {
  const fileName = path.resolve(__dirname, '..', 'android', 'app', 'build', 'outputs', 'apk', 'release','app-release.apk');

  try {
    // Call the files.upload method using the built-in WebClient
    const result =  await slackBot.client.files.upload({
      // The token you used to initialize your app is stored in the `context` object
      token,
      channels: '#general',
      initial_comment: "Here\'s new updated build :smile:",
      // Include your filename in a ReadStream here
      file: createReadStream(fileName)
    });
    console.log('Sucessfully sent')
  }
  catch (error) {
    console.error('oops: ', error);
  }

}

sendApk();

And in each trigger of our action apk is sent to slack, but be sure to mention bot to that channel first and is part of the channel

Managing npm and git packages.

Aashish Karki — Tue, 05 Jan 2021 15:23:40 +0000

Github has come up with their own package registry solution. https://github.com/features/packages similar to npm package the packages are hosted in github, I use git mostly so it makes sense for me to host packages there also provides mechanism for private packages.

Let's dive into the usage for github packages. We publish packages under a owner's scope. Say my github username is karkipy so the scope is @karkipy , and the package name will be the combination of your scope and the repo name itself such as @karkipy /randomPackage.

Now to publish this package into github registry we can specify it in the package.json file about which registry it should refer to such as

"publishConfig": {
  "registry":"https://npm.pkg.github.com"
}

To publish :

npm publish

should do the trick, now installing packages both from npm and github can be tricky as we have to specify from which we are installing packages, if only github is mentioned then the conflict will arise as many fundamental packages may not have been hosted by github package registry or if only npm is mentioned then the package from github will not be installed. So we need to specify packages to be installed from multiple organization.

Create an .npmrc for this particular configuration, make sure it is in root. Configuration for the file should be something as :

//npm.pkg.github.com/:_authToken=GITPERSONALACCESSTOKEN

@karkipy:registry=https://npm.pkg.github.com/

//registry.npmjs.org/:_authToken=NPM_TOKEN

Personal access token should be granted for the private packages that you publish in github similar to that NPM_TOKEN does the same.

NPM_TOKEN: https://docs.npmjs.com/creating-and-viewing-access-tokens
GITPERSONALACCESSTOKEN: https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/creating-a-personal-access-token

FastLane and github action for React Native app deployment .

Aashish Karki — Mon, 14 Dec 2020 15:04:43 +0000

fastlane provides a simple implementation for deployment of android and ios app. Github action provides pipelines to simplify the release process.

fastlane can be installed via command

gem install fastlane

as we will be using github action so we presume the runner image will have the tools and software installed for us.

Specification are listed in https://docs.github.com/en/free-pro-team@latest/actions/reference/specifications-for-github-hosted-runners.

For iOS setup the faslane file for ios. Inside the ios folder create a folder named fastlane with files AppFile and FastFile. But first setup a github repo to host credentials for code sign. Setup : https://docs.fastlane.tools/actions/match/

AppFile: provide app identifier and app id and team id to it

app_identifier "com.example.karkipy"
apple_id "aashish@karkipy.com"
team_id "1233343455"

FastFile: is where we write script to build and deploy our app. Be sure to host your credentials in a private repo in git.

default_platform(:ios)

platform :ios do
  desc "Build for ios"
  lane :build do |options|
    # Create a custom keychain for code signing
    create_keychain(
      name: 'keychain',
      password: 'password',
      default_keychain: true,
      unlock: true,
      timeout: 3600,
      add_to_search_list: true
    )

    match(
      storage_mode: 'git',
      type: "appstore",
      keychain_name: 'keychain',
      keychain_password: 'password',
      readonly: true,
      git_url: 'https/github/url' ## where secrets is hosted.
    )

    # Building the iOS app
    gym(
      workspace: "./Example.xcworkspace",
      include_bitcode: true,
      include_symbols: true,
      silent: true,
      clean: true,
      scheme: "Example",
      export_method: "app-store"
    )
  end


  desc "Upload to testflight"
  lane :testflight_release_to_app_store do |options|
    build
    upload_to_testflight(
      skip_submission: true,
      skip_waiting_for_build_processing: true
    )
  end

  desc "Upload to production"
  lane :production_release_to_app_store do |options|
    build
    upload_to_app_store(
      skip_screenshots: true,
      skip_metadata: true
    )
  end
end

For Android, create folder named fastlane inside android with similar setup of ios, uses AppFile and FastFile

AppFile: contains package name and path to secret json key that provided by Google. Steps : https://docs.fastlane.tools/actions/supply/#setup

json_key_file("app/api.json") # path to the json secret file - Follow https://docs.fastlane.tools/actions/supply/#setup to get one
package_name("com.example.karkipy")

FastFile: contains steps for fastlane to build and deploy android app

default_platform(:android)

platform :android do
  desc "Build aab file"
  lane :build do
    gradle(
      task: 'bundle',
      build_type: 'Release'
    )
  end

  desc "Release for alpha testing"
  lane :alpha_release_to_play_store do
    build
    upload_to_play_store(
      package_name: 'com.example.karkipy',
      track: "alpha",
      skip_upload_apk: true,
      aab: "app/build/outputs/bundle/release/app-release.aab"
    )
  end

  desc "Release for production"
  lane :production_release_to_play_store do
    build
    upload_to_play_store(
      package_name: 'com.example.karkipy',
      track: "production",
      skip_upload_apk: true,
      aab: "app/build/outputs/bundle/release/app-release.aab"
    )
  end
end

Now we move to Deploying our app using github actions.

name: Publish Staging App to App Store and Play Store

on:
  release:
    types: [published]
jobs:
  release-ios:
    name: Build Staging app and release  to testflight app
    needs: [increment-app-build]
    runs-on: macos-latest
    steps:
      - uses: actions/checkout@v1
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: '10.x'
      - name: Login Github User
        run: echo -e "machine github.com\n  login $PERSONAL_ACCESS_TOKEN" >> ~/.netrc
        env:
          PERSONAL_ACCESS_TOKEN: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
      - name: Install packages
        run: |
          yarn install
      - name: Bundle and Upload to AppStore
        run: |
          cd ios && pod install
          fastlane ios testflight_release_to_app_store
        env:
          FASTLANE_PASSWORD: ${{ secrets.APPLE_ID_PASSWORD }}
          MATCH_PASSWORD: ${{ secrets.MATCH_PASSWORD }}

  release-android:
    name: Build staging app and release to alpha track android
    needs: [increment-app-build]
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - uses: actions/setup-node@v1
        with:
          node-version: '10.x'
      - uses: actions/setup-ruby@v1
        with:
          ruby-version: '2.x'
      - name: Install packages
        run: |
          yarn install
          yarn react-native link
      - name: Install Fastlane
        run:  gem install fastlane
      - name: Bundle and Upload to PlayStore
        run: |
          cd android
          fastlane android alpha_release_to_play_store

Note: FASTLANE_PASSWORD and MATCH_PASSWORD are values need to be provided from environment so we pass it to the env for ios deployment, MATCH_PASSWORD is created during our credential creation and FASTLANE_PASSWORD is our apple id password. Also we are loginng into github using personal access token which gives us access to the repository which has our credentials hosted.

Advantage of React Native Debug

Aashish Karki — Tue, 08 Dec 2020 17:00:52 +0000

One of the advantages of using react native is the use of dev mode build, the build access the js bundle from your local device.

In case of device being used in local network we can access the said bundle using a shake gesture and addressing the proper ip address and port i.e. usually 8081.

Say we have a project where you are working on a specific feature and would require another person to see the progress of the said feature, we can achieve this by hosting the js bundle across the internet. Note: if any module/library that uses native module is added we must have a updated build.

Firstly create a tmpDir folder in root then we generate the js bundle.

ios:

yarn react-native bundle --platform ios --dev false --entry-file index.js --bundle-output tmpDir/index.ios.bundle.js --assets-dest tmpDir

android:

yarn react-native bundle --platform android --dev false --entry-file index.js --bundle-output tmpDir/index.bundle

Now we host the said directory. And after that it is same as using a local network, shake and update the build access point. Android and iOS will auto detect the js bundle they require.