During app development and testing, we execute the NPM start command to start the service. However, it is still cumbersome and we need human intervention to release the code. The purpose of this article is to show how to automate our project using Jenkins.

1. Project preparation

The idea is to package bundles and put the files on the server.

The react-Native package results in bundle files and image resource files.

If app loaded local bundle or connect local development services, the resources can be normal visit, but if the access is multi-level directory address, http://www.xxx.com/awe/bundle.js, for example, pictures of address will only from the domain name http://www.xxx.com, Finally, the picture cannot be displayed.

This is because the Image component loading logic does not support multi-level directories. If you are interested, check out React Native Image resources for details.

Solution is provided in the Image/resolveAssetSource setCustomSourceTransformer, it allows us to determine the processing logic of the picture.

We’ll replace the serverUrl with the jsbundleUrl, so that the image will find the image from the bundle sibling.

If you have other needs, can refer to react – native/Libraries/Image/resolveAssetSource related code, setting setCustomSourceTransformer on its own.

import React from 'react';
import { AppRegistry, Platform } from 'react-native';
import { setCustomSourceTransformer } from 'react-native/Libraries/Image/resolveAssetSource';

import Entry from './src/entry';

if (process.env.NODE_ENV_REAL === "test") {
  // Customize the resource obtaining mode
  // Change the domain name root directory to the bundle directory
  // Android uses the drawable format
  setCustomSourceTransformer((resolver) = > {
    resolver.serverUrl = resolver.jsbundleUrl;

    if (Platform.OS === "android") {
      return resolver.drawableFolderInBundle();
    }

    return resolver.defaultAsset();
  });
}

AppRegistry.registerComponent('awe', () => Entry);
Copy the code

2. Jenkins configuration

2.1 Creating a Task

Click “New Task” to start filling in the task information, enter the task name and select “Build a Freestyle software project”.

2.2 Source code Management

To configure the project code in “Source Code Management”, take Git as an example, you need to configure two parameters:

  • Repositories address and authentication mode
  • Branches to build, we fill in$branchIs specified as a custom build parameter

2.3 Adding Task Parameters

Select “Parameterized build process” in “General”, then click “Add Parameters”, select Git Parameter from the candidate list, and configure the following two items:

  • Name: Specifies the variable name that can be accessed. For example, if configured as branch, the value can be obtained from $branch
  • Parameter Type: Select Branch. Other options can be configured as required

This gives $Branch, which was configured earlier in “Source Management”, access to all branches of the repository.

And an option argument: env, which specifies the target environment. Candidate data can be entered one line at a time.

2.4 Add build execution Shell

In “Build” click the “Add Build Step” button and select “Execute shell” from the candidate list.

Here’s a simple example of how env executes different scripts:

#! /bin/bash
echo -------------------------------------------------------
echoEnvironment:${env}
echo -------------------------------------------------------
# Preparation

yarn install

if [ "$env"= ="dev" ]
then
  yarn run bundle-android
  yarn run bundle-ios

elif [ "$env"= ="prod" ]
then
  yarn run prod-android
  yarn run prod-ios
fi
Copy the code

2.5 Deployment and Use

Finally, you deploy the generated bundle file together with the resource file to the server, and fill in the corresponding address in the app.

  • Ios: xxx.com/rn/juzizhou…
  • Android: xxx.com/rn/juzizhou…

In addition, note:

  1. Cancel “Use JS Deltas”
  2. You may need to set the mime-type for the bundle
  3. react-native bundleThere is a cache problem, using--reset-cacheParameter to remove

Write in the last

At this point, we can release it safely through Jenkins. In fact, we have had the idea of doing this from the beginning, but it has been delayed. Now we have finally completed the practice and written this article.

This is already the second article on Jenkins’ automation, including the wechat mini program I posted earlier and the two or three things Jenkins had to say. I will write about related practices when I have a chance.

This post appears on the author’s blog React Native and Two or three things Jenkins had to say