Sitecore Habitat Overview

What is Sitecore Habitat?

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

• Multi-language support
• Navigation module
• Page content
• News module
• Search functionality
• 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 manage. Also very flexible for any special requirements or any custom logic. Sitecore made the code extensible so you can reuse these features or customize or add new ones, 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 goes through the setup steps.

Sitecore Habitat Components

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 site indexing and 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 started 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 were 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 spec flow, and the last one is the test project.

The first thing that popped into my head after looking into these projects is how we are going to publish these sites 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 share 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 during the development 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 + "/**/*";
  gulp.src(files)
    .pipe(gulp.dest("./lib/Sitecore"));

  var root = "./src";
  var projects = root + "/**/code/bin";
  gulp.src(projects, { base: root })
    .pipe(foreach(function (stream, file) {
      console.log("copying to " + file.path);
      gulp.src(files)
        .pipe(gulp.dest(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) {
  runSequence(
    "Publish-Foundation-Projects",
    "Publish-Feature-Projects",
    "Publish-Project-Projects", callback);
});

The implementations of these sub-tasks can be found in the Habitat/gulpfile.js file.