Lesson 1 - React Native DevOps basic concepts and settings

01/02/2023 - 4 phút

Follow  on Google News

Summary

Concepts

  • Hardware requirements
  • Source code control
  • iOS provisioning profiles
  • Build environment

Instructions

  • Initial computer setup
  • Installing applications
  • Adding a new node to Jenkins master
  • Running test job

System Overview

Concepts

Hardware requirements

  • Here I am using hardware Mac Mini M1 2020 (3.2Ghz Apple M1 Chip With 8-CPU, 16G RAM, SSD 512), but if you want to use it on the cloud, you can refer to the server here macincloud.com
  • My Mac Mini will be kept at the company and can only be built on the company’s internal network via the machine’s IP address, while you can bring the network out by NATing the IP to the network or using a service on Mac Cloud.

Source code control

In this guide, I will use Github to manage source code, Jenkins and GitHub work together to bring consistency and speed to the development team. Jenkins runs all types of automated DevOps workflows, such as hourly build verification, nightly builds, on-demand builds, and many more.

iOS provisioning profiles

  • My favorite part of iOS development is Provisioning profiles. I like the Android approach because of its simplicity, especially when managing different types of builds. Apple’s approach to building destinations is limiting and requires additional work from developers to test all cases.
  • To use Provisioning profiles, we use Match, which stores and updates iOS provisioning profiles and signing certificates. All files created by Match are then stored in an encrypted Github repository, with the decryption key shared by the development team.

Build environment

  • Releasing a React Native (RN) project for production requires a lot of tools. At a minimum, a successful release will use Node.js, NPM/Yarn, Xcode, and Android Studio. Projects that incorporate third-party SDKs add complexity and additional tools to releases. Managing this complexity is critical to creating a build process.
  • It is very important for all developers working on the project to have the same environment. Automatically incrementing the version in the environment for RN is not as simple as other platforms - there are many tools and many places to make small mistakes. The small differences between the development machine and the build machine can lead to wasted developer time and the potential to sit and debug build errors.
  • Setting up and installing Jenkins requires standardizing the build environment for yourself and the development team. Develop in the same environment that runs your builds.

Instructions

Initial computer setup

1. Update to the latest operating system

To ensure that the build runs smoothly and the environment is synchronized with the developer, we need to update the system by updating the operating system:

  1. Select the Apple icon
  2. Select ‘Software Update’
  3. Update macOS

2. Install Xcode

  1. Open the Appstore application

  2. Search for Xcode

  3. Click on download and install

  4. Open Xcode and complete the initial setup.

Click on Agree

Click on Install

Click on Continue

Finish the setup

3. Install xcode cli

Open the terminal and type the command:

xcode-select --install

Click on Install

Click on Agree

Installation successful

Next, use the command:

sudo xcode-select -s /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -license

Enable developer mode with the command:

DevToolsSecurity -enable

4. Install Android Studio

Go to the Android Studio homepage to download it: https://developer.android.com/studio

Click on Download Android Studio Electric Eel

Select

because I am using an Apple M1 chip.

After downloading, open the file and drag it to the Applications folder.

Then open Android Studio in the Applications folder.

Click on Open

Click on Ok

Click on Next

Select Standard, then click on Next

Click on Next

Click on Next

Select Accept, then click on Finish

Click on Finish

5. Install Android SDK

Android Studio is now set up. Set up the necessary SDK components on the welcome screen.

Click on More Actions, then select SDK Manager. Check the boxes as shown in the image and then click on OK.

6. Install CLI software

  1. Homebrew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

This command installs Homebrew, a package manager for macOS.

  1. JDK 11
brew tap homebrew/cask-versions
brew install --cask zulu11

7. Install .zshrc

Open the .zshrc file and add the line below

# Android
export ANDROID_SDK="$HOME/Library/Android/sdk"
export ANDROID_SDK_TOOLS="$ANDROID_SDK/tools"
export ANDROID_SDK_TOOLS_BIN="$ANDROID_SDK_TOOLS/bin"
export ANDROID_PLATFORM_TOOLS="$ANDROID_SDK/platform-tools"
export PATH="$PATH:$ANDROID_SDK:$ANDROID_SDK_TOOLS"
export PATH="$PATH:$ANDROID_SDK_TOOLS_BIN:$ANDROID_PLATFORM_TOOLS"
# Fastlane
export LANG=en_US.UTF-8
export LANGUAGE=en_US.UTF-8
export LC_ALL=en_US.UTF-8

Use command to apply configuration

source $HOME/.zshrc

8. Install Jenkins

We install jenkins using the command

brew install jenkins-lts

After installing successfully, we start with the command

brew services start jenkins-lt

Then we go to http://127.0.0.1:8080/login?from=%2F to log into the system

We get the default password with the command

cat /Users/duytran/.jenkins/secrets/initialAdminPassword

Configure the public ip connection by opening all connection ips to jenkins by command

#nano /usr/local/opt/jenkins-lts/homebrew.mxcl.jenkins-lts.plist

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>Label</key>
	<string>homebrew.mxcl.jenkins-lts</string>
	<key>LimitLoadToSessionType</key>
	<array>
		<string>Aqua</string>
		<string>Background</string>
		<string>LoginWindow</string>
		<string>StandardIO</string>
		<string>System</string>
	</array>
	<key>ProgramArguments</key>
	<array>
		<string>/usr/local/opt/openjdk@17/bin/java</string>
		<string>-Dmail.smtp.starttls.enable=true</string>
		<string>-jar</string>
		<string>/usr/local/opt/jenkins-lts/libexec/jenkins.war</string>
		<string>--httpListenAddress=0.0.0.0</string> # <= Thêm ở đây
		<string>--httpPort=8080</string>
	</array>
	<key>RunAtLoad</key>
	<true/>
</dict>
</plist>

Then restart the service and connect normally using the network’s IP

brew services restart jenkins-lt

9. Install fastlane

We install using the fastlane command

brew install fastlane

So you have understood and installed the basic jenkins build server for React native, the next article I will guide you to build and push it to firebase distribution.