---
title: "Walkthrough: Using the Getting Started template with SXA"
slug: "walkthrough--using-the-getting-started-template-with-sxa"
abstract: "How to use the headless Getting Started template with Sitecore Experience Accelerator (SXA)."
---
# Walkthrough: Using the Getting Started template with SXA

This walkthrough explains how to use the [Getting Started template](https://doc.sitecore.com/xp/en/developers/hd/21/sitecore-headless-development/walkthrough--using-the-getting-started-template.html "Walkthrough: Using the Getting Started template") with SXA. You can use the JSS Tenant to enable SXA features such as multisite, designs, and its other platform extensions.

To use the Getting Started template with SXA:

- [Prepare your environment](https://doc.sitecore.com/xp/en/developers/hd/21/sitecore-headless-development/walkthrough--using-the-getting-started-template-with-sxa.html#UUID-507a1fbf-82ab-1964-1475-c8b7ff7c540d_section-idm232200890162617 "Prepare your environment")
- [Create the MyProject solution](https://doc.sitecore.com/xp/en/developers/hd/21/sitecore-headless-development/walkthrough--using-the-getting-started-template-with-sxa.html#UUID-507a1fbf-82ab-1964-1475-c8b7ff7c540d_section-idm232200904554361 "Create the MyProject solution")
- [Restore and serialize items](https://doc.sitecore.com/xp/en/developers/hd/21/sitecore-headless-development/walkthrough--using-the-getting-started-template-with-sxa.html#UUID-507a1fbf-82ab-1964-1475-c8b7ff7c540d_section-idm232207522587972 "Restore and serialize items")

<details>
<summary><h2>Prepare your environment</h2></summary>

Before creating the JSS Tenant, you must set up your environment.

To prepare your environment:

1. Install and run the [Getting Started](https://doc.sitecore.com/xp/en/developers/hd/21/sitecore-headless-development/walkthrough--using-the-getting-started-template.html "Walkthrough: Using the Getting Started template") 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](https://doc.sitecore.com/xp/en/developers/103/developer-tools/en/sitecore-module-reference.html).
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`:

    ```csharp
    {
        "name": "content",
        "path": "/sitecore/content/MyProject"
    },
    ```

7. Log in using the [Sitecore Command Line Interface (CLI)](https://doc.sitecore.com/xp/en/developers/103/developer-tools/en/sitecore-command-line-interface.html):

    ```text
    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.

</details>

<details>
<summary><h2>Create the MyProject solution</h2></summary>

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

> [!important]
> Follow the [SXA instructions](https://doc.sitecore.com/xp/en/developers/sxa/103/sitecore-experience-accelerator/en/managing-headless-sites-with-sxa.html) 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 **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.

</details>

<details>
<summary><h2>Restore and serialize items</h2></summary>

To restore and serialize items:

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

    ```csharp
    {
      "name": "content",
      "path": "/sitecore/content/MyProject"
    },
    ```

    > [!note]
    > This step is the reverse of the related step in the [Prepare your environment](https://doc.sitecore.com/xp/en/developers/hd/21/sitecore-headless-development/walkthrough--using-the-getting-started-template-with-sxa.html#UUID-507a1fbf-82ab-1964-1475-c8b7ff7c540d_section-idm232200890162617 "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.

</details>