Walkthrough: Using the Getting Started template with SXA

Abstract

How to use the headless Getting Started template with Sitecore Experience Accelerator (SXA).

This walkthrough explains how to use the Getting Started template with SXA. You can use the JSS Tenant to enable SXA features such as multisites, designs, and its other platform extensions.

To use the Getting Started template with SXA:

Before creating the JSS Tenant, 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 Sitcore Containers DevEx Documentation.

  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:

    {
        "name": "content",
        "path": "/sitecore/content/MyProject"
    },
  7. Log in using the Sitecore Command Line Interface (CLI): 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.

In this procedure, you create a JSS Tenant called MyProject and enable SXA features.

Important

Follow the SXA instructions on how to create a JSS Tenant 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 Configure tab, in the Template group, click Change  and add /sitecore/Templates/Project/MyProject/Page as a base template.

  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.

To restore and serialize items:

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

    {
      "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.