New EPiServer website using Template Foundation

Install EPiServer CMS 6

First of all we install a new EPiServer website using Deployment Manager:

We refrain from installing the Public Templates package, so after install this is our fancy start page:

The core install contains the following files (including default.htm which is the aforementioned fancy start page, but if you’re like me you’ll instantly delete it):

Set up the website project in Visual Studio

Create a project file for the EPiServer website

Next I want a Visual Studio solution for the project, so I create a new ASP.NET project in Visual Studio:

I only do this to quickly get my hands on a Visual Studio project file and assembly information file (AssemblyInfo.cs located in the Properties folder) to use for my EPiServer website (I delete the rest of the default files that come with setting up a new Web Application project):

Next we open up the new project file and remove the Default.aspx reference (since the file no longer exists in the project) and also the Scripts folder:

After deleting those we can toggle Show All Files to include the files that came with the EPiServer install:

Managing different build configurations

This doesn’t have anything to do with EPiServer Template Foundation, but I still think it’s important for EPiServer projects. We set up a separate [Configuration] folder with sub folders named according to the different build types in Visual Studio and then set up a pre-build event to copy files from the associated configuration folder to the root when compiling:

In ASP.NET 4 Visual Studio 2010 a new way of managing build-specific configuration files was introduced, but we’ll stick with our old proven way of accomplishing it this time. :)

Add third-party assemblies

We put all third-party assemblies for EPiServer websites in a folder called [Library]. If you looked closely at the pre-build event above you noticed we copy these binaries to the bin folder before building:

Add MSBuild files

This isn’t required for EPiServer Template Foundation, but we put our MSBuild files in a folder called [MSBuild]. In it we put MSBuild configuration files and other resources such as libraries and executables required by the MSBuild scripts (for things such as minifying CSS and JavaScript files):

Add references to third-party assemblies

Next we’ll add references to required third-party assemblies, such as Page Type Builder. Note that we reference these assemblies from the [Library] folder:

Note though that we set Copy Local to false since we copy all our third-party assemblies through the pre-build event defined earlier:

Make sure you add these after any <clear/> element you might have in there!

We use the CSS parser in ETF (which utilizes dotLess) and we want a HTTP handler to manage CSS parsing while in development, but the pre-parsed minified CSS files when in production. So, we use these handlers for the Stylesheets folder where we keep all of our CSS files:

Note: you could obviously add these handlers for other locations or paths, too. For example, you could add them to the “PageFiles” and “Global” locations to enable DynamicImageProcessor for images uploaded to the VPP.

Since DynamicImageProcessor used a file-based cache we need to specify which folder to use for the cache in web.config (note that we added the configuration section earlier):

Create an EPiServer folder structure

We use a folder structure similar to that of the Public Templates package:

Setting the root as the start page

Because we didn’t install the Public Templates project we don’t have any content on our new EPiServer site. So, in order to be able to login we need to set the root page as the site’s start page inside episerver.config:

Oh, and while you’re in there, go ahead and change the display name so it doesn’t say PublicTemplates:

And finally, please replace the description so it doesn’t read “Example Site”! :)

Adjust the file paths for system page types

For some reason the file paths for the SysRoot and SysRecycleBin page types are incorrect after installing EPiServer. I manually edit these to include the /cms part of the path:

Note that the generic class has been fitted with a type constraint meaning the page templates need to be created for a page type class which derives from the PageTypeBase class in ETF.

Create the page type for the start page

We’ll create a new class called StartPage.cs:

We’ll make this class inherit the StartPageBase class, which is part of ETF:

[PageType]publicclass StartPage : StartPageBase{}

If we reload admin mode we’ll see our new page type has appeared:

If we edit the StartPage page type we can see a number of page properties, including those used to specify the site settings required by ETF, such as these for specifying the page types used for person and RSS pages:

However, to have the page type map to the correct page template we’ll specify the Filename parameter of the PageType attribute:

Date listing

The page type used for date folders will be called ArticleDateListing and inherit the ETF base class ArticleDateListingBase:

[PageType( Name="Date listing", Description="Used to view a list of articles published in a specific year or month", Filename = "/Templates/TemplatePages/ArticleDateListingTemplate.aspx")]publicclass ArticleDateListing : ArticleDateListingBase{

Note that we use the ETF version of the Property control which allows us to set which container element to use (instead of the standard <span>) and also to set the date format for DateTime-based properties.

In the code-behind file of our template we’ll simply bind the NewsList control to the 20 most recent articles by using the PageFactory class:

If we create a page on our site using the RSS feed page type we created earlier we’ll also have an RSS feed available.

I added some tags to one of the articles…

…and these are also included in the RSS feed:

Further reading

For an example where we add EPiServer Template Foundation to an existing website, see Introduction to EPiServer Template Foundation (which also covers how to publish posts and pages to your EPiServer site using Live Writer through the MetaWeblog API).