Connect your Content SDK app to SitecoreAI

After creating your application, you need to connect it to your SitecoreAI instance before you can use it for local development. To do this, you need to add some environment variables that are associated with the site you want to work with to your app's .env.local file.

Tip

If you want to connect your app to a different environment, site, or context later, you can repeat this process to alter the environment variables as often as needed.

This walkthrough describes how to:

  1. Locate the values for your SitecoreAI environment

  2. Add the environment variables to your local app

  3. Test the connection between your app and SitecoreAI

Locate the values for your SitecoreAI environment

You can find the values you need to connect your app to SitecoreAI on the environment's Developer settings tab.

To locate the values for your SitecoreAI environment:

  1. On the Sitecore Cloud portal, click your project.

  2. On the right-hand side of the page, in the SitecoreAI tray, click Open app.

  3. In the main toolbar, in the drop-down list for your project, click Manage environments.

  4. On the Projects page, in the Environments tab, click the name of the environment you want to connect your app to.

  5. On the Developer settings tab, in the Environment variables section, do the following:

    • In the Site drop-down list, click the name of the site you want to work on in your local app.

    • Under SDK version, ensure that Content SDK is selected.

    • Use the Context switch to choose whether to connect to your site's Preview context or to its Live context.

  6. In the code block at the bottom, use the copy to clipboard button to copy the environment variables.

Add the environment variables to your local app

Adding the relevant details to your app will enable it to connect to your SitecoreAI repository and work on the chosen site.

To add the environment variables to your local app:

  1. In your Content SDK app's folder (for example, /examples/kit-nextjs-skate-park/), create a copy of the .env.remote.example file and rename it to .env.local.

    The env.remote.example file contains a list of environment variables with comments explaining what each are for.

  2. Open the new file in your preferred IDE and paste the variables you copied to your clipboard in the previous section. Ensure you don't have any duplicates.

  3. Save your changes.

Test the connection between your app and SitecoreAI

Now that you've connected your app to SitecoreAI, you can test the connection by attempting to run and open the app locally.

To test the connection between your app and SitecoreAI:

  1. Have a terminal window open with your Content SDK app's folder selected (for example, /examples/kit-nextjs-skate-park/).

  2. If you've made any changes to your initial app's dependencies, including pulling changes from the remote repo, run the following command:

    RequestResponse
    npm install

  3. Run the following command:

    RequestResponse
    npm run dev

  4. When the app has finished compiling, open the local host for your app (by default, this is http://localhost:3000) in a browser window.

    If you see the default landing page for your site, the app has connected successfully.

Do you have some feedback for us?

If you have suggestions for improving this article,