Skip to content
Flagship Code

Getting Started

Flagship Code is a comprehensive Configuration as Code (CaC) toolkit designed to streamline your development process by managing your iOS and Android native code. This guide serves as your launchpad into the world of Flagship Code. Whether you are starting from the React Native CLI or if you already have an ongoing project, refer to the following instructions to seamlessly integrate Flagship Code into your existing workflow.

Quick Start

Compatibility

In your package.json verify you are using matching the versions of react-native and react packages noted below.

package.json
{
  "name": "my-awesome-app",
  "version": "1.0.0",
  "author": "Your Name <email@example.com>",
  "dependencies": {
    "react": "^18.2.0",
    "react-native": "~0.72.0"
  }
}

This Flagship Code v13 currently supports React Native version 0.72.+. Each major version of Flagship Code supports a new minor version of React Native.

React Native Support

Flagship Code™ is committed to maintaining compatibility with the latest versions of React Native. Recognizing the need for gradual migration in complex projects, we are implementing multi-version React Native support. This feature allows developers to seamlessly upgrade to newer versions of React Native while maintaining support for legacy versions within the same codebase.

Currently, Flagship Code™ is fully compatible with React Native versions 0.72 and 0.73, and we are continuously expanding support to include new releases as they become available. The framework intelligently detects the installed version of React Native in your project and automatically selects the appropriate compatibility profile, ensuring that your development experience remains consistent and stable across different React Native versions. This approach enables teams to adopt new technologies at their own pace without compromising the functionality of existing code.

Dependencies

There are two core packages that Flagship Code depends on for ephermal native code generation, cli and cli-kit. Add both of these packages a development dependencies to your project.

Terminal window
yarn add --dev @brandingbrand/code-cli @brandingbrand/code-cli-kit

These should now be reflected in your package.json.

package.json
{
  "name": "my-awesome-app",
  "version": "1.0.0",
  "author": "Your Name <email@example.com>",
  "dependencies": {
    "react": "~18.2.0",
    "react-native": ">=0.72.0 <0.74.0"
  },
  "devDependencies": {
    "@brandingbrand/code-cli": "13.0.0",
    "@brandingbrand/code-cli-kit": "13.0.0"
  }
}

Configuration

Flagship Code employs three distinct configurations to facilitate the generation of your native iOS and Android projects. These configurations encompass flagship-code.config.ts, build.<mode>.ts, and env.<mode>.ts, with <mode> denoting specific build or environment settings such as internal, store, dev, staging, or prod.

In a meticulous endeavor to maintain robustness, Flagship Code implements type guards across all configurations. This strategic approach minimizes potential side-effects, ensuring smooth execution when initiating actions to generate your native iOS and Android projects.

Flagship Code Configuration

Create the flagship-code.config.ts in the root of your project.

Terminal window
touch flagship-code.config.ts

Additionally create a directory named coderc. The coderc directory is a good location to store your Flagship Code assets. Ultimately this is completely configurable and you can put these configuration assets anywhere you would please.

Terminal window
mkdir coderc

This configuration serves as a cornerstone for project scaffolding flexibility within the realm of Flagship Code. It offers the freedom to define the locations of build configurations, environment configurations, and plugins, as well as specifying which plugins will be activated.

The provided example serves as an excellent starting point for initiating a React Native project. It’s worth noting that all paths specified in the configuration files are relative to the root directory of your project, ensuring clarity and ease of management.

flagship-code.config.ts
import {defineConfig} from '@brandingbrand/code-cli-kit';


export default defineConfig({
  buildPath: './coderc/build',
  envPath: './coderc/env',
  pluginPath: './coderc/plugins',
  plugins: [],
});

Build Configuration

Create a build configuration file in the directory that is denoted in your flagship-code.config.ts under the buildPath attribute.

Terminal window
touch ./coderc/build/build.internal.ts

The primary objective of the build configuration is to provide a mechanism for overriding default values within your native iOS and Android projects’ configurations. At its core, it necessitates only two mandatory attributes per platform, with all other settings being optional. Moreover, this configuration serves as the hub for defining plugin-specific native code configurations.

Although there may appear to be redundancy across build configurations, this redundancy is essential to accommodate potential variances in third-party dependencies’ requirements. The following example showcases the minimal setup required to initialize this configuration.

build.internal.ts
import {defineBuild} from '@brandingbrand/code-cli-kit';


export default defineBuild({
  ios: {
    bundleId: 'com.brandingbrand',
    displayName: 'Branding Brand',
  },
  android: {
    packageName: 'com.brandingbrand',
    displayName: 'Branding Brand',
  },
});

Env Configuration

Create a build configuration file in the directory that is denoted in your flagship-code.config.ts under the envPath attribute.

Terminal window
touch ./coderc/env/env.dev.ts

The primary aim of the env configuration is to furnish developers with a type-safe runtime environment. This feature is exclusively beneficial to developers leveraging @brandingbrand/fsapp as their routing solution. The env configuration offers a minimal example of its functionality.

env.dev.ts
import {defineEnv} from '@brandingbrand/code-cli-kit';


export default defineEnv<Env>({
  id: 'abc12345',
  domain: 'https://dev.myexampledomain.com',
});

Native Code Generation

With the dependencies and configuration requirements met, the native code is now prepared for generation. It’s crucial to grasp that Flagship Code’s primary objective is to manage iOS and Android code, as outlined in the Overview. Consequently, the existing iOS and Android directories will no longer be retained in your repository. Therefore, it’s imperative to append the ios and android directories to your .gitignore file.

.gitignore
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.


# Dependencies


node_modules
ios
android

You can now safely execute the prebuild command to generate your native iOS and Android projects. Ensure to run this command from the root directory of your project.

Terminal window
yarn flagship-code prebuild --build internal --env dev

Run App

The directories for both iOS and Android projects should now be available. You can proceed to utilize the standard methods for running the iOS and Android applications.

Terminal window
yarn react-native run-ios
yarn react-native run-android