### Install and Start Flyte Console

Source: https://github.com/flyteorg/flyteconsole/blob/master/README.md

Installs Node.js dependencies and starts the local development server for Flyte Console. This should be run after setting up the Flyte backend.

```bash
yarn install
yarn start
```

--------------------------------

### Start Local Flyte Backend

Source: https://github.com/flyteorg/flyteconsole/blob/master/README.md

Launches a local Flyte backend sandbox using Docker. Ensure Docker is installed and running.

```bash
docker run --rm --privileged -p 30080:30080 -p 30081:30081 -p 30082:30082 -p 30084:30084 cr.flyte.org/flyteorg/flyte-sandbox
```

--------------------------------

### Install Node.js and Yarn Versions with asdf

Source: https://github.com/flyteorg/flyteconsole/blob/master/CONTRIBUTING.md

Installs the Node.js and Yarn versions specified in the `.tool-versions` file within the project directory.

```bash
asdf install
```

--------------------------------

### Install Node.js Dependencies

Source: https://github.com/flyteorg/flyteconsole/blob/master/CONTRIBUTING.md

Installs all the necessary Node.js packages for the project using Yarn.

```bash
yarn install
```

--------------------------------

### Install vips for M1 MacBooks

Source: https://github.com/flyteorg/flyteconsole/blob/master/CONTRIBUTING.md

Installs the `vips` library, which is a dependency for proper build experience on M1 MacBooks. This is an optional step.

```bash
brew install vips
```

--------------------------------

### Start Flyte Console Development Server

Source: https://github.com/flyteorg/flyteconsole/blob/master/README.md

Use this command to start the Flyte Console development server. Ensure that the ADMIN_API_URL environment variable is not set in your profile if you are using the default configuration.

```bash
yarn start
```

--------------------------------

### Install asdf Package Manager

Source: https://github.com/flyteorg/flyteconsole/blob/master/CONTRIBUTING.md

Installs the `asdf` version manager using Homebrew. This tool helps manage different versions of Node.js and other runtimes.

```bash
brew install asdf
```

--------------------------------

### Add Node.js and Yarn Plugins to asdf

Source: https://github.com/flyteorg/flyteconsole/blob/master/CONTRIBUTING.md

Adds the Node.js and Yarn plugins to `asdf` to enable version management for these runtimes. Also installs `gpg`.

```bash
asdf plugin add nodejs https://github.com/asdf-vm/asdf-nodejs.git
asdf plugin-add yarn https://github.com/twuni/asdf-yarn.git
brew install gpg
```

--------------------------------

### Fix Python Errors on OSX

Source: https://github.com/flyteorg/flyteconsole/blob/master/README.md

Provides commands to resolve 'env: python: No such file or directory' errors on OSX by installing Python via Homebrew and creating a symlink.

```bash
brew install python
which python
where python3
ln -s /usr/bin/python3 /usr/local/bin/python
```

--------------------------------

### Generate SSL Certificate

Source: https://github.com/flyteorg/flyteconsole/blob/master/README.md

Run this command from the flyteconsole directory to generate necessary SSL certificates for local development.

```bash
make generate_ssl
```

--------------------------------

### Configure Admin API Environment Variables

Source: https://github.com/flyteorg/flyteconsole/blob/master/README.md

Set these environment variables to point to your desired admin service and specify SSL usage. Add them to your local profile for persistent configuration.

```bash
export ADMIN_API_URL=https://different.admin.service.com
export ADMIN_API_USE_SSL="https"
export LOCAL_DEV_HOST=localhost.different.admin.service.com
```

--------------------------------

### Run Flyte Console from Docker Image

Source: https://github.com/flyteorg/flyteconsole/blob/master/README.md

Launches the Flyte Console from a Docker image, specifying required environment variables for base URL and configuration directory. Assumes building from v1.0.0 on port 8080.

```bash
docker run -p 8080:8080 -e BASE_URL="/console" -e CONFIG_DIR="/etc/flyte/config" ghcr.io/flyteorg/flyteconsole:v1.0.0
```

--------------------------------

### Import New Package Module

Source: https://github.com/flyteorg/flyteconsole/blob/master/CONTRIBUTING.md

After configuring the new package and its paths, you can import modules from it using standard ES module syntax.

```javascript
import { getLoginUrl } from '@flyteorg/flyte-api’;
```

--------------------------------

### Add Record to Hosts File

Source: https://github.com/flyteorg/flyteconsole/blob/master/README.md

Manually add a record to your system's hosts file to map a custom domain to localhost. This is often required for custom domain configurations in local development.

```bash
sudo vim /etc/hosts

127.0.0.1 localhost.different.admin.service.com
```

--------------------------------

### Configure tsconfig.json for Child Package Usage

Source: https://github.com/flyteorg/flyteconsole/blob/master/CONTRIBUTING.md

To enable a parent package to use a child package, add the child package's path to the parent's tsconfig.json. This includes both the package directory and its tsconfig.json if it exists.

```json
{ "path": "../${package-name}" }
```

```json
{ "path": "../${package-name}/tsconfig.json" }
```

--------------------------------

### Use Local Cache in React Component

Source: https://github.com/flyteorg/flyteconsole/blob/master/CONTRIBUTING.md

Shows how to use the `useLocalCache` hook to persist user settings in the browser's Local Storage. Values are stored as JSON strings, so minimize object fields before storing.

```javascript
import { LocalCacheItem, useLocalCache } from 'basics/LocalCache';

export function MyComponent(props: Props): React.ReactNode {
    ...
    const [showTable, setShowTable] = useLocalCache(LocalCacheItem.ShowWorkflowVersions);

    return showTable ? <SomeComponent ...props onClick={() => setShowTable(!showTable)}/> : null;
}
```

--------------------------------

### Generate New Flyte Package

Source: https://github.com/flyteorg/flyteconsole/blob/master/CONTRIBUTING.md

Use this script to generate a new package within the Flyte project. After generation, you'll need to update configuration files to integrate the new package.

```bash
yarn generate:package
```

--------------------------------

### Conditional Logic for Test Environment

Source: https://github.com/flyteorg/flyteconsole/blob/master/CONTRIBUTING.md

Use the `isTestEnv()` function to conditionally execute code within a test environment. This is useful for mocking or specific test-related logic.

```javascript
import { isTestEnv } from 'common/env';
...
if (isTestEnv()) {...}
```

--------------------------------

### Update ESLint Configuration for New Package

Source: https://github.com/flyteorg/flyteconsole/blob/master/CONTRIBUTING.md

If you encounter 'yarn lint' issues related to undefined packages, update the '.
c.js' file by adding your new package to the 'import/core-modules' array.

```javascript
'import/core-modules': ['@clients/locale', '@clients/primitives', '@clients/theme']
```

--------------------------------

### Setting Feature Flags in Unit Tests

Source: https://github.com/flyteorg/flyteconsole/blob/master/packages/oss-console/src/basics/FeatureFlags/FEATURE_FLAGS.md

Wrap components with `FeatureFlagsProvider` for testing. Use `window.setFeatureFlag` to set flag values and `window.clearRuntimeConfig` to reset them after tests.

```typescript
function TestWrapper() {
    return <FeatureFlagsProvider> <TestContent /> </FeatureFlagsProvider>
}

describe('FeatureFlags', () => {
    afterEach(() => {
        window.clearRuntimeConfig(); // clean up flags
    });

   it('Test', async () => {
        render(<TestWrapper />);

        window.setFeatureFlag(FeatureFlag.FlagInQuestion, true);
        await waitFor(() => {
            // check after flag changed value
        });
    });

```

--------------------------------

### Modifying Feature Flags in Local Development

Source: https://github.com/flyteorg/flyteconsole/blob/master/packages/oss-console/src/basics/FeatureFlags/FEATURE_FLAGS.md

Temporarily switch feature flag values during local development by updating the `runtimeConfig` object.

```javascript
let runtimeConfig = {
    ...defaultFlagConfig,
    'add-new-page': true,
};
```

--------------------------------

### Configure Webpack Alias for New Package

Source: https://github.com/flyteorg/flyteconsole/blob/master/CONTRIBUTING.md

When adding a new package to the 'console' app, update webpack alias path resolutions in './storybook/main.js' and 'website/webpack.utilities.ts' to include the new package.

```javascript
'@flyteorg/flyte-api': path.resolve(__dirname, '../packages/flyte-api/src’
```

--------------------------------

### Enable Debug Output in Flyte Console

Source: https://github.com/flyteorg/flyteconsole/blob/master/CONTRIBUTING.md

To enable debug output for Flyte Console, set the 'debug' flag in localStorage. You can enable all output with 'flyte:*' or specific modules like 'flyte:adminEntity'.

```javascript
localStorage.debug = 'flyte:*'
```

```javascript
localStorage.debug = 'flyte:adminEntity'
```

--------------------------------

### Using Feature Flags in Components

Source: https://github.com/flyteorg/flyteconsole/blob/master/packages/oss-console/src/basics/FeatureFlags/FEATURE_FLAGS.md

Utilize the `useFeatureFlag` hook to conditionally render components based on flag status. Ensure the top-level component is wrapped by `FeatureFlagsProvider`.

```typescript
import { FeatureFlag, useFeatureFlag } from 'basics/FeatureFlags';

export function MyComponent(props: Props): React.ReactNode {
    ...
    const isFlagEnabled = useFeatureFlag(FeatureFlag.AddNewPage);

    return isFlagEnabled ? <NewPage ...props/> : null;
}
```

--------------------------------

### Adding New Feature Flags

Source: https://github.com/flyteorg/flyteconsole/blob/master/packages/oss-console/src/basics/FeatureFlags/FEATURE_FLAGS.md

Define new feature flags by adding them to the FeatureFlags enum and the defaultFlagConfig object. Ensure new flags are initially disabled.

```typescript
enum FeatureFlags {
    ...
    AddNewPage: 'add-new-page'
    UseCommonPath: 'use-common-path'
}

export const defaultFlagConfig: FeatureFlagConfig = {
    ...
    'add-new-page': false, // default/prior behavior doesn't include new page
    'use-common-path': true, // default/prior behavior uses common path
};
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.