Recognized by Clutch.co as a top-rated Mobile App Development Company.
folio3-mobile
US 408 365 4638
START YOUR PROJECT
  • Solutions
    • Apps Discovery Services
    • Team Augmentation
    • Enterprise
    • AR/VR
    • IoT
    • Wearables
    • Field Sales
    • On Demand Apps
  • Industries
    • Retail
    • Agriculture
    • Healthcare
    • Pharmaceutical & Life Sciences
    • Manufacturing
    • Automotive
    • Logistics
    • Education
  • Technologies
    • Native Mobile Apps
      • iOS
      • Android
    • Cross Platform Apps
      • React Native
      • Flutter
      • Ionic
      • Xamarin
      • NativeScript
      • Sencha
  • Portfolio
  • Blog
  • Contact Us
Menu
  • Solutions
    • Apps Discovery Services
    • Team Augmentation
    • Enterprise
    • AR/VR
    • IoT
    • Wearables
    • Field Sales
    • On Demand Apps
  • Industries
    • Retail
    • Agriculture
    • Healthcare
    • Pharmaceutical & Life Sciences
    • Manufacturing
    • Automotive
    • Logistics
    • Education
  • Technologies
    • Native Mobile Apps
      • iOS
      • Android
    • Cross Platform Apps
      • React Native
      • Flutter
      • Ionic
      • Xamarin
      • NativeScript
      • Sencha
  • Portfolio
  • Blog
  • Contact Us

Automate React Native App Builds With Fastlane And Appcenter

Published by: Muhammad Saqlain | October 12, 2021 msaqlain
SCROLL AND BE AMAZED!
Home > App Development • App Testing • React Native > Automate React Native App Builds With Fastlane And Appcenter

Automating your application build process brings you speed, reliability and one less thing to worry about. It saves time, resources and effort getting an app from development to distribution.

What is a Fastlane?

  • Fastlane is an open-source platform aimed at simplifying Android and iOS deployment.
  • Easily publish new beta builds to testers so you can get valuable feedback, fast.
  • Automate fully working Continuous Delivery process.
  • It takes care of all the heavy lifting and makes it super easy to generate a signed ipa or app file

Why Fastlane?

What is Appcenter?

Microsoft Visual Studio App Center is an integrated mobile development lifecycle solution for iOS, Android and Windows apps. It brings together multiple services commonly used by mobile developers, including build, test, distribute, monitoring, diagnostics into one single integrated cloud solution.

You May Also Like: Make Your Code Reusable Between React And React Native

Getting started with Fastlane & Appcenter

Let’s begin with a simple Fastlane guide for building and uploading new react-native apps to Visual Studio App Center. There is no official guide available yet we have managed to successfully run it.

  • Install fastlane (Ruby is Prerequisite)

    sudo gem install fastlane
  • Initialize fastlane in your project

    cd YourAppName && mkdir fastlane && cd fastlane && touch Fastfile
  • The Fastfile stores the automation configuration that can be run with fastlane. Now we have an empty Fastfile in fastlane folder. All the available fastlane hooks, actions & lanes are documented here https://docs.fastlane.tools/. Some provided actions listed below which we will apply in this tutorial.
    • appcenter_upload (Distribute new release to App Center)
    • update_fastlane (Makes sure fastlane-tools are up-to-date when running fastlane)
    • ensure_git_branch (Raises an exception if not on a specific git branch)
    • push_to_git_remote (Push local changes to the remote branch)
    • ensure_git_status_clean (Raises an exception if there are uncommitted git changes)
    • increment_build_number (Increment the build number of your project)
    • IOS :
      • gym (Building and packaging apps)
      • cocoapods (Installs pod for project)
    • ANDROID :
      • gradle (Building and packaging apps)

IOS Configuration

Signing

For new projects, we need to create a bundle ID and provisioning profile. To create a new bundle ID, run:

fastlane produce create -i

To setup a provisioning profile, create a GIT repo and then run:

fastlane match init

A Matchfile will be created. Change the profile type (e.g. appstore, adhoc) and add your Apple developer account under username.

Now, add the following to the Fastfile:

platform :ios do    
  desc 'Fetch certificates and provisioning profiles'
  lane :certificates do
    match(app_identifier: 'com.app.bundle')
  end
end

Change com.app.bundle to the bundle ID you created earlier. In the future, pass readonly: true to the match action. This would ensure the command wouldn’t create new provisioning profiles.

Building

Add the following lane to iOS:

lane :bump_build_version do
  increment_build_number(xcodeproj: './ios/YourAppName.xcodeproj')
  commit_version_bump(message: 'Bump iOS build', xcodeproj: './ios/YourAppName.xcodeproj')
  git_pull
  push_to_git_remote
end

lane :build do
  cocoapods(podfile: "./ios/Podfile")
  certificates
  bump_build_version
  gym(
    scheme: 'YourAppName', 
    project: './ios/YourAppName.xcodeproj',
    clean: true, 
    workspace: './ios/YourAppName.xcworkspace, 
    export_method: 'development', 
    output_directory: './builds'
  )
end

Uploading

Add the following lane to iOS:

lane :beta do
  bump_build_version
  build
  appcenter_upload(
    api_token: ENV["APPCENTER_API_TOKEN"],
    owner_name: ENV["APPCENTER_OWNER_NAME"],
    owner_type: ENV["APPCENTER_OWNER_TYPE"],
    app_name: ENV["APPCENTER_APP_NAME_IOS"],
    ipa: ENV["IPA_PATH"]
  )
end

Run fastlane ios beta. Your IOS application is now on App Center! 

Android Configuration

Building

platform :android do   
  desc 'Bump version and Build the Android application.'
  lane :bump_build_version do
    path = '../android/app/build.gradle'
    re = /versionCode\s+(\d+)/ 

    s = File.read(path)
    versionCode = s[re, 1].to_i     
    s[re, 1] = (versionCode + 1).to_s

    f = File.new(path, 'w')     
    f.write(s)     
    f.close  

    repo_clean = `git status --porcelain`.empty?     
    if !repo_clean           
      git_commit(path: 'android/app/build.gradle', message: 'Bump android build')     
    end     
    git_pull           
    push_to_git_remote 
  end

  lane :build do     
     gradle(task: 'clean', project_dir: 'android/')     
     gradle(
        task: 'assemble', 
        build_type: 'release', 
        project_dir: 'android/',
        flavor: ENV["ANDROID_FLAVOUR"]
     )   
  end 
end

Generated .apk will be at 
android/app/build/outputs/apk/release/app-release.apk

Uploading

Add the following to the Android lane:

desc 'Build and upload to App Center.'
lane :beta do
  bump_build_version
  build
  appcenter_upload(
    api_token: ENV["APPCENTER_API_TOKEN"],
    owner_name: ENV["APPCENTER_OWNER_NAME"],
    owner_type: ENV["APPCENTER_OWNER_TYPE"],
    app_name: ENV["APPCENTER_APP_NAME_ANDROID"],
    apk: ENV["APK_PATH"]
  )
end

Run fastlane android beta. Your android application is now on App Center!


About msaqlain

A hardworking and dedicated individual, determined on the road to success, ever ready to take on challenges and accomplish what I set out to achieve.

Newsletter

Search

Archives

  • April 2022
  • March 2022
  • February 2022
  • October 2021
  • September 2021
  • May 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • May 2019
  • Categories

    • Android App Development
    • App Development
    • App Testing
    • Blog
    • Elasticsearch
    • flutter-app-development
    • IOT
    • React Native
    • Staff Augmentation

Recent Posts

  • Introduction to Nessus Vulnerability Scanning Tool
  • Error Boundary in React Native
  • Speech to Text Recognition in React Native
  • How to Patch NPM Packages
  • Firebase Crashlytics Integration in React Native

Tags

  • android
  • Automation
  • cross-platform
  • development
  • firebase
  • ios
  • QA
  • react-native
  • Testing
  • Test Script

Newsletter

Newsletter

Post navigation

Previous What is Google Maps Geometry Library & How it Works?
Next Introduction to Jetpack DataStore – Alternative to SharedPreferences

7 thoughts on “Automate React Native App Builds With Fastlane And Appcenter”

  1. ORP Versatile says:
    December 7, 2021 at 12:41 pm

    Thanks for sharing this information.

    Reply
  2. Next Brain says:
    December 10, 2021 at 8:47 am

    Good article.

    Reply
  3. sparity says:
    December 15, 2021 at 10:06 am

    Nice Article…! Thanks for sharing such a valuable post about Fastlane and automating react native app with Fastlane…

    Reply
  4. Sparko says:
    January 6, 2022 at 7:59 am

    MAN! this is really a well-written article.

    Thanks again for the amazing information. Cheers!

    Reply
  5. CodeWraps says:
    February 3, 2022 at 12:40 pm

    Hello, I Liked your blog so informative and shareable to others.

    Reply
  6. SGeeks says:
    February 22, 2022 at 12:45 pm

    The only reason for choosing Fastlane is its ability to automatically capture the localized screenshots for each language and device that your apps support.

    Reply
  7. John William says:
    February 23, 2022 at 11:08 am

    This article has improved my knowledge.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Schedule an appointment with our Mobile App Development Expert

    Footer Menu
    • Company
      • About Us
      • Portfolio
      • Blog
      • Careers
      • Contact Us
    • Solutions
      • Apps Discovery Services
      • Team Augmentation
      • Enterprise App Development
      • AR/VR Application Development
      • IoT Application Development
      • Wearables Apps Development
      • Field Sales
      • On-Demand Apps Development
    • Technologies
      • iOS
      • Android
      • React Native
      • Flutter
      • Ionic
      • Xamarin
      • NativeScript
      • HTML5
      • Sencha
    • Industries
      • Retail
      • Agriculture
      • Healthcare
      • Pharmaceutical
      • Manufacturing
      • Automotive
      • Logistics
      • Education

    US Office

    Belmont, California – 1301 Shoreway Road, Suite 160, Belmont, CA 94002

    Pleasanton, California – 6701 Koll Center Parkway, #250 Pleasanton, CA 94566

    Tel: +1 408 365 4638
    Support: +1 (408) 512 1812

    Mexico Office

    Amado Nervo #2200, Edificio Esfera 1 piso 4, Col. Jardines del Sol, CP. 45050, Zapopan, Jalisco, Mexico

    Bulgaria Office

    49 Bacho Kiro Street, Sofia, 1000, Bulgaria

    Canada Office​

    895 Don Mills Road, Two Morneau Shepell Centre, Suite 900, Toronto, Ontario, M3C 1W3, Canada

    UK Office

    Export House, Cawsey Way, Woking Surrey, GU21 6QX

    Tel: +44 (0) 14 8361 6611

    UAE Office

    Dubai, UAE – Dubai Internet City, 1st Floor, Building Number 12, Premises ED 29, Dubai, UAE

    Tel: +971-55-6540154
    Tel: +971-04-2505173

    Pakistan Office

    163 Bangalore Town, Main Shahrah-e-Faisal, Karachi –
    75350

    705, Business Center, PECHS Block-6, Shahrah-e-Faisal,
    Karachi – 75350

    First Floor, Blue Mall 8-R, MM Alam Road Gulberg III, Lahore

    Tel: +92-21-3432 3721-4 

    © 2021, Folio3 Software Inc., All rights reserved.

    • Privacy policy and terms of use
    • Cookie Policy
    Follow us on
    Facebook-f
    Twitter
    Linkedin-in

    Get a free app audit

      Tired of your app not performing up to the mark?

      Get a free technology and app strategy review.