Update your starter foundation code

SitecoreAI includes starter foundation code that is built into the solution, and is the recommended approach when you create a project. When you use the project creation wizard in the Deploy app, you connect to your source control account (for example, your GitHub account), and clone the starter foundation code there. Sitecore regularly updates the foundation code to make it more robust, and support new features.

When you develop a site with the starter foundation, the best practice is to add comments to your custom code. This helps you identify your changes when you update the code and need to compare your files with a newer version of the starter foundation. This topic describes the recommended steps to do this for your JSS app.

Update all your code

To update all your starter foundation code:

  1. Check out the latest Sitecore starter foundation code.

  2. Use a file and folder comparison tool (for example, WinMerge) to understand which changes were introduced since the last time you updated your code.

  3. Start by checking the package.json file in the src/sxastarter folder. This contains your JSS Next.js application. Check for new packages in the latest version of the starter foundation, and install them by running npm install packageName@version. This ensures that dependent packages are also installed, and the package-lock.json file is updated accordingly.

  4. Manually update the rest of your code accordingly, making sure you keep the changes you made originally, or remove changes that are no longer necessary.

See the video Update all your starter foundation code for more information.

Update the JSS foundation code

To compare only the JSS application code, use the version found in the package.json file, to compare the version you originally cloned with the current one. Using this approach, you only compare the starter foundation code versions, without any of your custom code.

Tip

To upgrade from JSS version 21.5 to 21.6, follow the detailed upgrade guide.

To update the JSS foundation code:

  1. Visit the latest starter foundation code and open the src/sxastarter/package.json file.

  2. Check the values of the version and the config.templates parameters.

  3. In your current implementation code, check the version and the config.templates parameters of the package.json file.

  4. In an empty folder, initialize your JSS app similar to the following example, specifying your current version and the latest Sitecore version, and adding the template names. For example, if:

    • Your current version is 21.0.0, and the list of templates is nextjs, nextjs-sxa, and nextjs-personalize

    • The latest version is 21.3.1, and the list of templates is nextjs, nextjs-sxa, nextjs-personalize, and nextjs-multisite

    run the following command:

    RequestResponse
    npx [email protected] --templates nextjs,nextjs-sxa,nextjs-personalize --appName sxastarter --fetchWith GraphQL --prerender SSG --destination .\origin --noInstall
npx [email protected] --templates nextjs,nextjs-sxa,nextjs-personalize,nextjs-multisite --appName sxastarter --fetchWith GraphQL --prerender SSG --destination .\destination --noInstall

  5. Update the current foundation code:

    • Identify the missing packages, and install them by running npm install packageName@version.

    • Remove redundant packages.

    • Manually update the code that isn't related to package dependencies.

The starter kit is a code base that’s intended to be the basis of most SitecoreAI implementations. To use it, you select the XM Cloud template option when creating a new project. It is open source, and available on GitHub.

XM Cloud is now SitecoreAI

Some code examples, images, and UI labels may still use XM Cloud while engineering assets are being updated.

Using the starter kit ensures you get the most stable and up-to-date version of the assets, references, assemblies, and artifacts we recommend using when you start building a solution with SitecoreAI. It includes:

  • Local development workstation resources that support debugging and testing.

  • JSS and headless libraries.

  • Headless SXA reference components, written in Next.js.

  • Personalization and analytics middleware.

Do you have some feedback for us?

If you have suggestions for improving this article,