1. Managing JSS apps with SXA

Create a headless tenant and site

Version:

The Sitecore JavaScript Rendering SDKs (JSS) lets front-end developers build a JavaScript app on top of Sitecore. With the Sitecore Headless Services, SXA lets you create headless tenants and sites that make it easier to work with JSS apps. The headless tenants and sites help you scaffold your site and help you to import your JSS app in a structured way.

To create a headless tenant and site:

  1. In the Content Editor, right-click the Content item in the content tree, click Insert, Headless Tenant.

  2. In the wizard, enter a name for the tenant, select the modules, and click OK.

  3. To create a headless site, right-click the Headless Tenant, click Insert, Headless Site.

  4. In the wizard, on the General tab, enter the name for the site.

  5. On the Modules tab, select the modules and click OK.

    Note

    On the Site Settings tab, you can modify the GraphQL endpoint and Deployment secret but it's best practice to add these later.

  6. Click OK to create the headless site.

    SXA creates the site with the following structure:

    FolderSubfolderDescription
    HomeContains the site pages.
    MediaIncludes all the media items available for the site.
    DataContains the data sources that can be reused across multiple pages within the website.
    DictionaryMultilingual apps need a dictionary of static phrases that require translation. JSS imports translations to this folder.
    Presentation
    Page DesignsHeadless sites come with SXA page design functionality.
    Partial DesignsHeadless sites come with SXA partial design functionality.
    Placeholder SettingsHeadless sites come with SXA placeholder settings functionality.
    SettingsContains the default configuration items that make the app work. Customization is possible. For example, if you want to use a new template for your pages.
    Site GroupingSXA lets you define sites using the Site Grouping items. Contains all the data needed for the site definition such as the host name, the start item, and the virtual folder.

    By default, SXA headless sites use live mode. In live mode, Sitecore reads the website content from the master database.

    If you want switch to the web database, you must publish both the API keys and the SXA headless site.

When you have finished creating your headless tenant and site, you can start importing your app.

If you have suggestions for improving this article, let us know!