Skip to content

Commit cbec379

Browse files
committed
feat(doc): re-add betaBuild docs
1 parent aecfc51 commit cbec379

File tree

1 file changed

+364
-0
lines changed

1 file changed

+364
-0
lines changed

documentation/docs/06-BetaBuild.md

+364
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,364 @@
1+
---
2+
slug: /BetaBuild
3+
title: Beta build
4+
---
5+
6+
🚧 It's an old documentation, we are looking for contributors 🚧
7+
8+
# Distributing beta builds
9+
10+
Developers love writing React Native code but no one likes deploying React Native app or distributing beta builds.
11+
12+
All your headaches will disappear with this documentation and the amazing [Fastlane](https://fastlane.tools/) tool :)
13+
14+
15+
## Before you start
16+
17+
You need a Mac. I'm sorry, but if you are a Windows user, you can stop reading right now.
18+
Fastlane will not work on Windows PC. But in all cases, if you need to deploy your app on IOS, you must have a Mac.
19+
20+
Let's explain which tools we are using to distribute beta builds:
21+
* [Fastlane](https://fastlane.tools/), the easiest way to automate beta deployments and releases for your iOS and Android apps. It handles all tedious tasks like generating screenshots, dealing with code signing and releasing your application.
22+
* [TestFlight](https://developer.apple.com/testflight/), part of App Store Connect, let you build your iOS app and invite internal or external users to test it
23+
* [Google Play](https://support.google.com/googleplay/android-developer/answer/3131213?hl=fr), which does the same job as TestFlight for Android apps
24+
25+
```
26+
If you love this documentation, give us a star, you will be a ray of sunshine in our lives :)
27+
```
28+
29+
_This documentation is a part of a React Native project template for building solid applications through separation of concerns between the UI, state management and business logic._
30+
_Just navigate to the [project home page](https://github.com/thecodingmachine/react-native-boilerplate) if you want to see more._
31+
32+
## Installing Fastlane
33+
34+
First you need to install Fastlane on your Mac. Follow these steps:
35+
36+
1. Install the latest Xcode command line tools:
37+
```
38+
$ xcode-select --install
39+
```
40+
2. Install Ruby using [Homebrew](https://brew.sh/):
41+
```
42+
$ brew install ruby
43+
```
44+
3. Install Fastlane with RubyGems:
45+
```
46+
$ sudo gem install fastlane -NV
47+
```
48+
49+
You are now ready to set up Fastlane for iOS and Android :rocket:
50+
51+
52+
## iOS
53+
54+
### Prerequisites
55+
56+
Before continuing make sure you have:
57+
58+
- [ ] Install all [required dependencies](https://facebook.github.io/react-native/docs/getting-started.html#installing-dependencies), with Xcode 9 or higher
59+
- [ ] Choose the [bundle identifier](https://cocoacasts.com/what-are-app-ids-and-bundle-identifiers/) of your app (for example `com.tcm.boilerplate`)
60+
- [ ] An Apple ID with an admin user, with its username (email, for example `[email protected]`) and password
61+
- [ ] Your app name, if not already created on the Developer Portal (for example `TCM React Native Boilerplate`). Fastlane can create applications in the Developer Portal and App Store Connect, so it's recommended to let Fastlane do the job for you.
62+
- [ ] Use the right [.gitignore](https://github.com/thecodingmachine/react-native-boilerplate/blob/master/template/ios/.gitignore) file inside the `ios` directory
63+
- [ ] You also need to create an App Icon to use Fastlane or you will get an error on running `fastlane beta`. You can simply create one using the website [MakeAppIcon](https://makeappicon.com/)
64+
65+
Open your Xcode project and modify some information:
66+
67+
- [ ] In the `General` tab, `Identity` section, change the `Bundle Identifier` to your identifier (useful for Fastlane)
68+
- [ ] In the `Signing & Capabilities` tab, `Signing` section, disable `Automatically manage signing`
69+
- [ ] In the `Build Settings` tab, set view filter on top to `All` and `Combined`, then go to the `Signing` section and into `Code Signing Identity`, set `Don't Code Sign` for the `debug` line (including `Any iOS SDK` also) and set `iOS Distribution` for the `release` line (including `Any iOS SDK` also).
70+
71+
72+
Like this:
73+
74+
| Code Signing Identity | < Multiple values > |
75+
| ------------- | ------------- |
76+
| Debug | Don't Code Sign |
77+
| Any iOS SDK | Don't Code Sign |
78+
| Release | iOS Distribution |
79+
| Any iOS SDK | iOS Distribution |
80+
81+
82+
### Setting up
83+
84+
First you need to set up Fastlane for your iOS project:
85+
```
86+
$ cd my-project/ios
87+
$ fastlane init
88+
```
89+
90+
*Note: If you have an error on this step, please see the `issues` section.*
91+
92+
93+
Fastlane will automatically detect your project and ask for any missing information.
94+
95+
The following questions will be asked:
96+
* `What would you like to use fastlane for?`
97+
* For this tutorial a good answer is `2 - Automate beta distribution to TestFlight`
98+
* `Select Scheme:`
99+
* Here we will select the scheme without `-tvOS` suffix
100+
* `Apple ID Username:`
101+
* If you don't know, you didn't read the "Prerequisites" step :)
102+
Our answer is `[email protected]`
103+
* `Password (for Apple ID Username):`
104+
* If you don't know, you didn't read the "Prerequisites" step :)
105+
Our answer is `keep it secret`
106+
107+
* If your account has multiple teams in the App Store Connect, you may have this question: `Multiple App Store Connect teams found, please enter the number of the team you want to use:`
108+
* Select the right team
109+
* If your account has multiple teams in the Developer Portal, you may have this question: `Multiple teams found on the Developer Portal, please enter the number of the team you want to use:`
110+
* Select the right team
111+
* If you haven't already created the App on the Developer Portal or App Store Connect, Fastlane can do it for you! (else you must have a message `Your app 'com.tcm.boilerplate' is available in your Apple Developer Portal / App Store Connect`)
112+
* It will ask `Do you want fastlane to create the App ID for you on the Apple Developer Portal / App Store Connect? (y/n)`
113+
* Type `y`
114+
* `App Name`:
115+
* `TCM React Native Boilerplate`
116+
117+
Fastlane will then give you some information about git, the files it will create, etc. Just type `enter` to continue.
118+
119+
**Congrats!** Fastlane has created some files.
120+
121+
If you are using Git, commit all generated files.
122+
123+
Once the setup has finished you can see a new folder inside the `ios` folder:
124+
```
125+
- fastlane/
126+
- Appfile
127+
- Fastfile
128+
```
129+
130+
It's not finish, you need to follow `Code Signing` part to setting up a provisioning profile.
131+
132+
For information:
133+
134+
`Appfile` contains identifiers used to connect to the Developer Portal and App Store Connect.
135+
You can read more about this file [here](https://docs.fastlane.tools/advanced/#appfile).
136+
137+
`Fastfile` contains all actions you can launch.
138+
You can read more about this file [here](https://docs.fastlane.tools/actions).
139+
Because we previously chose `Automate beta distribution to TestFlight` on set up, a `beta` [lane](https://docs.fastlane.tools/advanced/lanes/) is available by default.
140+
This `lane` contains 3 actions:
141+
* increment the build number of your app
142+
* build your app
143+
* upload to TestFlight
144+
145+
146+
### Code signing
147+
148+
Signing your app assures users that it is from a known source and the app hasn’t been modified since it was last signed. Before your app can integrate app services, be installed on a device, or be submitted to the App Store, it must be signed with a certificate issued by Apple.
149+
150+
A full guide is available on the fastlane doc, describing the best approaches for your [code signing process](https://docs.fastlane.tools/codesigning/getting-started/).
151+
152+
Using `match` is probably [the best solution](https://codesigning.guide/).
153+
Because we don't want to revoke our existing certificates, but still want an automated setup, we will use [cert and sigh](https://docs.fastlane.tools/codesigning/getting-started/#using-cert-and-sigh).
154+
155+
Add the following lines to your `Fastfile`, just after the `increment_build_number` function and before `build_app` (Note that you will need to replace some information):
156+
```
157+
get_certificates( # Create or get certificate, and install it
158+
output_path: "./builds" # Download certificate in the build folder (you don't need to create the folder)
159+
)
160+
get_provisioning_profile( # Create or get provisioning profile
161+
output_path: "./builds", # Download provisioning profile in the build folder
162+
filename: "provisioning.mobileprovision" # Rename the local provisioning profile
163+
)
164+
update_project_provisioning( # Set the project provisioning profile (related in Xcode to the General > Signing Release section)
165+
xcodeproj: "Boilerplate.xcodeproj",
166+
target_filter: "Boilerplate", # Name of your project
167+
profile: "./builds/provisioning.mobileprovision",
168+
build_configuration: "Release"
169+
)
170+
update_project_team( # Set the right team on your project
171+
teamid: CredentialsManager::AppfileConfig.try_fetch_value(:team_id)
172+
)
173+
```
174+
175+
Then, we need to configure the provisioning profile for the build step.
176+
177+
Add the following lines to your `Fastfile`, inside the `build_app` function, just after the `scheme` parameter (Make sure you add a `,` after the `scheme` parameter):
178+
```
179+
clean: true,
180+
export_method: "app-store",
181+
export_options: {
182+
provisioningProfiles: {
183+
CredentialsManager::AppfileConfig.try_fetch_value(:app_identifier) => CredentialsManager::AppfileConfig.try_fetch_value(:app_identifier) + " AppStore" # Value of this parameter is the name of the Provisioning Profile. By default, it will be "{bundleId} AppStore"
184+
}
185+
},
186+
build_path: "./builds",
187+
output_directory: "./builds"
188+
```
189+
190+
Thanks to this the Certificates and Provisioning Profile will be automatically created when you will create a beta build!
191+
:rocket: You are now ready to create your first beta build.
192+
193+
194+
### Creating a beta build
195+
196+
Creating a beta build and uploading it on TestFlight is now really easy.
197+
Just type the following:
198+
199+
```
200+
$ cd my-project/ios
201+
$ fastlane beta
202+
```
203+
204+
205+
## Android
206+
207+
### Prerequisites
208+
209+
Before continuing make sure you have:
210+
211+
- [ ] A Google Play Console *admin* account and its username (email, for example `[email protected]`) and password
212+
- [ ] Create your application in the Google Play Console (unlike for iOS Fastlane cannot do that for you)
213+
- [ ] Use the right [.gitignore](https://github.com/thecodingmachine/react-native-boilerplate/blob/master/template/android/.gitignore) file inside the `android` directory (if you are using this boilerplate you are good to go)
214+
- [ ] [Collect your Google Credentials](https://docs.fastlane.tools/getting-started/android/setup/#collect-your-google-credentials)
215+
:warning: In the Google Play Console, add the parameter `&hl=en` at the end of the URL (before any #) to switch to English. In some languages, the "Create Service Account" will not be available.
216+
Download the JSON key file, and copy it into `my-project/android/key.json`
217+
- [ ] Install [all dependencies](https://facebook.github.io/react-native/docs/getting-started.html#installing-dependencies-1) for macOS and Android
218+
219+
220+
### Setting up
221+
222+
First you need to set up Fastlane for your android project:
223+
```
224+
$ cd my-project/android
225+
$ fastlane init
226+
```
227+
228+
Fastlane will automatically detect your project and ask for any missing information.
229+
230+
The following questions will be asked:
231+
* `Package Name (com.krausefx.app)`
232+
* Our answer is `com.tcm.boilerplate`
233+
* `Path to the json secret file`
234+
* Type `key.json` (path to the file previously created in the Prerequisites step)
235+
* Download existing metadata and setup metadata management?
236+
* `y`
237+
238+
Fastlane will then give you some information about git, the files it will create, etc. Just type `enter` to continue.
239+
240+
Congrats! Fastlane has created some files.
241+
If you are using Git, commit all generated files.
242+
243+
Once the setup has finished you can see a new folder inside the `android` folder:
244+
```
245+
- fastlane/
246+
- Appfile
247+
- Fastfile
248+
```
249+
250+
`Appfile` contains identifiers used to connect to the Google Play Console and the link to the `key.json` file.
251+
You can read more about this file [here](https://docs.fastlane.tools/advanced/#appfile).
252+
253+
`Fastfile` contains all actions you can launch.
254+
You can read more about this file [here](https://docs.fastlane.tools/actions).
255+
A `beta [lane](https://docs.fastlane.tools/advanced/lanes/)`, a `deploy lane` and a `test lane` are available by default.
256+
257+
You can remove the `deploy lane` to avoid some mistakes, and replace the `beta` lane by the following:
258+
```
259+
desc "Submit a new Beta Build to Play Store"
260+
lane :beta do
261+
store_password = prompt(text: "Signing Store Password: ", secure_text: true)
262+
key_password = prompt(text: "Alias Key Password: ", secure_text: true)
263+
releaseFilePath = File.join(Dir.pwd, "..", "my-release-key.keystore")
264+
gradle(task: 'clean')
265+
gradle(
266+
task: 'assemble',
267+
build_type: 'Release',
268+
print_command: false,
269+
properties: {
270+
"android.injected.signing.store.file" => releaseFilePath,
271+
"android.injected.signing.store.password" => store_password,
272+
"android.injected.signing.key.alias" => "my-key-alias",
273+
"android.injected.signing.key.password" => key_password,
274+
}
275+
)
276+
upload_to_play_store(
277+
track: 'internal'
278+
)
279+
```
280+
281+
As you can see, we need to sign our APK with a signing key.
282+
Don't worry, we will generate it in a moment, let's just explain what the lane do.
283+
284+
First, script ask the user two values : signing store and alias key passwords, with the [`prompt`](https://docs.fastlane.tools/actions/prompt/) fastlane plugin.
285+
Asking the user those passwords ensure that no secret keys are stored into your app.
286+
Then, this lane clean your project, assemble the application, automatically injecting signing configuration at runtime, before uploading it in the Google Play Store.
287+
Upload is made `internally`, that means only internal testers will be allowed to download the app. You can learn more about different test types [here](https://support.google.com/googleplay/android-developer/answer/3131213).
288+
289+
290+
#### Generating a signing key
291+
292+
[Official documentation](https://facebook.github.io/react-native/docs/signed-apk-android#generating-a-signing-key) well explained how to generate a signing key.
293+
294+
You simply need to run the following :
295+
```bash
296+
keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
297+
```
298+
This command prompts you for passwords for the keystore and key and for the Distinguished Name fields for your key.
299+
It then generates the keystore as a file called `my-release-key.keystore`
300+
301+
Note: Remember to keep your keystore file private and never commit it to version control.
302+
303+
Copy the generated `my-release-key.keystore` file into the root of `android` folder.
304+
305+
You're now good to build and deploy !
306+
307+
308+
### Creating a beta build
309+
310+
:warning: The first time you deploy your application, you MUST upload it into Google Play Console `manually`.
311+
Google don't allow to use theirs APIs for the first upload.
312+
To do this, comment the three last lines of the `Fastfile`
313+
```
314+
#upload_to_play_store(
315+
# track: 'internal'
316+
# )
317+
```
318+
or create a new lane without those lines.
319+
320+
:exclamation: There is no official plugin to automatically upgrade android version code (unlike the iOS lane).
321+
Before each deployment, be sure to `manually` upgrade the `versionCode` value inside `android/app/build.gradle`.
322+
We are working on an automatic way to do this.
323+
324+
Creating a beta build and uploading it on Google Play is now really easy.
325+
Just type the following:
326+
327+
```
328+
$ cd my-project/android
329+
$ fastlane beta
330+
```
331+
332+
333+
## Troubleshooting
334+
335+
### Stuck at `bundle install` or `bundle update` running `fastlane init`
336+
337+
If the `fastlane init` process is stuck when running `bundle install` or `bundle update` it may mean that `bundle` command is asking for root permissions.
338+
You can stop the process and retry again with `sudo fastlane init`, however you will need to change back ownership of the generated files to your user when it finishes by running this command:
339+
```
340+
$ sudo chown <your-user> <files>
341+
```
342+
343+
### Permission denied running android beta lane
344+
345+
If you have a `Permission denied` issue on an android beta build, please run:
346+
```
347+
$ chmod a+x /my-project/android/gradlew
348+
```
349+
350+
### Fastlane init failed
351+
```
352+
fastlane init failed
353+
["The request could not be completed because:", "Could not receive latest API key from App Store Connect, this might be a server issue."]
354+
Something failed while running `fastlane init`
355+
Tried using Apple ID with email '[email protected]'
356+
You can either retry, or fallback to manual setup which will create a basic Fastfile
357+
Would you like to fallback to a manual Fastfile? (y/n)
358+
```
359+
Answer `n`, and retry previous steps with a correct Apple ID and password.
360+
Make sure you are connected to internet.
361+
362+
363+
---
364+
If you need more information, don't hesitate to read the [fastlane documentation](https://docs.fastlane.tools/)

0 commit comments

Comments
 (0)