Upgrade Content SDK 0.1.0 Angular apps to version 1.0.0

Update application dependencies in your existing app

For your upgraded application to work correctly, you must update dependencies.

To update your dependencies:

1. In your existing application's package.json file, update every @sitecore-content-sdk package to version 1.0.0.

2. Install the dependencies with the following command:

   npm install

Update the server.ts file in your existing app

After updating your dependencies, you must synchronize the Express SSR host in your existing application, src/server.ts, so it registers the new middleware introduced in version 1.0.0.

To update src/server.ts:

1. Add the following imports to the existing @sitecore-content-sdk/angular import:

   import {
     createBotTrackingMiddleware,
     ...
     createExperimentalFeaturesMiddleware,
     ...
     createRedirectsMiddleware,
   } from '@sitecore-content-sdk/angular';

2. Register the new middleware in the correct order. The order in which middleware is registered determines its execution order, so add each of the following in the position described:

   • Add createExperimentalFeaturesMiddleware between createEditingConfigMiddleware and createEditingRenderMiddleware:

     app.use(
       createEditingConfigMiddleware({
         components: componentMap,
         metadataImport: () => import('.sitecore/metadata.json'),
       })
     );
     
     /**
     * Experimental features endpoint (`/api/editing/experimental`). Exposes available
     * Content SDK experimental features and whether each is currently enabled.
     */
     app.use(createExperimentalFeaturesMiddleware());
     
     /**
     * Editing render endpoint (`/api/editing/render`). Rewrites `req.url` to the
     * editor's requested route, stashes the preview payload on the request, then
     * lets the Angular SSR engine render the page in-process.
     */
     app.use(createEditingRenderMiddleware());

   • Add createBotTrackingMiddleware and createRedirectsMiddleware after createMultisiteMiddleware:

     /**
     * Multisite middleware. Resolves the site for each request (sc_site query → cookie →
     * hostname → default) from the generated site list and writes it onto `req.scParams`
     * for downstream loaders and the loader cache key. Must run before the personalize
     * middleware, which reads the resolved site.
     */
     app.use(
       createMultisiteMiddleware({
         ...config.multisite,
         sites,
         defaultSite: config.defaultSite,
         matcher: middlewareMatcher,
       })
     );
     
     /*
     * Bot tracking middleware. Detects bots by User-Agent, sets the `sc_bot` cookie, and sends a
     * dedicated bot page-view event. Must run before personalize so the bot cookie is set before
     * personalize decides whether to skip. Does not run in dev/localhost environments.
     */
     app.use(
       createBotTrackingMiddleware({
         ...config.api.edge,
         locales: config.angular.locales,
         defaultLanguage: config.defaultLanguage,
         defaultSite: config.defaultSite,
         matcher: middlewareMatcher,
       })
     );
     
     /**
     * Redirects middleware. Matches each request against the site's Sitecore redirects (locale,
     * static and regex rules) and issues a 301/302 redirect or an internal server-transfer rewrite.
     * Runs after multisite (which resolves the site it fetches redirects for) and before personalize
     * so a redirect short-circuits the request before a CDP call is made.
     */
     app.use(
       createRedirectsMiddleware({
         ...config.redirects,
         ...config.api.edge,
         ...(config.api.local ?? {}),
         ...config.angular,
         sites,
         defaultLanguage: config.defaultLanguage,
         defaultSite: config.defaultSite,
         matcher: middlewareMatcher,
       })
     );

   Note

   Middleware definition order is important, as it determines the order the middleware is executed in at request time.

3. Add a default export at the end of the file, after the existing reqHandler export in src/server.ts:

   export const reqHandler = createNodeRequestHandler(app);
   export default reqHandler;

4. Replace the SITE_NAME and LANGUAGE env variables with new names:

   • Replace CSDK_PUBLIC_SITECORE_DEFAULT_SITE with CSDK_PUBLIC_DEFAULT_SITE_NAME
   • Replace CSDK_PUBLIC_SITECORE_DEFAULT_LANGUAGE with CSDK_PUBLIC_DEFAULT_LANGUAGE
   • Preserve values for both, only the names are changed.

Next steps

To finalize the upgrade process, make sure you resolve any errors and warnings you encounter. Enable debug logging for Content SDK specific issues to assist you if necessary.