Sitecore Habitat Overview

What is Sitecore Habitat?

Sitecore Habitat is a Sitecore project that is bulit using the modular architecture. After checking on Sitecore Github Repositories, I think this is the first time that Sitecore provide us a full functional website using the modular architecture that has many features like:

  • Multi-language support
  • Navigation module
  • Page content
  • News module
  • Search functionalty
  • Teasers to promote content on or off the site using text and images
  • Social module
  • And Others.

Sitecore employed the modular architecture in the Sitecore Habitat demo to make the solution very simple to understand and to manage. Also very flexible for any special requirements or any custom logic. Sitecore made the code extensibile so you can reuse these features or customize it or adding new one, for me I think this project will be the starting point of my next project.

The Setup

I started with Sitecore Habitat by cloning the repository from here, then I followed the Wiki instructions. There is a very helpful video which is made by Martina Welander that go through the setup steps.

Sitecore Habitat Componants

Sitecore Habitat project contains three layers:

  • The Foundation Layer.

    The foundation layer contains the services and the backend of the project that are used all over the other layers. After checking this layer, I found that there are many modules are implemented here:

    • Indexing: This module is responsible for the site indexing and the search functionalities. In this module you will find the custom computed fields, custom search results, search logic, etc.

    • Site extensions: This module contains the extensions to the Sitecore platform, like: Htmlhelper, Item extensions, Fields extensions,..etc

    • Serialization: This module is responsible for unicorn serialization and deployment of Sitecore items across environments automatically.

    • Theming: This module contains all the front end-resources, like the css, Javascript, Font files. To customize the theme of Sitecore Habitat project, your work should be start in this module.

  • The Feature Layer

    The Feature layer is the functionalities and the features of the website such as navigation, news, page contents, etc. all the presentation components and business logic should be here in this layer.

    As mentioned above, Sitecore Habitat has many features that built already with the solution. The implementation of these features can be found here. Any extra feature that you want to add also should be implemented in this layer.

    Each feature in Sitecore Habitat has three projects. The first one is the MVC web project that contains the business logic, controllers, and views. The second one is the specflow, and last one is test project.

    First thing popped into my head after looking into these projects is how we are going to publish these site into a single website??? But Sitecore Habitat has a very impressive implementation for this using Node.js Gulp.

  • The Project Layer

    This layer contains all the sites that shaing these features.

    The Habitat site can be found in this layer, and it is a good example that brings all the features together.

Tasks Runner

Sitecore Habitat uses Node.js and Grunt.js to automate some of the tasks that can be used while you are setting up the project or during the development of the project.

Gulp is a javascript task runner, that uses node js streams file. Sitecore Habitat has some implemented tasks that can be found in task runner of Visual Studio.

  • Copy Sitecore Lib: This task is responsible to copy all of Sitecore DLLs from the root site and put them in the bin folder of each project. I feel this is a very good practice of referencing Sitecore DLLs inside the project.

    The following code copy Sitecore DLLs from the root site into each project, this code can be found in Habitat/gulpfile.js.

    gulp.task("01-Copy-Sitecore-Lib", function () {
      console.log("Copying Sitecore Libraries");
      var files = config.sitecoreLibraries + "/**/*";
      var root = "./src";
      var projects = root + "/**/code/bin";
      gulp.src(projects, { base: root })
        .pipe(foreach(function (stream, file) {
          console.log("copying to " + file.path);
          return stream;
  • Publish All Projects: This task is responsible to publish the three layers project (Foundation, Feature, Project).
    gulp.task("02-Publish-All-Projects", function (callback) {
        "Publish-Project-Projects", callback);
    The implemntations of these sub tasks can be found in the Habitat/gulpfile.js file.