Oryx application orchestration

Last updated:
Edit on GitHub

An Oryx application starts with the application orchestration. It lets you bootstrap and configure your application from reusable bits and pieces, such as the following:

Application orchestration is used to configure and customize Oryx applications. As Oryx is a framework, it provides different pieces of functionality for different use cases, like B2B, B2C, Back Office, or Fulfillment. And orchestration lets you select specific functionality from Oryx to match your use case.

Also, application orchestration defines how functionality is loaded in an application. For example, when components are used on a page, they are lazy-loaded, but, during application startup, services are loaded eagerly.

Application builder

To start using orchestration, you need to import appBuilderfrom @spryker-oryx/core. Then, you can add functionality, like features and theme, to your application.

appBuilder uses a chain pattern where each customization is added using a respective .with* method. This is the minimum boilerplate code required for an application to work. Once you start building more complex use cases, instead of using a preset, we recommend extending a preset or creating your own feature set.

Application builder lets you compose and customize different pieces of functionality. The builder is chainable and pluggable, and it supports the following built-in plugins:

Also, you can add custom plugins by using the with API.

Application setup

Here is an example of a simple B2C application setup:

import { appBuilder } from '@spryker-oryx/core';
import { b2cFeatures, b2cTheme } from '@spryker-oryx/oryx-presets';

const app = appBuilder()
  .withFeature(b2cFeatures)
  .withTheme(b2cTheme)
  .withEnvironment(import.meta.env);

To create the application with this configuration, run the following:

app.create().catch(console.error);

Now the application is up and running.

Customization of options

When you are configuring an Oryx application, you may need to customize some of its options which have a reasonable defaults but may not suit your needs.

For this, you can use the appBuilder.withAppOptions() API, which lets you customize the following:

  • Injector, it’s parent, and context.
  • Global component options, like a root mounting selector.

Here is an example of using it:

import { appBuilder } from '@spryker-oryx/core';

appBuilder().withAppOptions({ components: { root: 'my-root-app' } });

Next steps

For more details about application orchestration, see the following documents: