Sitecore JSS Step by Step - Practically creating Layout Service from Scratch

Hello Friends, here is the Step by Step guide to make a layout service.

1. **Install Sitecore XM 10.x Version**

2. **Install the Sitecore Headless Rendering Package**

   - Visit [Sitecore Headless Rendering Downloads].

   - Download the package that matches your Sitecore version.

   - Install the package using the Package Installer.

3. **Create a JSON Rendering**

   - In Sitecore, navigate to the Renderings section.

   - Create a new JSON rendering.

   - Configure the Content Resolver (by default, the Datasource Resolver is auto-selected, which serializes the rendering's datasource item).

4. **Create a Layout Item**

   - Create a JSS Layout item and associate it with the Layout.cshtml file.

   - Note that in Sitecore JSS, Layout handling is primarily done on the front-end, so the Layout.cshtml file can remain empty.

5. **Define a Placeholder Setting**

   - Create a Placeholder Setting item for the placeholder defined on the front-end.

   - This will be used to add renderings to the placeholder using the Experience Editor.

6. **Generate an API Key Item**

   - Under `/sitecore/system/Settings/Services/API Keys`, create a new API Key item.

   - Make a note of the Item ID, as this will be used for connecting JSS apps to Sitecore services.

7. **Create a Template and Items for Datasource**

   - Define a template with the required fields for your data source.

   - Create an item based on this template to be used as the datasource for your JSON rendering.

8. **Configure the Home Item**

   - Use the home item in Sitecore.

   - Place the JSON rendering on the layout and set its datasource item.

   - Apply the layout defined earlier.

9. **Retrieve Full Layout Output Using Layout Service**

   - To obtain the complete layout output for an item, invoke the Layout Service's render endpoint using the following URL format:

     ```

     /sitecore/api/layout/render/[config]?item=[path]&sc_lang=[language]&sc_apikey=[key]&tracking=[true|false]&sc_site=[your-site-name]

     ```

     Replace placeholders with the appropriate values.

10. **Structured Layout in JSON Format**

    - The response from the Layout Service will contain the structured layout with all fields and data in JSON format, ready to be consumed by the front-end.

11. **Naming of Renderings**

    - Note that the name of the rendering corresponds to the component name on the front-end. Any rendering added to the Home Item will be rendered using the data provided as a datasource.

These refined steps provide a clearer and more organized guide for setting up Sitecore with the Sitecore Headless Rendering Package and configuring JSON renderings for use with Sitecore JSS.