Front end - ysolution-it/sitecore-wiki GitHub Wiki

Sitecore Installation Guide

This guide provides step-by-step instructions for installing and configuring essential Sitecore packages, setting up a headless site, and integrating Angular JSS.

1. Install Sitecore Packages

1.1 Install Sitecore Headless Rendering

Purpose: Enables headless architecture, allowing modern frontend frameworks (e.g., React, Angular) to leverage Sitecore's backend.

Steps:

  1. Visit the official Sitecore download page.
  2. Download the package suitable for your Sitecore version.
  3. Follow the installation instructions provided in the documentation.

1.2 Install Sitecore Experience Accelerator (SXA)

Purpose: Simplifies website creation with pre-built components, layouts, and templates.

Steps:

  1. Navigate to the [Sitecore SXA download page](https://dev.sitecore.net/Downloads/Sitecore_Experience_Accelerator).
  2. Download the appropriate version.
  3. Install the package following the documentation.

1.3 Install Sitecore PowerShell Extensions (SPE)

Purpose: Enhances Sitecore administration by enabling automation through scripting.

Steps:

  1. Download from the [Sitecore Developer Portal](https://dev.sitecore.net/Downloads/Sitecore_PowerShell_Extensions).
  2. Follow the installation steps outlined in the official documentation.

2. Installing Packages in Sitecore

Steps:

  1. Access the Sitecore Desktop:
    • Log in as an administrator.
    • Navigate to the Sitecore Desktop interface.
  2. Open the Installation Wizard:
    • Click the Start button → Development Tools → Installation Wizard.
  3. Install the Packages:
    • Upload each downloaded package.
    • Follow on-screen instructions to complete the installation.

3. Setting Up a Headless Site

3.1 Create a Headless Site Collection

  1. Open Content Editor.
  2. Navigate to the desired parent location.
  3. Right-click → Insert → Headless Site Collection.
  4. Name the collection and click OK.

3.2 Create a Headless Site

  1. Right-click on the site collection.
  2. Select Insert → Headless Site.
  3. Name the project (e.g., MyHeadlessSite).

4. Generating an API Key for API Access

Steps:

  1. Navigate to System → Settings → Services → API Key.
  2. Right-click → Insert → API Key.
  3. Configure:
    • Allowed Controllers: * (all controllers)
    • CORS Settings: * (all origins)
  4. Save and retrieve the API key for use.

5. Connecting Angular JSS to Sitecore Headless

Prerequisites:

Ensure the following are installed:

5.1 Install Sitecore CLI

npm install -g @sitecore-jss/sitecore-jss-cli

5.2 Create an Angular JSS Application

npx create-sitecore-jss angular

Follow the prompts to configure the app.

5.3 Connect the Angular JSS App to Sitecore

jss setup

Provide:

  • Sitecore hostname (e.g., devcm.dev.local)
  • API key (from Sitecore System settings)

5.4 Update Configuration Files

  • Update Sitecore Configuration:
    • Modify sitecoredemo.config (Line 40) to set hostname, rootPath, and database.
  • Update Sitecore Path:
    • Copy and paste the correct path in the configuration file (Lines 59-60).

5.5 Deploy Configuration to Sitecore

jss deploy config

If deployment fails, manually copy configuration files to:

C:\inetpub\wwwroot\devcm.dev.local\App_Config\Include\zzz

5.6 Start Connected Mode

jss start:connected

This enables real-time data fetching from Sitecore.

6. Verifying the Connection Between Angular JSS and Sitecore

6.1 Inspect Network Activity

  1. Open the app (http://localhost:3000).
  2. Open Developer Tools → Network tab.
  3. Look for:
    • Dictionary Service (translations)
    • Layout Service (page structure)

6.2 Test the Layout Service in Postman

  1. Get the Layout Service API URL from the network tab.
  2. Test in Postman:
    • Method: GET
    • Headers: sc_apikey: <your-api-key>

7. Creating Templates, Pages, and JSON Rendering

7.1 Create a Template

  1. Navigate to Templates.
  2. Right-click on Feature → Insert → Template.
  3. Define Sections and Fields.

7.2 Add a Page from the Template

  1. Right-click on Home → Insert from Template.
  2. Populate fields with data.

7.3 Create JSON Rendering

  1. Go to Layout → Renderings → Feature.
  2. Right-click → Insert → JSON Rendering.
  3. Set Content Resolver.

7.4 Add Rendering to a Page

  1. Navigate to Home Page → Presentation → Details.
  2. Click Edit → Add rendering.
  3. Assign the Placeholder (headless-main).

8. Creating and Connecting Angular JSS Components

8.1 Create a Component in Angular JSS

jss scaffold HeroBanner

Ensure component name matches Sitecore rendering.

8.2 Map Template Fields in Component HTML

<p>{{ rendering?.fields?.ElegantDesign?.value }}</p>
<img [src]="rendering?.fields?.Logo?.value?.src" alt="{{ rendering?.fields?.Logo?.value?.alt }}" />

8.3 Deploy Configuration

jss deploy config

9. Installing Sitecore XP/XM

Download from the [Sitecore Experience Platform](https://dev.sitecore.net/Downloads/Sitecore_Experience_Platform). Install using the Installation Assistant for XP Single.

10. Additional Notes

  • Ensure Proper Permissions: API key must have the necessary permissions.
  • CORS Configuration: Update Sitecore settings for non-local environments.
  • Testing: Use Postman to verify API connectivity.

This document provides a streamlined and structured approach to setting up Sitecore and integrating it with Angular JSS efficiently.