Configuring the KOS SDK

Introduction

The KOS SDK provides a KosCoreContextProvider that should be used to provide an application with access to KOS Core services and status including all of the required models and online statuses.

Initialize the KOS Core in your demo-app. This should be done as close to the top of your React application component tree as possible. Typically, in the App.tsx or equivalent.

import the KOS initialization module
initialize the KosCoreContextProvider with any models that are required for the application
wrap the application with the KosCoreContextProvider

// App.tsx
import type { IKosRegistry } from "@coca-cola/kos-ui-core";
import {
  ErrorBoundaryWithFallback,
  initKosProvider,
} from "@coca-cola/kos-ui-components";

...

// create an empty KOS model registry.
export const Registry: IKosRegistry = {
  models: {
  },
  preloadModels: [],
};
const { KosCoreContextProvider } = initKosProvider(Registry);
function App() {
  return (
    <ErrorBoundaryWithFallback>
        <Suspense fallback={<div>LOADING</div>}>
            <KosCoreContextProvider>
                // application components goes here
            </KosCoreContextProvider>
        </Suspense>
    </ErrorBoundaryWithFallback>
  );
}

At this point when you start up the application you will see the Loading fallback defined in the Suspense.

The loading page is visible as the KOS framework is trying to establish communication with the (currently non-existent) backend. To work around this problem, and to facilitate early phase testing, add the KOS Test Util package and the Mock WebSocket handler.

Loading Page