Env Configuration

The primary objective of the env.<mode>.ts file is to provide developers with a type-safe runtime environment, which seamlessly integrates with one of our environment provider implementations.

This facilitates effortless switching between different runtime environments as necessary. The <mode> parameter can be customized to accurately describe your specific runtime environments, with common examples including dev, staging, prod, etc.

Choose and configure a provider

Flagship™ Code on it’s own will not link environments to your runtime code, and requires an additional “provider” package to do so. We support two providers for managing environment configurations:

1. @brandingbrand/code-app-env: This is the recommended provider. It provides a streamlined way to manage environment configurations within your React Native applications. *
2. @brandingbrand/fsapp: While supported by Flagship™ Code, this app wrapper is considered a legacy solution. It is recommended to use @brandingbrand/code-app-env for new projects.

Configure your env.<mode>.ts files

Create the env.<mode>.ts in your configured envPath directory. You may find and configure your envPath in your flagship-code.config.ts file.

For example purposes we will choose the dev mode.

touch ./coderc/env/env.dev.ts

Here is an example of the runtime environment.

env.dev.ts

import { defineEnv } from "@brandingbrand/code-cli-kit";

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

The options passed to defineEnv are represented by the AppEnv type. This custom type is generated by the developer for their project and is usually located within the src/ directory. A typical declaration file might resemble the following example.

app.d.ts

interface AppEnv {
  id: string;
  domain: string;
}

The .d.ts extension enables the type to be utilized throughout the TypeScript project without requiring explicit imports. Specifically, if you’re utilizing the @brandingbrand/code-app-env package, you have the opportunity to extend the exposed AppEnvironment type, thereby enhancing type safety and ensuring consistency throughout your codebase.

app-env.d.ts

import "@brandingbrand/code-app-env";

declare module "@brandingbrand/code-app-env" {
  interface AppEnvironment extends AppEnv {}
}

Upon importing env from @brandingbrand/code-app-env, it will be automatically fully typed according to the generated type specific to your project. This ensures comprehensive type coverage, aligning seamlessly with your project’s requirements and enhancing overall type safety.