Preparing Your JSS App

1. Create a JSS Site Template Project

Start by setting up a JSS site using one of Sitecore’s supported front-end frameworks. We recommend using the Next.js template.

Follow the official Sitecore guide to create a JSS Next.js application: Creating a JSS Next.js Application

2. Push Your App to GitHub or Azure DevOps

Upload your JSS application to a **GitHub ** or Azure **DevOps ** repository.

🚧 Important: Ensure your app builds and runs successfully **locally ** before pushing it to the repository.

3. Repository Structure

Your repository must include the following files at the root level:

.prettierrc – Prettier configuration
package.json – NPM package definitions

4. Configure Kajoo Stylesheet imports

To ensure Kajoo’s design tokens are applied correctly, import the global kajoo-stylesheet.css in your main layout component. This typically means:

Layout.js/Layout.tsx in React-based JSS projects
_app.js/_app.tsx in Next.js-based JSS projects

📘NOTE: Without this stylesheet, your UI will not reflect Kajoo’s design system.

5. (Optional) Enable Kajoo Page Generation Support

Kajoo can optionally generate page layouts for your JSS application. To enable this experimental feature:

Create the Kajoo Layout Factory
Create a new file at src/lib/kajoo-layout-factory.ts:

import { RouteData } from '@sitecore-jss/sitecore-jss-nextjs';
import DefaulLayout from '../Layout';

const layoutsByName: Record<string, typeof DefaulLayout> = {};

export class KajooLayoutFactory {
  static getLayout = (route: RouteData): typeof DefaulLayout => {
    return layoutsByName[route.name] || DefaulLayout;
  };

  static registerLayout = (name: string, layout: typeof DefaulLayout): void => {
    layoutsByName[name] = layout;
  };
}

Update the Main Page Component
Modify src/pages/[[...path]].tsx to use the Kajoo layout factory:

import { useEffect } from 'react';
import { GetServerSideProps } from 'next';
import NotFound from 'src/NotFound';
import {
  SitecoreContext,
  ComponentPropsContext,
  handleEditorFastRefresh,
} from '@sitecore-jss/sitecore-jss-nextjs';
import { SitecorePageProps } from 'lib/page-props';
import { sitecorePagePropsFactory } from 'lib/page-props-factory';
import { componentFactory } from 'temp/componentFactory';
import { KajooLayoutFactory } from 'lib/kajoo-layout-factory';
import '../kajoo-layouts';

const SitecorePage = ({ notFound, componentProps, layoutData }: SitecorePageProps): JSX.Element => {
  useEffect(() => {
    handleEditorFastRefresh();
  }, []);

  if (notFound || !layoutData.sitecore.route) {
    return <NotFound />;
  }

  const Layout = KajooLayoutFactory.getLayout(layoutData.sitecore.route);

  return (
    <ComponentPropsContext value={componentProps}>
      <SitecoreContext componentFactory={componentFactory} layoutData={layoutData}>
        <Layout layoutData={layoutData} />
      </SitecoreContext>
    </ComponentPropsContext>
  );
};

export const getServerSideProps: GetServerSideProps = async (context) => {
  const props = await sitecorePagePropsFactory.create(context);
  return {
    props,
    notFound: props.notFound,
  };
};

export default SitecorePage;

Once your JSS application is properly set up, you're ready to move on to the installation process.

In the next section, we’ll guide you through selecting the correct installation path based on your Sitecore hosting environment: On-Premises, PaaS, or XM Cloud.