Getting Started With Sitecore

I recently took a new job at a shop that is primarily a Sitecore shop. I have moved past the beginner stage, but I found getting started to be very frustrating. None of the tutorials on line were simple and straightforward enough. So, Im going to try and make a Sitecore ‘Hello World’. I’ll break it into three parts: 1) Install Sitecore, 2) Create  Visual Studio solution, and 3) Create my own landing page. We will be using Sitecore 8.1.

Prerequisites (If you don’t know how to use these things, these instructions might not be that helpful):

  • You need a basic knowledge of SQL – attaching and detaching databases, renaming database, determining connection strings, etc…
  • Visual Studio – creating a new project, adding files, etc…
  • Setting up a website in IIS
  • The ability to log in to Sitecore and review the content tree (I found this part to be easy, and I understood all the concepts easily… it was translating that into making a page that I found problematic at first).
  • We will be skipping the MongoDB section of setup. You can run this Hello World without it. You would not want to run a production instance of Sitecore without Mongo.

1. Install

There are many tools to help speed up the install process, but I am a firm believer in knowing how to do it from scratch. They other tools will inevitably fail at some point, and if you don’t know how to do it from scratch you’d be out of luck. So, here we go:

  1. Download the Sitecore zip file from the Sitecore Developer Network (You need an account and a license for this – and you certainly will to open Sitecore)
  2. Open the zip – there are three folders: Data, Databases and WebsiteDownloaded
  3. Start with Databases – Move these to the location of your drive where you keep your database files and attach them to SQL.
    1. There are five databases: Core, Master, Web, Session and Analytics
    2. I recommend changing the default names of the databases. Eventually you may have multiple instances of Sitecore and you will need to differentiate between themDatabases
  4. Copy the Data and Website folders together to where you want your website to reside
  5. Paste your Sitecore Licence file into the Data folder
  6. Set the necessary configuration files:
    1. In the Website folder, Website\App_Config find ConnectionString.config
      1. Update the connection strings for the Analytics, Core, Master and Web. There are additional MongoDB connection strings here for Sitecore analytics features. But, our sample will run without MongoDB, so leave these alone (You can’t do this in production – it causes performance problems. With 8.1, there is a CMS only mode. See this article.
        <?xml version="1.0" encoding="utf-8"?>
        <connectionStrings>
          <!-- 
            Sitecore connection strings.
            All database connections for Sitecore are configured here.
          -->
          <add name="core" connectionString="user id=user;password=password;Data Source=.\SQLEXPRESS;Database=SitecoreHelloWorld_Core" />
          <add name="master" connectionString="user id=user;password=password;Data Source=.\SQLEXPRESS;Database=SitecoreHelloWorld_Master" />
          <add name="web" connectionString="user id=user;password=password;Data Source=.\SQLEXPRESS;Database=SitecoreHelloWorld_Web" />
          <add name="analytics" connectionString="mongodb://localhost/analytics" />
          <add name="tracking.live" connectionString="mongodb://localhost/tracking_live" />
          <add name="tracking.history" connectionString="mongodb://localhost/tracking_history" />
          <add name="tracking.contact" connectionString="mongodb://localhost/tracking_contact" />
          <add name="reporting" connectionString="user id=user;password=password;Data Source=.\SQLEXPRESS;Database=SitecoreHelloWorld_Analytics" />
        </connectionStrings>
        
    2. In Website \App_Config\Include find DataFolder.config.example
      1. Remove the ‘.example’ from the file name
      2. Open the file and change the path to point to your actual Data folder (From step 4)
        <!--
        
        Purpose: This include file changes the "dataFolder" setting
        
        To enable this, rename this file so that it has a ".config" extension
        
        Notice how "patch:attribute" is used to change the value of attributes that 
        are specified for an existing element in the web.config file
        
        -->
        <configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
          <sitecore>
            <sc.variable name="dataFolder">
              <patch:attribute name="value">C:\inetpub\wwwroot\SitecoreHelloWorld\Data</patch:attribute>
            </sc.variable>
          </sitecore>
        </configuration>
        
  7. Set up a website in IISiis
    1. The App Pool must be set to .Net 4 Integrated
    2. The site must point to the website folder
  8. Update your host file to point to this new site (Typically found in: C:\Windows\System32\Drivers\etc)
    # Copyright (c) 1993-2009 Microsoft Corp.
    #
    # This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
    #
    # This file contains the mappings of IP addresses to host names. Each
    # entry should be kept on an individual line. The IP address should
    # be placed in the first column followed by the corresponding host name.
    # The IP address and the host name should be separated by at least one
    # space.
    #
    # Additionally, comments (such as these) may be inserted on individual
    # lines or following the machine name denoted by a '#' symbol.
    #
    # For example:
    #
    # 102.54.94.97 rhino.acme.com # source server
    # 38.25.63.10 x.acme.com # x client host
    
    # localhost name resolution is handled within DNS itself.
    # 127.0.0.1 localhost
    # ::1 localhost
    127.0.0.1 sitecorehelloworld
  9. If you browse to the site you should see the default Sitecore landing page. My site was set to sitecorehelloword, so this is what I see:default home page
  10. For this demo, I created my project in /inetpub/wwwroot. In order for my website to access this folder, I had to grant the IIS_USR full control to the folder I created for this to work.

2. Create Your Visual Studio Solution

Your Visual Studio solution should be separate in the file system from the website folder. Your Website folder should match as much as possible the way it will be on your production server. In addition, you want to keep your development files separate from Sitecore.

Open Visual Studio as an administrator. Create a new Visual Studio solution in a separate location on your machine and add an Empty web project. No MVC or Webforms. No Authentication.

NewWebProject

  1. Copy your web.config from the website folder into your Visual Studio Solution.
  2. Add references
    1. You will need to add references to two .dlls for this project. They can be found in the Sitecore Website folder in /bin:
    2. Sitecore.Kernel.dll and Sitecore.Mvc.dll

Lastly you will need to set up one click publishing to get your files from your solution to the Website folder.

  1. Right click on the website project in Visual Studio and select Publishpublish
  2. Click Custom
  3. Give the profile a name. I will call it local to differentiate later profiles I might create for other environments.publishconfig
  4. Choose Web Deploy (this will allow up to use web.config transforms later on)
  5. Fill in the appropriate information to connect the solution to the web site you created. You can click Validate Connection to ensure you have set it up correctly.
  6. Click Next and set the appropriate build configuration. This will most likely be Debug for your development environment.
  7. Close your Publish configuration and save it.
  8. Enable One Click Publish tool bar by right clicking on the Visual Studio tool bar and selecting One Click Publish.Now you can publish files from Visusl Studio to the Sitecore Website folder

3. Create a Custom Page in Sitecore

Your new Sitecore site will display a default Sitecore page. As a basic tutorial, I will show you how to create a custom page and replace the default Sitecore page. If you log in to Sitecore, and look at the content tree, you will several sections in a tree structure. Typically, I recommend starting at the bottom, in templates, and working your way up the tree.

a. Template

  1. Create a new template. This will hold our data.
    1. Under templates there is a folder called User Defined. Create your template here. On an actual project, I recommend creating some organizing folders. Keeping things organized will become very important as you have related things in a variety of different places.
    2. Make a simple template called Basic Content. Create a single section called Content and just add two fields, a Title as Single Line Text and a Body as a Rich Text Field.

BasicText

b. Layout

  1. Under layouts, there is a layout folder, in this folder create a layout called something unique… BasicLayout or something to that effect.
  2. This layout will need to point to a file in your Visual Studio solution. In your Visual Studio solution, you will have a _Layout.cshtml that handles the basics… scripts, css, etc… Wiring this up with Sitecore is another post, but just leave the layout for now.BasicLayout
  3. Add a view to the Visual Studio Solution, named the same as the layout you made (BasicLayout.cshtml). This view should be super simple. It needs to point to default MVC layout file (_Layout.cshtml) and should have a div. Inside the div, there should be single Sitecore html helper creating a placeholder called “main”. To keep things organized, create a folder in the Views folder called Layouts, and put this new view there. Back in Sitecore, point the layout you made to this new .cshtml file.
     
    @{
        Layout = &quot;~/Views/Shared/_Layout.cshtml&quot;;
    }
    
    <div>
        @Html.Sitecore().Placeholder("main")
    </div>
    
    
  4. In order for Visual Studio to recognize the Sitecore html helpers, you will need to update the Views specific web.config. In the root of the Views folder in your MVC project, there should be a web.config.Under system.web.webPages.razor/pages/namespaces add a new record for the namespace Sitecore.Mvc

c. Rendering

We will make a single controller rendering.

  1. In Sitecore, under Layouts\Renderings, insert a new Controller Rendering. Set the controller name to Basic (We will add this controller below) and the set the Action name to IndexBasicController
  2. In the Visual Studio solution, create a controller called BasicController and give it  a single action, called Index. This controller will
    1. Get the current item from Sitecore and
    2. Will return a partial view called BasicView (You will need to supply the full path to the view, which we have not actually created yet) with the current Sitecore item.
       
      
      using System.Web.Mvc;
      
      namespace SitecoreHelloWorld.Controllers
      {
          public class BasicController : Controller
          {
              public ActionResult Index()
              {
                  return PartialView(&quot;~/Views/Basic/Index.cshtml&quot;);
              }
          }
      }
       
      
    3. Make a view in visual studio to display the fields. The view should be in the location designated above.
      1. The view will just display the fields you made on the Basic Text template.
      2. The model will be a basic Sitecore model, Called a RenderingModel in Sitecore.Mvc.Presentation
 

<h1>@Html.Sitecore().Field("Title")</h1>
<div>
    @Html.Sitecore().Field("Body")
</div>

c. Content

  1. In Sitecore, go to the Home item.
  2. Right click on the Home item and choose Insert From Template
  3. Select the new template we made, Basic Content
  4. Name the item sitecore-hello-world
    1. Item names under Home represent urls by default, so no spaces
  5. On our new item, add a title and some contentContent
  6. Go to the Presentation tab in the ribbon at the top of the screen and click DetailsEmptyPresentationDetails
  7. On the Shared Layout tab, on the Default device, click Edit
  8. On the Layout tab, choose the Basic Layout we createdChooseLayout
  9. On the Controls tab, click Add
  10. Choose the controller rendering we created, Basic Controller, and set the placeholder value to main                  selectarendering
  11. Click Select, the click OK an return to the Content Editor

Lastly, publish the page. On a new site you could just publish the entire site at this point, but for now we will publish our new page. Make sure the page is selected in the content tree. In the ribbon at the top of the screen, go to the Publish tab, hover over the publish button, and click the small black arrow to bring up a context menu. Select Publish Item.

Publish Item

Select Smart Publish, the appropriate languages, and Publish Sub-Items.

Publish Dialog

Click Publish. It will take a minute publish your item. Now browse to your new page. The url will be a representation of the items place in the content tree. In our case, because the item is directly under Home, the url will just by ‘/sitecore-hello-world’.Page

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s