Auto-packaging scripts in React Native development

In the daily development of RN A, we have to compile the code we write into an installation package and then generate a two-dimensional code for people who need to test to scan and download.However, for non-native developers, you may not know how to export the ipa and apk installation packages using Xcode or Android studio. To solve the pain of non-native students beating the installation packages, the author provides a shell script file to achieve one-click automatic packaging and generate the installation two-dimensional code (uploading the installation package to generate the two-dimensional code requires a three-party platform). fir.im)

Packaging script file download address

https://github.com/guangqiang-liu/AutoPackageScript

iOS

Script execution effect

gif

Notes on using scripts

• In the script configuration environment variable, is_workspace: assign true if pod is used to manage the tripartite library, false otherwise
• Fir im_token:fir_token Please set to your own token, how to get fir im_token refer to fir's official website https://fir.im/
• scheme_name: Please change the scheme name for your project
• info_plist_name: Please change the plist file name in your project
• If no login is registered fir.im Classmates, please sign up first fir.im , see Official fir.im document
• Place the script folder in the following directory of the project
• Except that the is_workspace firim_token scheme_name info_plist_name four variables need to be changed to their own, other local scripts need not be modified
• Make sure the iOS debugging certificate is valid before packaging
• The token and login process for fir.im are optional. Students who have not previously used fir.im can also ignore fir.im-related operations, because fir.im only assists in uploading the generated IPA installation package file to fir, and then generates a two-dimensional code that can be scanned for installation. Not using fir.im does not affect the generation of ipa, but does not generate the installation two-dimensional code.

Special note (script store path):

img

How to use script files

• Drag the downloaded script folder into the project root of your iOS project
• Open the terminal and enter the directory where the script file autoPackageScript.sh is located
• Execute script sh autoPackageScript.sh
• Wait for packaging to generate ipa and QR code, where the packaged files are stored on the desktop by default

Core script code

#!/bin/sh

#  autoPackageScript.sh
#  LSBuyer
#
#  Created by Liu Guangqiang on 2017/6/3.
#  Copyright_2017 Facebook. All rights reserved.

envionmentVariables() {

    # ==================== Project Configuration Environment Variables ==================== #

    echo "\033[37;45m*************************  step1:Initialize environment variables 🚀 🚀 🚀  *************************  \033[0m"

    sleep 0.5
    # Time
    SECONDS=0
    # Workspace (example: assign true for.xcworkspace projects managed with Cocopods; assign false for.xcodeproj projects created by default with Xcode)
    is_workspace="false"
    # Specify how you want to package your compilation: Release or Debug (Release by default)
    build_configuration="Release"
    # Token of fir account, this token can be replaced by token generated by its own fir account
    firim_token="1b91e3f54c6e6b106be7afdd13674a43"

    # Packaging scripts folder path
    script_path=$(pwd)
    # Specify the project's scheme name (default is one, requiring reassignment)
    scheme_name="one"
    # The name of the configuration plist file corresponding to Target in the project. The default configuration file for Xcode is info.plist (requiring re-assignment)
    info_plist_name="info"
    # Export the corresponding plist file path required by the ipa (default is EnterpriseExportOptionsPlist.plist)
    ExportOptionsPlistPath="$script_path/EnterpriseExportOptionsPlist.plist"

    # Return to the parent directory and enter the project project root directory
    cd ..
    cd ..
    # Project Root Directory
    project_dir=$(pwd)
    # Get the project name (LSBuyer)
    project_name=`find . -name *.xcodeproj | awk -F "[/.]" '{print $(NF-1)}'`

    # Dev,Pre,Pro three environments
    echo "\033[31;1m Please select a packaging type(Enter serial number,Press Enter) \033[0m"
    echo "\033[31;1m1. test       \033[0m"
    echo "\033[31;1m2. Advance    \033[0m"
    echo "\033[31;1m3. production  \033[0m"

    # Capture user keyboard input
    read packageType
    sleep 0.5
    method="$packageType"

    # Determine if the user has input
    if [ -n "$method" ] ; then
        if [ "$method" = "1" ] ; then
            ExportOptionsPlistPath="$script_path/EnterpriseExportOptionsPlist.plist"
            # Set the corresponding scheme and plist files based on the packaging type selected by the user
            scheme_name="one"
            info_plist_name="info"
        elif [ "$method" = "2" ] ; then
            ExportOptionsPlistPath="$script_path/EnterpriseExportOptionsPlist.plist"
            scheme_name="LSBuyerPre"
            info_plist_name="LSBuyerPre"
        elif [ "$method" = "3" ] ; then
            ExportOptionsPlistPath="$script_path/AppStoreExportOptionsPlist.plist"
            scheme_name="LSBuyer"
            info_plist_name="Info"
        else
            echo "\033[37;45m*************************  Are you blind or not?  😢 😢 😢  *************************  \033[0m"
            exit 1
        fi
    fi

    # Get the corresponding plist file
    info_plist_path="$project_dir/$project_name/$info_plist_name.plist"

    # Corresponds to Bundle versions string in plist, short
    bundle_short_version=`/usr/libexec/PlistBuddy -c "Print CFBundleShortVersionString" "$info_plist_path"`
    # Bundle version in corresponding plist
    bundle_version=`/usr/libexec/PlistBuddy -c "Print CFBundleVersion" "$info_plist_path"`

    # Specify the output ipa folder path (requiring reassignment)
    export_path=~/Desktop/$scheme_name-IPA
    # Specify the output xcarchive path
    export_archive_path="$export_path/$scheme_name.xcarchive"
    # Delete old.xcarchive files
    rm -rf "$export_archive_path"

    # Specify Output ipa Path
    export_ipa_path="$export_path"
    # Specify the output ipa name: scheme_name + bundle_short_version (requiring reassignment)
    ipa_name="$scheme_name-v$bundle_short_version"

}

Xcodebuild() {

    echo "\033[37;45m*************************  step2:Start building the project 🚀 🚀 🚀  *************************  \033[0m"
    sleep 1
    if [ -d "$export_path" ]; then
        echo $export_path
    else
        mkdir $export_path
    fi

    # Determine whether the compiled project type is workspace or project
    if $is_workspace ; then
        # clear before Compilation
        xcodebuild clean -workspace ${project_name}.xcworkspace \
        -scheme ${scheme_name} \
        -configuration ${build_configuration}
        # archive operation
        xcodebuild archive -workspace ${project_name}.xcworkspace \
        -scheme ${scheme_name} \
        -configuration ${build_configuration} \
        -archivePath ${export_archive_path}
    else
        xcodebuild clean -project ${project_name}.xcodeproj \
        -scheme ${scheme_name} \
        -configuration ${build_configuration}

        xcodebuild archive -project ${project_name}.xcodeproj \
        -scheme ${scheme_name} \
        -configuration ${build_configuration} \
        -archivePath ${export_archive_path}
    fi

    #  Check if the build was successful
    #  xcarchive is a folder not a file so use-d to judge
    if [ -d "$export_archive_path" ] ; then
        echo "\033[37;45m Project built successfully 🚀 🚀 🚀  \033[0m"
    else
        echo "\033[37;45m Project Construction Failed 😢 😢 😢  \033[0m"
        exit 1
    fi

}

ExportArchive() {
    echo "\033[37;43m*************************  step3:Start Export ipa file 🚀 🚀 🚀  *************************  \033[0m"
    sleep 0.5
    # Export ipa
    xcodebuild  -exportArchive \
    -archivePath ${export_archive_path} \
    -exportPath ${export_ipa_path} \
    -exportOptionsPlist ${ExportOptionsPlistPath}

    # Modify ipa file name
    mv $export_ipa_path/$scheme_name.ipa $export_ipa_path/$ipa_name.ipa
    # Check file existence
    if [ -f "$export_ipa_path/$ipa_name.ipa" ] ; then
        echo "\033[37;45m export ${ipa_name}.ipa Package Success 🎉  🎉  🎉   \033[0m"
    else
        echo "\033[37;45m export ${ipa_name}.ipa Package Failure 😢 😢 😢     \033[0m"
        exit 1
    fi
    # Total Output Packaging Time
    echo "\033[37;46m Total Time: ${SECONDS}s \033[0m"
    open $export_path

}

previewIPAInfo() {
    echo "\033[37;43m*************************  step4:preview IPA information 💩 💩 💩  *************************  \033[0m"
    fir info $export_ipa_path/$ipa_name.ipa

}

publishIPAToFir() {
    echo "\033[37;43m*************************  step5:Uploading 🚀 🚀 🚀  *************************  \033[0m"
    echo "\033[37;43m*************************  step4:Preview user login information 💩 💩 💩  *************************  \033[0m"
    fir login "$firim_token"
    fir publish $export_ipa_path/$ipa_name.ipa -Q
    echo "\033[37;43m*************************  step6:Upload complete 🚀 🚀 🚀  *************************  \033[0m"
    # Output total time
    echo "\033[37;46m Total Time: ${SECONDS}s 👄 👄 👄 \033[0m"
    open $export_path

}

envionmentVariables
Xcodebuild
ExportArchive
previewIPAInfo
publishIPAToFir

Android

Execute script effect

gif

Matters needing attention

• firim_token in the environment configuration item: Replace with your own token
• Registration and login operations of fir.im are the same as iOS operations, detailed reference Official fir.im document Tutorials
• Apk default export path is: app/build/outputs/apk
• Make sure the jks signature is valid before packaging. If you are unfamiliar with generating a jks signature file, check the author's explanation of generating a jks signature file: https://www.jianshu.com/p/b28a5be05029
• The path to the script file, preferably at the root of the project, is the same directory as the settings.gradle file
• The token and login process for fir.im are optional. Students who have not previously used fir.im can also ignore fir.im-related operations, because fir.im only assists in uploading the generated IPA installation package file to fir, and then generates a two-dimensional code that can be scanned for installation. Not using fir.im does not affect the generation of ipa, but does not generate the installation two-dimensional code.

img

How to run a script

• Drag the autoPackage.sh file from the downloaded script folder to the root directory of the Android project
• Open the terminal and enter the directory where the autoPackage.sh script file is located
• Execute script sh autoPackage.sh
• Waiting for the script to execute, the packaged APK file is stored with the QR code in the /build/outputs/apk path

Core script code

#!/bin/sh

#  autoPackage.sh
#  CRM
#
#  Created by Liu Guangqiang on 2017/6/19.
#  Copyright_2017 Facebook. All rights reserved.

#  ************************Android one-touch packaging and uploading to fir to generate QR code and directly scan for installation************************

# Predefine corresponding environment variables
envionmentVariables(){

# Initial Packaging Time
SECONDS=0
# Current Path
pwd
#Android Project Project Path
android_project_path=$(pwd)
# Android apk directory path
apk_dir_path="$android_project_path/app/build/outputs/apk"
# apk path
apk_path="$apk_dir_path/app-dev-release.apk"
# Token of fir account, this token can be replaced by token generated by its own fir account
firim_token="1b91e3f54c6e6b106be7afdd13674a43"
}

apkBuild(){

# Delete old apk
rm -rf $apk_path
cd "$android_project_path"
echo "\033[37;45m Pack Start!!! 🎉  🎉  🎉   \033[0m"
sleep 1
# Execute Android Packaging Script
./gradlew assembleRelease
# Check if the APK file (app-LSW-release.apk) exists
if [ -f "$apk_path" ]; then
echo "$apk_path"
echo "\033[37;45m Packaging Successful 🎉  🎉  🎉   \033[0m"
sleep 1
else
echo "\033[37;45m No corresponding apk file 😢 😢 😢   \033[0m"
exit 1
fi
}

# Preview apk information
previewIPAInfo(){
echo "\033[37;43m*************************  step4:preview apk information 💩 💩 💩  *************************  \033[0m"
fir info $apk_path
sleep 1
}

# Upload app-LSW-release.apk from the APK directory to fir
publishIPAToFir(){

open $apk_dir_path
echo "\033[37;43m*************************  step5:Uploading 🚀 🚀 🚀  *************************  \033[0m"
echo "\033[37;43m*************************  step4:Preview user login information 💩 💩 💩  *************************  \033[0m"
fir login "$firim_token"
fir publish $apk_path -Q
echo "\033[37;43m*************************  step6:Upload complete 🚀 🚀 🚀  *************************  \033[0m"
# Output total time
echo "\033[37;46m Total Time: ${SECONDS}s 👄 👄 👄 \033[0m"
open $apk_dir_path
}

envionmentVariables
apkBuild
previewIPAInfo
publishIPAToFir

To be completed

• Dynamic Build by Combining Packaging Scripts with Jenkins

More articles

• Author of React Native Open Source Project OneM [500+ star], Address (Framework Development Completed by Enterprise Development Standards): https://github.com/guangqiang-liu/OneM : Welcome to your little buddies
• Author's brief home page: contains more than 60 technical articles related to RN development http://www.jianshu.com/u/023338566ca5 Welcome to our little friends: pay more attention and appreciate more
• Author React Native QQ Technical Exchange Group: 620792950 Welcome Small Partners to Group Exchange Learning
• Friendship Tip: In the development of RN-related technical problems encountered, welcome small partners to join the communication group (620792950), ask questions in the group, exchange learning with each other.The exchange group also regularly updates the latest learning materials of RNA to everyone, thank you for your support!

Small partners sweep down the two-dimensional code to join RN technology exchange QQ group

QQ Group QR Code, engineer 500+ RN waiting for you to join