Oryx: Presets

The presets package contains standard feature sets and resources that are used to create sample applications without writing boilerplate. Presets might be too opinionated to use for a production application, but they let you get started quickly.

Presets are typically used to demonstrate or try out Oryx applications. In production applications, the boilerplate is set up in a more optimized way, by leaving out the features that are not used.

Dependencies

Presets are provided in a separate npm package.

The standard boilerplate uses the presets as the single package to install Oryx applications. To simplify the installation, the preset application contains dependencies on all Oryx npm packages. Because a production application is unlikely to use all the packages, it makes sense to leave out the unneeded ones.

Feature sets

A feature set contains a group of features that can be added with a single reference. A good example of using a feature set is provided in the boilerplate code:

import { appBuilder } from "@spryker-oryx/core";
import { storefrontFeatures } from "@spryker-oryx/presets/storefront";

export const app = appBuilder().withFeature(storefrontFeatures).create();

The storefrontFeatures feature set contains a list of features that exposes all the available storefront features:

export const storefrontFeatures: AppFeature[] = [
  productFeature,
  cartFeature,
  checkoutFeature,
  userFeature,
  ...

Feature sets also contain static experience data. Experience data includes the structure and layout of the components of an application, such as pages and sections. By utilizing the static experience data provided by the presets, you don’t need to set up any boilerplate code. Moreover, we avoid hardcoded page structures which enables personalized experiences.

For more information about feature sets, see Feature sets.

Themes

A theme represents the global visual appearance of an application, including typography, colors, and other specific design elements, such as the color of a form field’s placeholder. Themes are built with design tokens, which are configurable values that are used in CSS properties. Configuring these design tokens lets you customize a theme and align the application and its components with your brand identity or specific design requirements.

To apply a theme to your Oryx application, you can import it from the preset package and use it during the application setup:

import { appBuilder } from "@spryker-oryx/core";
import { storefrontFeatures } from "@spryker-oryx/presets/storefront";
import { storefrontTheme } from '@spryker-oryx/themes';

export const app = appBuilder()
  .withFeature(storefrontFeatures)
  .withTheme(storefrontTheme)
  .create();

Themes help maintain a consistent and coherent visual experience throughout your application. They provide a centralized way to manage and apply design tokens, ensuring a unified look and feel across components and screens.

Resources

Most web applications use a /public folder to host static resources. This requires a folder in the boilerplate code or a process to generate it, which is not easy to upgrade over time.

Resources are an alternative approach, which allows for lazy loading of web resources into Oryx applications. The most common example of a resource is an image or icon.

Resources are lazily loaded, so that the runtime performance is not affected when a lot of resources are used.

You can add resources to your application with the appBuilder() API:

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

const app = appBuilder()
  .withFeatures(...),
  .withResources(myResources);
  .create();

As an application developer, you might want to create your own resources:

import { ResourceGraphic } from '@spryker-oryx/experience';

const myResources: Resources = {
  logo: {
    source: () => import('my-logo').then((m) => m.default),
  },
  otherImg: {
    source: () => import('my-other-img').then((m) => m.default),
  },
};