Get development started with Sitecore Part 1: Set up

Luis Palacios
Sep 12, 2017 · 12 min read

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

Image for post
Image for post
Very simple details

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

Image for post
Image for post
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:

Image for post
Image for post
Home page

And:

Image for post
Image for post
/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)
Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

An the content of my _layout.cshtml file:

Get Code here: _layout.cshtml

Image for post
Image for post
_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:

Image for post
Image for post

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!

Image for post
Image for post

Hit publish

Image for post
Image for post
Notice what was published

Now our layout file is there!

Image for post
Image for post

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

Image for post
Image for post

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.

Image for post
Image for post

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:

Image for post
Image for post
_SeoData

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

Image for post
Image for post
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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post
Image for post
Image for post
Home Page

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

Image for post
Image for post

once is finished navigate to your Sitecore site root

Image for post
Image for post

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

Image for post
Image for post

Now lets add our nuget package

Image for post
Image for post

We will also need Sitecore.Mvc

Image for post
Image for post

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

Image for post
Image for post
_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.

Image for post
Image for post

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

Image for post
Image for post

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.

Image for post
Image for post
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

Image for post
Image for post

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

Image for post
Image for post
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.

Image for post
Image for post

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

Image for post
Image for post

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.

Image for post
Image for post
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

Image for post
Image for post

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:
Image for post
Image for post

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.

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

and update the Unicorn.Site.Config to:

Image for post
Image for post

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

Image for post
Image for post

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store