Get development started with Sitecore Part 1: Set up

I’m very new to Sitecore development and I have been struggling with learning Sitecore, one thing that was a good starting point was the free Sitecore Developer Foundations eLearning but that leave me with a lot questions and I wasn’t sure where to go next to continue learning(for free) I know I’m going to be working a lot with Sitecore sites built using Habitat which is great but the thing is that if you are a new to Sitecore development it can be really overwhelming to try to learn habitat without a strong foundation on Sitecore so this is what this series is about getting stronger in Sitecore core concepts and some third party tools that will be helpful in the future such as Unicorn and Glass mapper you can consider this series a possible next step after the Fundamental Course.

Our goal will be to implement this bootstrap template in Sitecore and what I mean by that is that all of that content you see in that template will be coming from the Sitecore Databases and it will be manageable by normal users so once we are done they should be able to edit or add more content without needing the intervention of a developer (no need to change the source code)

I want to focus on Sitecore specifics so I will try my best to make the code very simple that means I won’t be splitting the code into multiple .Net projects so don’t expect the best practices when it comes to how to organize the code if you have been working with .Net for some time now you can probably figured out on your own how to do that best furthermore if like me you will be working on habitat(which you should) they already have an opinion on how to split your code. I also won’t be covering to to much theory since that’s already documented but I will point to resources where you can read more about it.

To get the most out of this Series I recommend to meet the following pre-requisites:

  1. Have some experience doing ASP.Net Mvc Development (A year at least)
  2. Having installed at least once Sitecore without using SIM just following the official installation guide for the zip sitecore file (This will give you nice awareness of what sirecores need to works such as the different databases and permissions)
  3. Having installed at least once Sitecore using SIM
  4. Having completed the free Sitecore Developer Foundations eLearning

I’m going to cover a lot of topics so I have decided to split the series in the following way:

Part 1: Set up

Part 2: Templates, Placeholders and Renderings

Part 3: Pages and navigation

Part 4: A Better way

Part 5: Models and complex field types

Part 6: Using Queries

Part 7: Buckets In progress

So the first thing after the course that I want to know is: how do I separate my code from the Sitecore Code? I mean if you watched the course you have been working directly on top of the Sitecore instance that you installed which is bad for many reasons such as If you update your Sitecore version you could lost some of your own code and if you are using source control(which you should) you will have to have the Sitecore instance in your repositoy which is going to make it very big so We want a separated source code that we could deploy to any Sitecore Instance(with a compatible version) and have our site ready to go

So how do we do it? First we need need to begin by having a blank Sitecore Instance running in our PC for this I Recommend using Sitecore Instance Manage(SIM) it allows you to easily install a blank instance of Sitecore among other cool functions which you can read more on their wiki

Very simple details

Just select your version and go next, next, next and Install no need for any additional packages right now.

Click Install and wait for it

Once is done in your browser navigate to your newly created Sitecore site(in my case simpledemo.local) to make sure everything is working properly. Also go to your /sitecore and login using username: admin and password: b just to be sure your Sitecore site was correctly installed and have all the permissions that need

You should see:

Home page

And:

/sitecore

If you run into any problems you can use the troubleshoot section on SIM once you have your Sitecore instance installed and running we can now get our hands into development

  1. Fire up visual studio and create an empty ASP NET Web application (You might need to run it with administrative privilegies)

Let’s manually add the MVC nuget package to our Web Project, It is very important that you install the right version that your Sitecore Instance use to check that Open the Web.config of you Sitecore Instance and look for System.Web.Mvc and install that version on your project

Now lets create your first layout at Sitecore/Layouts/_layout.cshtml

An the content of my _layout.cshtml file:

Get Code here: _layout.cshtml

_layout.cshtml

Very important before publishing make sure your web config of your empty asp.net web application won’t replace the one in Sitecore for this you could delete your web.config and bring in the one from the Sitecore instance into your code or set it to not copy and build action to none:

Now need a a way to somehow place our code into our Sitecore instance, after all that is the point of this first post. So we publish!

Hit publish

Notice what was published

Now our layout file is there!

Ok so now for the fundamental course you know what we need to do next right?

Head to the launchpad on the /sitecore admin page and click on “Content Editor” Lets begin creating our default layout item on the left side menu, click the Layout -> Layouts item and click the Layout Folder button on the right

Enter “Site” as the name of the folder. Now click on Site Folder and select The MVC Layout option and set the DefaultLayout as the name of the item. Make sure to point to our _layout.cshtml file that we created earlier.

Now for the templates: on the left menu head to sitecore -> Templates and create a “Site” directory and inside of it create a “Base” directory. We are going to store the some base templates here

Inside the “Base” directory create the a _SeoData template using the fields shown on the following image:

_SeoData

Now create the “DefaultPage” template, that inherits from the _SeoData template. This template won’t have any additional fields

DefaultPage

Since this page will represent a page we need to specify which layout it will use. Lets begin by creating the standard values, We can do that selecting the DefaultPage template then click “Options” on the upper menu and then click Standard Values

Then click on the __StandardValues item and on the upper menu select Presentation and then click on Details, on the dialog select Edit on the Default Item

Then from the drop-down menu select the DefaultLayout we created earlier

Now let’s create our home page item to test our newly created layout. go ahead and delete the default home Item that comes with Sitecore in sitecore/content/ and add yours by right clicking The “Content” item and selecting Insert from template and select the DefaultPage template that we created

Home Page

Time to publish your new home page, on the upper menu click Publish and the select publish site.

once is finished navigate to your Sitecore site root

Now let’s get our values defined in the content editor into our actual web page

We will need to use Sitecore specific functions so we need to add a reference to Sitecore.kernel.dll You can get that from your Sitecore instance in /website/bin or your could install via nuget but for that first you will have to add the sitecore’s nuget feed: https://sitecore.myget.org/F/sc-packages/api/v3/index.json

Now lets add our nuget package

We will also need Sitecore.Mvc

It is very important that you match the version of your Sitecore instance in my case the same I use when installing trough SIM

Lets modify our layout view to use the actual data from the Sitecore database Source code here: _layout.cshtml

_layout.cshtml

If you have seen the fundamental Sitecore developer course nothing here is new So I won’t explain the code. Now build and publish and navigate to your sitecore site and open the source code.

Now let’s try to do a git status and notice something:

The green rectangle are the files that were created when we started the project and the files on the orange rectangle are the ones that we worked, but we only have our layout folder and our publish profile We don’t have anything regarding the work we did in the content editor all of that is just in our local database but remember we want a way to have that in our source control and to be able to sync it with other developers working in the project right?

Unicorn to the rescue!

I really recommend reading trough the documentation on the repo before going further. Now that you are done simply install the unicorn nuget package and proceed with the configuration.

We are going to use the default configs so rename the Unicorn.Configs.Default.example file to Unicorn.Site.Config and move inside a Site Directory.

Unicorn.Site.Config

I just updated the configuration name and description, I also pointed to my templates and layout inside the Site folder that we did earlier in the content editor and I also remove the include tags for languages, tasks, workflow and settings since I don’t need those for right now

Note: Make sure to set the Build Action property to: Content for the config file otherwise it won’t be published to the Sitecore instance

Lets publish again and navigate to simpledemo.local/unicorn.aspx

You should see something like this, we could now perform an initial serialization but notice the Physical root path, This means is going to store our serialized item in the Sitecore instance but that is not what we want we want those items in our source code so we need to find a way to tell unicorn the Physical root path, thankfully this is simple there is even an example config for this called Unicorn.CustomSerializationFolder.config.example.

So I will create a Unicorn folder in the root of my repo and I will point my configuration there

Unicorn.Site.Config

Let’s publish again and refresh /unicorn.aspx

Note: Depending on how you configured your site instance you might get access denied to your source directory. You will have to make sure the user or service account have access to your source directory.

Ok looks good now, let’s try and hit the “Perform Initial Serialization of Site” button

Looks good lets now you should have the serialization item in your Unicorn directory inside your repo

Now one thing to notice is that our home page item is not being controlled by unicorn, we will change that but be careful tracking your content items you have to be sure that you know what you are doing you don’t want to end up overriding content in production so make sure you know your deploy strategy.

For the moment we want everyone that has the repo to be able to clone it and see our starting home page so let’s add it to unicorn.

Unicorn.Site.Config

Head over the to unicorn control panel at /unicorn.aspx and hit Reserializeonce that is done you should have your content items in our items folder inside our repo

We are almost ready to commit & push our repo so that we can easily clone this repo and publish it to any new Sitecore instance.

But first there are two things that we have to tweak that are very tied to our personal machine setup

  1. Publish profile publishUrl:

What I did to workaround this was to add all the .pubxml files to the .gitignore in fact Visual Studio already had that on it’s .gitignore but it was commented so all I did was un-comment it.

Then I created a copy of the publish profile configuration and add to it’s extension .example as you can see on the image above That file will serve as a template so that other developers can create their own publish profiles

2. Unicorn target data physicalRootPath

For this we need to use a configuration variable that we will declare on our repository in the following directory /App_Config/Include/zzz/z.LocalDevelopment.config and there we are going to add our sourceFolder variable

and update the Unicorn.Site.Config to:

Now publish again and let’s make sure that Unicorn is still working correctly. All we need to do now is something similar to the publis profile just add to the .gitignore the “z.LocalDevelopment.config” file and create an example one

Great, we now have a nice basic setup where we can continue to work. Lets continue on Part 2: Templates, Placeholders and Renderings