-
Notifications
You must be signed in to change notification settings - Fork 141
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2784 from crherman7/feat/fsapp_plugin
feat(fsapp): add fsapp plugin
- Loading branch information
Showing
68 changed files
with
1,131 additions
and
1,300 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,158 @@ | ||
| --- | ||
| title: plugin-fsapp | ||
| --- | ||
|
|
||
| # plugin-fsapp | ||
|
|
||
| The `@brandingbrand/code-plugin-fsapp` is a specialized plugin for Flagship Code that manages environment configurations and native module setup for React Native applications using @brandingbrand/fsapp. It handles the complexities of environment switching, native constants, and platform-specific implementations. | ||
|
|
||
| ## Key Features | ||
|
|
||
| - Environment switching capabilities for development, staging, and production | ||
| - Automated native module configuration for iOS and Android | ||
| - Native constants management | ||
| - Support for React Native 0.72 and 0.73 | ||
| - Type-safe environment configuration | ||
|
|
||
| ## Install | ||
|
|
||
| Add `@brandingbrand/code-plugin-fsapp` as a development dependency to your React Native project. | ||
|
|
||
| import {Tabs, TabItem} from '@astrojs/starlight/components'; | ||
|
|
||
| <Tabs> | ||
| <TabItem label="yarn"> | ||
|
|
||
| ```sh | ||
| yarn add --dev @brandingbrand/code-plugin-fsapp | ||
| ``` | ||
|
|
||
| </TabItem> | ||
| <TabItem label="npm"> | ||
|
|
||
| ```sh | ||
| npm install --save-dev @brandingbrand/code-plugin-fsapp | ||
| ``` | ||
|
|
||
| </TabItem> | ||
| <TabItem label="pnpm"> | ||
|
|
||
| ```sh | ||
| pnpm add --save-dev @brandingbrand/code-plugin-fsapp | ||
| ``` | ||
|
|
||
| </TabItem> | ||
| <TabItem label="bun"> | ||
|
|
||
| ```sh | ||
| bun add --dev @brandingbrand/code-plugin-fsapp | ||
| ``` | ||
|
|
||
| </TabItem> | ||
| </Tabs> | ||
|
|
||
| Your package.json should now be updated, `@brandingbrand/code-plugin-fsapp` should be listed as a `devDependency`. | ||
|
|
||
| ```json title="package.json" ins={10} | ||
| { | ||
| "name": "my-awesome-app", | ||
| "version": "1.0.0", | ||
| "author": "Your Name <[email protected]>", | ||
| "dependencies": { | ||
| "react": "^18.2.0", | ||
| "react-native": "~0.72.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@brandingbrand/code-plugin-fsapp": "1.0.0" | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ## Configure | ||
|
|
||
| ### Flagship Code Configuration | ||
|
|
||
| Upon installing the dependency, it is imperative to update the `flagship-code.config.ts` file. Specifically, ensure that the `plugins` array includes the newly installed dependency. This step is crucial, as Flagship Code will only invoke the plugin if it is listed within this array. | ||
|
|
||
| ```ts title="flagship-code.config.ts" ins={9} | ||
| import {defineConfig} from '@brandingbrand/code-cli-kit'; | ||
|
|
||
| export default defineConfig({ | ||
| buildPath: './coderc/build', | ||
| pluginPath: './coderc/plugins', | ||
| plugins: [ | ||
| // other plugins | ||
| '@brandingbrand/code-plugin-fsapp', | ||
| ], | ||
| }); | ||
| ``` | ||
|
|
||
| ### Environment Configuration | ||
|
|
||
| Create environment files following this structure: | ||
|
|
||
| ```typescript title="env.development.ts" | ||
| import {defineEnv} from '@brandingbrand/code-cli-kit'; | ||
|
|
||
| export default defineEnv({ | ||
| API_URL: 'https://dev-api.example.com', | ||
| FEATURE_FLAGS: { | ||
| enableFeatureA: true, | ||
| }, | ||
| }); | ||
| ``` | ||
|
|
||
| ### CLI Options | ||
|
|
||
| The plugin requires the following command-line options: | ||
|
|
||
| ```sh | ||
| --env <environment> # Specifies the initial environment (development, staging, production) | ||
| ``` | ||
|
|
||
| Example usage: | ||
|
|
||
| ```sh | ||
| flagship-code build --env development | ||
| ``` | ||
|
|
||
| ### Platform-Specific Setup | ||
|
|
||
| The plugin automatically handles: | ||
|
|
||
| - iOS | ||
|
|
||
| - Configures EnvSwitcher and NativeConstants modules | ||
| - Updates Xcode project settings | ||
| - Manages environment variables | ||
|
|
||
| - Android | ||
| - Sets up Java modules for environment switching | ||
| - Configures MainActivity and MainApplication | ||
| - Handles build-time environment configuration | ||
|
|
||
| For more detailed guidance and information, please refer to the [Flagship Code Configuration](/guides/config) guide. This resource offers comprehensive instructions and insights to assist you in configuring Flagship Code effectively. | ||
|
|
||
| ## Troubleshooting | ||
|
|
||
| Common issues and solutions: | ||
|
|
||
| 1. Environment files not detected | ||
|
|
||
| - Ensure files follow the naming convention: `env.<environment>.ts` | ||
| - Verify files are in the correct directory | ||
|
|
||
| 2. Build errors | ||
|
|
||
| - Check that all native dependencies are properly linked | ||
| - Verify React Native version compatibility | ||
|
|
||
| 3. Environment switching issues | ||
| - Confirm proper CLI flag usage | ||
| - Check environment file syntax | ||
|
|
||
| ## Additional Resources | ||
|
|
||
| - [Flagship Code Configuration Guide](/guides/config) | ||
| - [Environment Management](/guides/environments) | ||
| - [Native Module Setup](/guides/native-modules) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.