Often overlooked, however, is where you dip your toe in. That is, “how do I get started with development?” Or, specifically, “how do I get a simple MVC page or
This guide will show how to set up your local development environment and prepare for your first Sitecore control.
Step 1 – Gather the Pieces
You will need a Sitecore installation file, a Sitecore license file, SQL server (“express” is okay), IIS and Visual Studio.
You may guess that the very first step is getting Sitecore installed on your local machine. You need to ensure that SQL and IIS are installed and you have credentials to an SQL account. Before you begin the installation you will need a Sitecore license file. That file should be available through your Sitecore sales representative. Once ready you can find the Sitecore installation file here https://dev.sitecore.net/Downloads.
Step 2 – Lay the Foundation
Start the Sitecore installation, name your website and launch Sitecore when installation is complete. You should now see the default Sitecore homepage. (Don’t see the correct page? Refer to this document about installing Sitecore 8).
Now it’s time to create the project. Open up Visual Studio and create a new Web Application. For this demo, we’re creating an MVC 4 site (File > New Project > MVC 4 > Empty). Double-check that your solution is created in the directory you want. Now that you have an “empty” project, remove the files and folders that would conflict with what has been installed with Sitecore.
Remove everything but the folders
Controllers Models Views
In addition, remove everything from your references folder. (You will pull in references from the Sitecore bin directory to avoid DLL conflicts.)
Once you have cleared your project, open Windows Explorer to C:\inetpub\wwwroot\[Sitecore Site]\Website. This website folder is the heart of the Sitecore web application. Pull in the necessary references and files,
Web.config App_configfolder (if you need connection strings or custom configs)
Then add your references from your website bin directory. Your project will include a lot in the app_config and web.config items, most of which you don’t need now. But it doesn’t hurt to have these available since you will most likely be updating or adding values later.
Step 3 – Set Up Walls and a Roof
You are almost ready to create a component in Sitecore. First, let’s look at how Sitecore builds its pages from a high level.
A page in Sitecore is built using Layouts, Renderings, and Data Templates. Layouts are comparable to master pages or MVC layouts and provide the main structure of the entire page. Renderings go inside placeholders specified in the layout and are HTML- and content-driven. Data Templates are the equivalent to models and store the actual content. Both Layouts and Renderings will have Items based off of the Data Templates as models.
If you look at the Presentation Details in the homepage in the Sitecore content tree, you’ll see a Sample Layout and sub-layouts, as well as your rendering. The initial sample page is built in ASP which won’t work for your purpose, but you can follow a similar pattern as seen there.
Create a Simple Layout
In your project, you will need a view. This will serve as your main layout.
I borrowed code from the original sample layouts, and
Build and publish your code to the Website folder. (Set up a file publish profile to C:\inetpub\wwwroot\[Your Site\website.)
Now create a Sitecore item to use your code. Go to the Content Editor under [Your Site Name]/sitecore. In the tree, expand “Layouts” and insert a new layout. This will be your Main Layout established earlier. Walk through the wizard understanding that you will be changing which file it points to. Once created, update the path to point to your
You are now ready to assign the main layout to your home item. To do this, select the home item, go to the presentation tab and select Details. When the window opens, select Sample Layout and change it to your new Main Layout. Also remove the renderings and add a placeholder called “main” (to correlate with the placeholder in the markup). The result should look like this:
Create a Component
The biggest differences between a layout and your component
Now return to your page in Experience Editor and add your component to the placeholder.
Driving the Component with Data Templates
You have successfully created a static page and static components, but that’s not using the best features of Sitecore. The next step is to make your content dynamic. To do
Createa data template
- Update markup to use fields
- Create data item in the content tree and tie it to the rendering
In the Content Editor create a new item template under Templates. Add a couple of fields and save it.
Now update the markup. (There are better ways to handle accessing these fields, but for a simple and
Then create your data. You can add a folder in the content tree to hold your data, then right click to Insert from Template. Then add the template and fill out the information.
Finally, associate your new data item to your rendering. Do this from either the Experience Editor or the Content Editor by selecting the rendering and editing the properties on it.
With these pieces in place, save your page and see your content pull from Sitecore. From the Experience
A Final Touch
To polish the rendering a bit, go back to the rendering item in the Sitecore layouts folder. Sitecore makes some intelligent suggestions if you give a rendering enough information. Specifically, if you tell a rendering what template to expect, and where that template is expected to go, the Experience Editor will give you the option of creating content on-the-fly.
Once created, you can edit the fields directly from Experience Editor by clicking on the [No Text In Field] label.
Step 4 – Tools
One benefit from working with a platform as large and extensible as Sitecore is you can use tools and applications to speed development. Here is a quick list of some common tools used in most
Used for configuration transforms, allows you to have separate config values for each of your build configurations.
Primarily used for saving a Sitecore tree into a
version-ablelist. Allows you to share the templates layouts and content of your Sitecore environment with others without running into conflicts.
Can take your Sitecore items and generate C# models.
- Custom Item Generator
Similar to TDS in its model generation, Custom Item Generator is a tool that creates C# objects from the templates you have created.
- Coveo for Sitecore
A search provider with a free edition that allows you to use the powerful Coveo search engine.
As you delve into development you will begin to see the beauty of the Sitecore platform. With the tools to create a basic Sitecore