Angular JSS for SitecoreAI

Version:

The JSS single-page application (SPA) built with Angular is designed to be fully compatible with SitecoreAI, incorporating several key add-ons and features to streamline the development process and enable seamless integration.

Note

Sitecore JSS Angular App for SitecoreAI is currently in public beta. If you encounter any issues or bugs, please submit a new issue in the JSS GitHub Repo.

The Angular SitecoreAI integration consists of two parts:

XM Cloud is now SitecoreAI

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

SitecoreAI Angular - simplifies connecting the application to SitecoreAI and integration with multiple composable Sitecore products. Provides out-of-the-box helper components.
XM Cloud Proxy - allows integration between SitecoreAI and JSS SPAs, and enables editing, personalization, and component A/B/n testing.

Features supported

Context ID - the SITECORE_EDGE_CONTEXT_ID environment variable simplifies setting up and configuring SitecoreAI solutions. It's a unified identifier that maps to all your configured resources, such as content, sites, files, forms, and integration settings.
SitecoreAI Pages editing integration - full integration with Pages - the dynamic visual page editor of SitecoreAI.
SitecoreAI proxy personalization - with embedded personalization and component A/B/n testing.
Forms support - consume and post SitecoreAI forms in JSS apps. Using Forms, marketers can create forms, collect data, and analyze form performance.
Internationalization (i18n).

Features not supported

Multisite.
The SitecoreAI Components Application.
BYOC components.
SXA sitemap, redirects, and error pages.
Sitecore Experience Editor.

Getting started

Development

When building and running your app in connected (development) mode the proxy application is not needed.

Execute the following commands:

npm install
npm run build
npm run start:connected

Note

The following features are not supported in development mode:

Personalization
Server-side rendering (SSR)
Editing

Production

To build and run in production mode, your Angular app must be installed in a directory parallel to your Node XM Cloud proxy.

Execute the following commands for your Angular app:

npm install

# This builds the angular app and copies the the resulting `/dist` folder into the specified proxy app folder
npm run build

Then, for the proxy app:

npm install
npm run start

For additional information on how to set up and run a SPA app in production mode against a SitecoreAI instance, check the spa-starters monorepo in the XM Cloud Foundation Starter Kit.

XM Cloud is now SitecoreAI

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

Environment variables

The following environment variables can be used to configure Angular apps. You can use the .env file located in the root of the app or set these directly in the environment, for example in containers.

Parameter	Description
`PROXY_HOST`	Your SitecoreAI Proxy hostname is needed to build the app and execute the client-side requests against the proxy server. Default value `http://localhost:3000`
`PROXY_BUILD_PATH`	Your SitecoreAI Proxy server path is needed to build the app. The build output will be copied to the XM Cloud Proxy application path. Default value `<xmcloud_proxy_path>\dist`
`SITECORE_EDGE_CONTEXT_ID`	The Context ID, which covers many system configurations, is required for connecting to the SitecoreAI back end. This is a SitecoreAI system environment variable. When the application runs on the XM Cloud editing host, this value is always set to the preview Context ID.
`SITECORE_API_KEY`	The API key for `GRAPH_QL_ENDPOINT` authentication. It should be used in combination with `SITECORE_API_HOST` for local development when connecting to a local SitecoreAI instance
`SITECORE_API_HOST`	The API hostname, needed to build the application. This should be used in combination with `SITECORE_API_KEY` for local development. For example, `https://<xmc_cm_host>.sitecorecloud.io`.
`GRAPH_QL_ENDPOINT`	Your GraphQL Edge endpoint. This is optional. By default, the endpoint is calculated using the resolved Sitecore API hostname + the graphQLEndpointPath defined in your `package.json`. For a preview endpoint (a CM instance on SitecoreAI or a local one), the value is `<xmc_cm_host>/sitecore/api/graph/edge`.
`SITECORE_SITE_NAME`	The name of your site. This variable overrides the `config.appName` defined in the `package.json` file. You can find this value in the Sites dashboard by opening the actions menu for a site and navigating to Settings > Developer settings. The default value is the name of your app.
`DEFAULT_LANGUAGE`	The default language of your app. The default value is `en`
`DEBUG`	Optional. Debug level for the application. Set the DEBUG environment variable to `sitecore-jss:*` to see all logs. You can add more namespaces as per app's requirement.

XM Cloud is now SitecoreAI

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

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