Configuration

After creating your new FLEX application with flexcli new example_app, you’ll need to configure several key components to get your Mobile App up and running. This guide covers the essential configuration steps using SAP Starter Kit as an example with Contentful powering the CMS.

Environment Configuration

1. Setting Up Environment Variables

Your project includes an example.env file that needs to be configured with your specific credentials and endpoints. Copy this file to .env and fill in the required values:

cp example.env .env

SAP Configuration

Configure your SAP Commerce Cloud connection:

SAP_CLIENT_ID=your_sap_client_id
SAP_CLIENT_SECRET=your_sap_client_secret
SAP_BASE_URL=https://your-sap-instance.com

Required for:

• User authentication
• Product catalog access
• Cart and order management
• Search functionality

Contentful CMS Configuration

Set up your Contentful CMS integration:

CONTENTFUL_ENVIRONMENT=master
CONTENTFUL_SPACE_ID=your_space_id
CONTENTFUL_DELIVERY_API_TOKEN=your_delivery_token
CONTENTFUL_PREVIEW_API_TOKEN=your_preview_token
CONTENTFUL_MANAGEMENT_API_TOKEN=your_management_token
CONTENTFUL_HOST=cdn.contentful.com

Token Purposes:

• Delivery API Token: For published content in production
• Preview API Token: For unpublished/draft content during development
• Management API Token: For content management operations (optional)

2. Loading Environment Variables

The application automatically loads environment variables during startup:

await dotenv.load();
final String kCmsFeatureApiKey = dotenv.get('CONTENTFUL_DELIVERY_API_TOKEN');

Internationalization (i18n) Configuration

Supported Locales

Configure the languages and regions your app supports by modifying the I18nFeature initialization in main.dart:

I18nFeature(
  supportedLocales: [
    const Locale('en', 'CA'), // English (Canada)
    const Locale('en', 'US'), // English (United States)
    const Locale('fr', 'CA'), // French (Canada)
    const Locale('es', 'MX'), // Spanish (Mexico)
  ],
  defaultLocale: const Locale('en', 'CA'),
),

Adding New Locales

To add support for additional languages:

1. Add the locale to the supportedLocales array
2. Create corresponding translation files in your assets/i18n/ directory
3. Update your pubspec.yaml to include the new translation assets

Changing Default Locale

Update the defaultLocale parameter to set your preferred default language:

defaultLocale: const Locale('en', 'US'), // Change to your preferred default

Application Navigation Configuration

Root Page and Bottom Navigation

The starter kit includes a bottom navigation structure defined in root_page.dart. This file controls the main navigation tabs of your application.

Common customizations:

• Add or remove navigation tabs
• Change tab icons and labels
• Modify the navigation flow
• Customize the bottom navigation bar appearance

To customize the navigation structure, locate and modify the root_page.dart file in your project structure.

FLEX Core Features Configuration

Logging Configuration

The application includes comprehensive logging setup:

LoggingFeature(
  config: const FlexLoggerConfig(
    minLevel: kDebugMode ? LogLevel.debug : LogLevel.info,
    showEmojis: true,
    showTimestamp: true,
    showSource: true,
    useShortName: true,
    enableColors: true,
  ),
),

Configuration Options:

• minLevel: Set logging verbosity (debug, info, warning, error)
• showEmojis: Enable emoji indicators in logs
• showTimestamp: Include timestamps in log entries
• showSource: Show the source of each log entry
• useShortName: Use abbreviated logger names
• enableColors: Enable colored console output

CMS Feature Configuration

Configure content management system integration:

CMSFeature(
  provider: ContentfulProvider(apiKey: kCmsFeatureApiKey),
  enableDebugLogging: true, // Set to false in production
),

Network Configuration

For development environments with self-signed certificates, the starter kit includes certificate bypass logic:

class MyHttpOverrides extends HttpOverrides {
  @override
  HttpClient createHttpClient(SecurityContext? context) {
    return super.createHttpClient(context)
      ..badCertificateCallback =
          (X509Certificate cert, String host, int port) => true;
  }
}

Important: Remove or modify this for production deployments to maintain security.

Development vs Production Configuration

Debug Mode Settings

Several configurations automatically adjust based on the build mode:

// Logging verbosity
minLevel: kDebugMode ? LogLevel.debug : LogLevel.info,

// CMS debug logging
enableDebugLogging: kDebugMode, // Enable only in debug builds

Next Steps

After completing the basic configuration:

1. Test Integration: Verify SAP Commerce and Contentful CMS connectivity
2. Customize the UI: Configure FLEX UI theme design tokens and sizes
3. Add Features: Extend the starter kit with additional FLEX features
4. Customize Navigation: Modify the bottom navigation to match your app structure

Troubleshooting

Common Configuration Issues

Environment Variables Not Loading:

• Ensure .env file is in the project root
• Verify file name (not example.env)
• Check that flutter_dotenv is properly configured

SAP Connection Issues:

• Verify SAP credentials and base URL
• Check network connectivity
• Review certificate configuration for HTTPS endpoints

Contentful CMS Issues:

• Validate API tokens and space ID
• Ensure content models are published
• Check environment configuration (master vs. development)

Locale Issues:

• Verify translation files exist for all supported locales
• Check pubspec.yaml asset configuration
• Ensure locale codes follow ISO standards