Deploying Custom Code

In this tutorial, you will learn how to preview code changes in your Test App while you are coding, without having to create a new build each time. You will only need to create a new build when you are finished with your code changes and you are ready for your code to be officially merged into your app.

Before starting, make sure to connect your Git repo to your BuddyBoss account, and to set up your Git repo properly with our starter custom code template. Then follow the steps below to start a new Development Session in your Test App.

New Development Session

1. If on a Mac, open Terminal. If on Windows, open your Command Prompt.
2. In the command line, navigate (cd) into your Git repo.
3. Install the BuddyBoss Bundler: npm install -g buddyboss-bundler
4. Run the BuddyBoss Bundler: buddyboss-bundler
5. Enter your App ID, and press Enter.
6. Enter your App Key, and press Enter.
7. Scan the QR code from your Test App to start the session.

Session Commands

1. Type ‘s‘ to run your development session on multiple devices. Then scan the QR code from your other device.
2. Type ‘r‘ to reload your latest changes into the app. You can also shake the app and tap Reload.
3. Type ‘q‘ to quit the development session. You can also shake the app and tap End Session, which will end the session in the app but leave the session running in the command line (in case you have sessions running simultaneously on multiple devices).
4. Type ‘d‘ to open the Debug Tool in a web browser. This tool provides a console log to help you debug your React Native code. It also displays a log of all API responses coming from your app, in real time.

Switching Branches

To switch branches, simply change the Head branch in your Git repo, and type ‘r’ to reload the code from the new branch into your development session.

Switching Connected Site

To switch the connected site, shake your device and tap ‘Switch Connected Site’. The app will reload with data from the site you switched to, with the custom code still deployed in the app.

Saving Code Changes

Once you are happy with your code changes, you can Commit and Push them in your Git repo. Make sure the repo and branch you are working in, is the same one you have connected for merging into builds in your Development settings in WordPress. Then you can generate a new build to have the changes merged into your actual app.

Code Sample

You can use the below code sample to quickly test if custom code is deploying correctly into your Test App. This is the code sample from the above video tutorial. After setting up your Git repo, add this code into index.js. If it works, you should see the text “This is my signup screen” when navigating into the Signup screen in your Test App.

import React from "react";
import {View, Text} from "react-native";
export const applyCustomCode = externalCodeSetup => {
	// call custom code api here
	// externalCodeSetup.configApi.setAppSwitchEnabled(true);
	externalCodeSetup.navigationApi.replaceScreenComponent("SignupScreen", () => (
		<View style={{flex: 1, alignItems: "center", justifyContent: "center"}}>
			<Text>This is my signup screen.</Text>
		</View>
	));
};