Oryx

CI Checks	Oryx component dev env status	Composable storefront dev env status

Oryx is a framework for building composable storefronts, providing a rich library of components, a render engine, and a design system. It is based on web components and vanilla JavaScript (Typescript), allowing integration into any web framework. Oryx easily integrates with API via adapters (mock adapters by default), and provides an out-of-the-box Spryker Glue API support.

Key Characteristics

• Composable & Configurable – Oryx components can be composed and configured to fit your project needs.
• Extensible & Upgradable – All components are customizable without losing the ability to upgrade to newer versions.
• Web Framework Agnostic – Oryx can be integrated into any web technology, it is based on web components and uses plain Typescript code wherever possible.
• Component Driven – Oryx is component centric and uses are based on web components
• Multi-Site – Oryx supports multiple sites within one installation.
• High Quality – Optimized for performance, SEO, and responsive design, with keyboard support.

Platform Features

• SSR – Supports server-side rendering for improved performance and SEO.
• Lazy Loading – Delays loading of non-critical resources for faster initial load time.
• Partial Hydration – Enhances performance by only hydrating critical components on initial load.
• Layout & Theming – Provides a flexible layout system and easy theme customization.
• Routing – Configurable and dynamic routing for a seamless user experience.
• Context – Provides data context for components
• Presets and Feature Sets – Provides a set of pre-configured features for common use cases.
• Dependency Injection – Allow for customizability and extensibility for shared business logic

Business Features

• Internationalization – Supports multiple languages, currencies and sites for easy rollout to multiple countries.
• Auth – Provides functionality and components for user authentication.
• Search – Provides search features that are used to build search and filtering experiences.
• Product – Provides product features that are used to build a product page experience.
• Cart – Provides shopping cart features.
• Checkout – Provides anonymous and registered checkout features.
• User – Provides features to manage the user profile.

Installation

1. Install dependencies:

npm i

2. Run the application in development mode:

npm run dev

The application gets available at localhost:3000, or the next available port on your machine.

Set up a new Oryx app

1. Create Oryx app

npm init oryx

2. Run the Oryx app in development mode:

npm run dev

Further Documentation

Oryx Documentation