Content SDK

Getting started

Content SDK for Angular brings the enhancements provided by SitecoreAI to your Angular website. Version 1.0 includes the following features:

Server-side rendering and route data fetching with loaders.
Components and field rendering, including the scImage directive.
Pages editing and preview support.
Internationalization and multi-site support.
Analytics, event tracking, personalization, and lightweight tracking.
Express middleware for bot tracking, redirects, and sitemap and robots.txt generation.
Deployment to SitecoreAI as an editing host.

Creating a Content SDK Angular app

You can scaffold the new app with the latest version of the create-content-sdk-app package:

Run the following command:
npx create-content-sdk-app@latest
When prompted to choose a template, choose angular.

You can also provide the following command to create an app directly:

npx create-content-sdk-app@latest angular --destination <your-destination-path> --yes

Once completed, you get a sample app based on Angular 21, with ready-made components based on the Skate Park SitecoreAI site.

Connecting the app to SitecoreAI

To connect your application to SitecoreAI, you need to provide the Edge context ID and the default site name for your deployment. You can provide them either through the sitecore.config.ts file, or via environment variables. The following variables are required for the connection:

SITECORE_EDGE_CONTEXT_ID
CSDK_PUBLIC_SITECORE_EDGE_CONTEXT_ID
CSDK_PUBLIC_DEFAULT_SITE_NAME

Starting the app

If you need to build your Content SDK Angular application, you can use the following command:

npm run build

To start the app in development and pre-production environments, use:

npm run dev

To start the app in production environments, use:

npm run start

Deploy a project to SitecoreAI

See Deploy a project and environment for more information on deploying a project to SitecoreAI through the Deploy app. Before you deploy, you must add the following environment variables as the Deploy app is currently being set up to support Angular out-of-the-box:

CSDK_PUBLIC_SITECORE_EDGE_CONTEXT_ID=<YOUR_EDGE_CONTEXT_ID>
CSDK_PUBLIC_DEFAULT_SITE=<YOUR_SITE_NAME>
CSDK_PUBLIC_DEFAULT_LANGUAGE=<YOUR_LANGUAGE>
NG_TRUST_PROXY_HEADERS=X-FORWARDED-PORT,X-FORWARDED-PATH,X-FORWARDED-FOR,X-FORWARDED-HOST,X-FORWARDED-PROTO
NG_ALLOWED_HOSTS=*.sitecorecloud.io

If you have suggestions for improving this article, let us know!