Walkthrough: Using the Getting Started template with SXA

Version: 22.x
Important

If you integrated your ASP.NET Core app before September 2024, it's using the legacy ASP.NET Core Rendering SDK, version 22 or earlier. This SDK is no longer receiving updates, so we recommend that you upgrade to the latest version of the new ASP.NET Core SDK.

This walkthrough explains how to use the Getting Started template with SXA. You can use the SXA collection of Headless Sites to enable SXA features such as multisite, designs, and its other platform extensions.

To use the Getting Started template with SXA:

Prepare your environment

Before creating the SXA collection of Headless Sites, you must set up your environment.

To prepare your environment:

  1. Install and run the Getting Started template up until invoking the init.ps1 script but do not run the up.ps1 script. If you do, you must run the docker-compose down command and the .\docker\clean.ps1 script before proceeding.

  2. Add Sitecore PowerShell Extensions and SXA to your container environment following the guidance in the Sitecore module reference.

  3. In Visual Studio, delete the Platform\App_Config\Include\Sites.config file. If you delete the file from outside Visual Studio, you must also remove it from Platform.csproj.

  4. To launch the containers, run docker-compose up -d.

  5. Delete the content of the src\items\content folder.

  6. Remove the content include from the file Items.module.json:

    RequestResponse
    {
        "name": "content",
        "path": "/sitecore/content/MyProject"
    },
  7. Log in using the Sitecore Command Line Interface (CLI):

    RequestResponse
    dotnet sitecore login --cm https://cm.myproject.localhost/ --auth https://id.myproject.localhost/ --allow-write true
  8. Run dotnet sitecore ser push to push the example items to the Sitecore instance.

Create the MyProject solution

In this procedure, you create an SXA collection of Headless Sites called MyProject and enable SXA features.

Important

Follow the SXA instructions on how to create an SXA collection of Headless Sites called MyProject with a JSS Site called MyProject under the cm.myproject.localhost hostname. You can leave the remaining SXA options at their default values.

To create the MyProject solution:

  1. In the Content Editor, click /sitecore/Content/MyProject/MyProject/Settings, and do the following:

    • Set Import user to sitecore\JssImport.

    • Set Server side rendering engine to http.

    • Set Server side rendering engine endpoint URL to http://rendering/jss-render.

  2. In the content tree, click /sitecore/Content/MyProject, and, on the Security tab, in the Presets group, click JSS Import - No overwrite. Click OK.

  3. In the content tree, click /sitecore/Layout/Layouts/Project/MyProject/Main and, on the Configure tab, in the Template group, click Change and set the template to /sitecore/Templates/Foundation/JSS Experience Accelerator/Presentation/SXA JSS Layout.

  4. Click /sitecore/Templates/Project/MyProject/App Route and, on the Content tab, in the Base templates field add /sitecore/Templates/Project/MyProject/Page.

  5. Click /sitecore/Templates/Project/MyProject/App Route/__Standard Values and, on the Presentation tab, in the Layout group, click Details.

  6. In the Layout Details dialog box, to edit the Default device layout, click Edit, and on the Layout tab, select Layouts/Project/MyProject/Main and then click OK to close the Device Editor dialog box and click OK to close the Layout Details dialog box.

  7. Click /sitecore/Layout/Renderings/Project/MyProject/ContentBlock and under Experience Editor, edit the following Other properties:

    • Add IsAutoDatasourceRendering with a value of true.

    • Set the Datasource location to empty.

  8. Drag /sitecore/Layout/Placeholder Settings/Project/MyProject/MyProject-main to /sitecore/content/MyProject/MyProject/Presentation/Placeholder Settings.

  9. In the MyProject-main placeholder setting, add Renderings\Project\MyProject\ContentBlock to the allowed controls.

  10. Select /sitecore/Content/MyProject/MyProject/Home and enter a title and a banner of your own choice.

  11. Right-click /sitecore/content/MyProject/MyProject/Home and click Experience Editor to open the Home page in the Experience Editor.

  12. Add a ContentBlock to the placeholder in the middle of the page. SXA automatically creates a datasource item.

Publish everything and view your work on the rendering host.

Restore and serialize items

To restore and serialize items:

  1. Restore the content include in the Items.module.config file:

    RequestResponse
    {
      "name": "content",
      "path": "/sitecore/content/MyProject"
    },
    Note

    This step is the reverse of the related step in the Prepare your environment section.

  2. To serialize the items to disk, run dotnet sitecore ser pull.

  3. To update the Content Management role, publish the Platform project.

Do you have some feedback for us?

If you have suggestions for improving this article,