Skip to main content

Walkthrough: Connecting the Next.js application directly to the Experience Edge endpoint

Abstract

Set up your local front-end development on operating systems that don't support Windows containers

The XM Cloud starter kit contains a JSS Next.js front-end application. You can run XM Cloud CM locally for development purposes, but it requires Docker with Windows Containers enabled.

As a front-end developer, you might be using a different operating system and therefore can not run the full XM Cloud solution locally. Furthermore, you might only have responsibilities for developing the front-end applications, and you only need access to the latest layout and content data.

You can run your local Node.js server and connect the application directly to the remote Experience Edge endpoint.

The following video shows you how to set up your local front-end development environment:

This walkthrough describes how to:

  • Connect the application to the Edge endpoint.

  • Start the client application and verify the integration.

Sitecore Experience Manager Cloud (XM Cloud) is a Software-as-a-Service (SaaS) tool that provides you content and layout information headlessly through Experience Edge. This means that you can build your front-end application against the Edge endpoint.

To connect the application to the Edge endpoint:

  1. Open the XM Cloud project folder with Visual Studio Code.

  2. Go to the rendering app root folder sxastarter.

  3. Create a copy of the existing .env file and name it .env.local. The .env.local file is ignored by version control systems by default so that you don't accidentally commit local changes to your remote repository.

  4. Edit the following environment variable values:

    • SITECORE_API_KEY - the Edge access token. If you have already deployed the application to Vercel, copy the token from your Vercel environment variables. Otherwise, generate an Edge access token.

    • GRAPH_QL_ENDPOINT - https://edge.sitecorecloud.io/api/graphql/v1. This endpoint is the same as the one used for deploying the application on Vercel.

    • JSS_APP_NAME - the name of the site.

  5. Enable debugging by uncommenting the line containing DEBUG=sitecore-jss:*,-sitecore-jss:layout

To develop client applications, you must be familiar with the technology used by the application and the corresponding JavaScript SDK. To take advantage of development experience features such as hot code reloading and to use data from your locally running XM Cloud instance, you must start the application in connected development mode.

To start the application:

  1. In a command-line tool window, from the root of your XM Cloud project working directory, go to the directory of the front-end application, for example, src/sxastarter.

  2. Install the dependencies for the application with the command:

    npm install
  3. In a separate terminal window, go to the directory of the front-end application, and run the following command:

    npm run start:connected
  4. To verify that you are running your application against the remote Edge endpoint, make a content change in one of the pages in your remote XM Cloud CM instance. Save and publish the page. In your browser window serving the local rendering host, reload the page to see the changes.

  5. Make a small but visible change in your app code. The change should become instantly visible in your local rendering host window without reloading.