1. Content SDK

Getting started

Version: 1.x

Content SDK for Angular brings the enhancements provided by SitecoreAI to your Angular website. With the 0.1 release, you have access to the following features:

  • Basic rendering and field components
  • Internationalization support
  • Editing and Preview support
  • Multisite
  • Sitemap, robots.txt endpoints
  • Deploying to SitecoreAI as 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:

  1. Run the following command:

    npx create-content-sdk-app@latest

  2. 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!