Create a product

Its logical representation is a directory named src/products/{AppName} that has the following structure :

📁 target1
📁 ...
📁 targetn
📄 i18n.ts
📄 manifest.ts

target1 .. targetn

Each directory corresponds to a target exposing the product.

If the product is supported by a webapp and a mobile app, there will typically be server, web, rn directories (or similar).

Check Expose a target for more details.

manifest

It's a file named manifest.ts exporting a const named Manifest that must satisfy the ProductManifest interface.

export const Manifest: ProductManifest = {
    appReg: [{ name: 'Trading' }],
    name: 'SuperTrader',
};

appReg stands for "app registry". It lists all the apps the product uses. It provides an optional ucds.exclude property in order to prevent some use cases from being mounted. This is particularly useful when you have a generic app (e.g. Auth) providing a large range of use cases, but some products don't need all of them.

name must be the same as the product directory name.

i18n

It's a file named i18n.ts exporting a const named I18n that must satisfy the ProductI18n interface.

Unlike the app i18n, this one gives you more freedom to define translation keys.

import { I18nEN } from 'libmodulor/locales/en';

import { I18n as TradingI18n } from '../../apps/Trading/index.js';

export const I18n: ProductI18n = {
    en: {
        ...I18nEN,
        ...TradingI18n.en,
        p_desc: 'A simple app to trade crypto, shares and other assets',
        p_slogan: 'Trading made simple',
    },
};

Note how we include the i18n of :

• the library (I18nEN) to provide basic translations of exposed primitives
• the apps (TradingI18n) to provide apps translations