Runtime Config Mode enables web components to accept journey configuration at runtime via input attributes, eliminating the need for rebuilds. This allows a single deployment to dynamically serve different configurations, with the ability to update configuration instantly without reloading the application—significantly reducing deployment overhead.
Overall, both Pages Configuration (pagesConfig) and PFE Configuration (pfeConfig) can be provided at runtime via form-config, while environment-specific inputs such as locale and bffBaseUrl can be updated at runtime via runtime-app-config. However, not all parts of Pages Configuration are supported in runtime mode (see Limitations for details).
Supported capabilities:
đź’ˇ Interested in seeing a Runtime Journey? Experiment with different configurations using the Runtime Config Editor or use Prompt2Journey to have AI generate journey configurations for you.
Creating a runtime config web component is similar to generating a regular TALY web component, but uses the journey-src-runtime generator instead of the standard code generation process. The generator produces a web component that can accept configuration at runtime rather than having it baked in at build time.
To set up a runtime config web component, you first need to create a standard journey project and configure it as a web component. The runtime-specific configuration will be added in the next step.
Step 1: Create journey project
Use the journey generator to create a new TALY journey project:
npx nx generate @allianz/taly-nx:journey --name=<project-name>Step 2: Add web component configuration
Configure the project to generate as a web component using the webcomponent-config generator:
npx nx generate webcomponent-config --project=<project-name>This generator updates your project.json with the necessary targets and configurations for web component development.
đź’ˇ For more information about web component configuration, see the App as Web Component documentation.
Runtime mode requires additional Nx targets. These targets are not added by the standard generators, so you need to add them manually to your project's apps/<project-name>/project.json.
The three core targets are:
generate-only-runtime: runs the @allianz/taly-nx:journey-src-runtime generatordevelop-runtime: starts the dev server and depends on generate-only-runtimebuild: production build and depends on generate-only-runtimeđź’ˇ Keeping
develop-runtimeandbuilddependent ongenerate-only-runtimeensures the runtime sources are generated before serving/building.
Example configuration:
{
"targets": {
"generate-only-runtime": {
"executor": "nx:run-commands",
"options": {
"commands": [
"nx generate @allianz/taly-nx:journey-src-runtime --project=<project-name> --experimental=UseShadowDomEncapsulation --tsStrictMode --useNoopLocationStrategy"
]
}
},
"develop-runtime": {
"dependsOn": [{ "target": "generate-only-runtime" }],
"executor": "@nx/angular:dev-server",
"options": {
"buildTarget": "<project-name>:build-generated-app:webcomponent",
"port": 4502
}
},
"build": {
"dependsOn": [{ "target": "generate-only-runtime" }],
"executor": "nx:run-commands",
"configurations": {
"production": {
"commands": [
"nx build-generated-app <project-name> -c webcomponent",
"node apps/<project-name>/generated/tools/scripts/element-builder.js --dist-path=dist/<project-name>"
],
"parallel": false
}
},
"defaultConfiguration": "production"
}
}
}đź’ˇ The
generate-only-runtimetarget runs the@allianz/taly-nx:journey-src-runtimegenerator. This generator accepts the same options as the standardjourney-srcgenerator (documented in the App Generation documentation).
To start a development server for your runtime web component:
npx nx develop-runtime <project-name>The generated app will run in your browser in standalone mode. The source code is ready to be integrated as a web component, but with the develop-runtime command it runs as a regular app for testing purposes.
To build your runtime web component for production:
npx nx build <project-name>This command will:
generate-only-runtime target to generate the runtime-capable source codeOutput: dist/<project-name>/en-US/webcomponent-bundle.js
This bundled file can be deployed and integrated into any application. The web component will accept its configuration at runtime via input attributes.
Once your runtime web component is built and deployed, it needs to receive its configuration at runtime. Configuration is passed to the web component via HTML attributes when you integrate it into a host application.
Runtime web components accept configuration through two main properties:
formConfig: Contains the journey structure, pages, forms, navigation, and PFE configuration.runtimeAppConfig: Contains runtime settings like locale and BFF base URL.These inputs are exposed as kebab-case HTML attributes (form-config and runtime-app-config) when the component is used as a web component.
<project-name
form-config='{"pagesConfig": {...}, "pfeConfig": {...}}'
runtime-app-config='{"locale": "en", "bffBaseUrl": "https://api.example.com"}'
>
</project-name>đź’ˇ Configuration can be updated at runtime by changing these attribute values, and the web component will reflect the changes without requiring a page reload.
The form-config attribute contains two main parts: pagesConfig and pfeConfig.
{
"pagesConfig": {
"pages": [...],
"plugins": [...],
"frame": {...},
"title": "..."
},
"pfeConfig": {
"navConfiguration": {...},
"globalConfiguration": {...},
"appConfiguration": {...}
}
}For detailed configuration structure and options, check the following documentation:
Pages Configuration (pagesConfig):
PFE Configuration (pfeConfig):
Note on Custom Components: Custom components can be provided through plugins and work in runtime mode. The plugin must be included in
pagesConfig.pluginsduring the initial build. See Dynamic Forms: Custom Fields for more information.
The runtime-app-config attribute configures runtime behavior and integration settings.
{
"locale": "en-US",
"bffBaseUrl": "https://api.example.com"
}Properties:
locale: Language/locale code (e.g., en-US, de-DE). In runtime mode, this only affects date and time formatting.bffBaseUrl: Base URL for backend API endpointslocale parameter only affects date and time formatting. Text translations and other locale-specific content cannot be changed at runtime.runtimeCompatible: true, only its options can react to runtime configuration updates.