Prerequisites

You will need to have the following prerequisites to start the integration with Kajoo and start building JSS components using Kajoo:

1. Create a JSS site (preferably based on Next.js template) and configure the site on Sitecore.
   1. Follow Sitecore documentation to create your JSS app: https://doc.sitecore.com/xp/en/developers/hd/19/sitecore-headless-development/walkthrough--creating-a-jss-next-js-application-with-the-jss-cli.html#run-the-jss-nextjs-application
   2. Deploy your site to Sitecore: <https://doc.sitecore.com/xp/en/developers/hd/190/sitecore-headless-development/walkthrough--connecting-a-code-first-jss-next-js-application-to-sitecore.html>
2. Upload your JSS app code to Github repo

   🚧

   Make sure the JSS app is building and launching fine on your local before checking in to repo

3. Repo must have a prettier config file .prettierrc and package.json on the root level.
4. Configure your JSS app on Vercel, create a project in Vercel, and link it to the GitHub repo created in the previous step.
5. To be able to view the JSS app on the Experience Editor and manage the site design you need to connect your JSS app with the Sitecore CM instance by following the instructions here: https://doc.sitecore.com/xp/en/developers/hd/200/sitecore-headless-development/walkthrough--connecting-a-next-js-jss-app-to-sitecore-editors.html
6. Import global kajoo-stylesheet.css into your main App component or a top-level component which is typically Layout.js/tsx in JSS for React and _app.js/tsx in JSS for Next.js.

   📘

   Without proper import, you will not be able to see the design tokens applied in UI.

7. Experimental: If you want Kajoo to generate pages for the JSS app, you need to add this code to your JSS app.
   1. Sample usage with Sitecore Next.js JSS template
      Kajoo will create page layouts under src/kajoo-layouts path. The following steps are required to render Kajoo-generated page layouts.
      Create kajoo layout factory under src/lib: kajoo-layout-factory.ts:
      kajoo-layout-factor.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 src/pages/[[...path]].tsx to use KajooLayoutFactory:
      KajooLayoutFactory.ts

      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(() => {
          // Since Sitecore editors do not support Fast Refresh, need to refresh EE chromes after Fast Refresh finished
          handleEditorFastRefresh();
        }, []);
        if (notFound || !layoutData.sitecore.route) {
          // Shouldn't hit this (as long as 'notFound' is being returned below), but just to be safe
          return <NotFound />;
        }
        const Layout = KajooLayoutFactory.getLayout(layoutData.sitecore.route);
        return (
          <ComponentPropsContext value={componentProps}>
            <SitecoreContext componentFactory={componentFactory} layoutData={layoutData}>
              <Layout layoutData={layoutData} />
            </SitecoreContext>
          </ComponentPropsContext>
        );
      };
      // This function gets called at request time on server-side.
      export const getServerSideProps: GetServerSideProps = async (context) => {
        const props = await sitecorePagePropsFactory.create(context);
        return {
          props,
          notFound: props.notFound, // Returns custom 404 page with a status code of 404 when true
        };
      };
      export default SitecorePage;
      

      Now you can start integrating your Sitecore instance with Kajoo by following the steps outlined on this page. The Kajoo plugin supports Sitecore 9.3, 10.0, and 10.1, with JSS versions 18 and 19. You can download the appropriate plugin for your Sitecore version on the Instances page of the Configurations screen, as described below.