EPiServer 7 CMS Development (2014)

I. UNDERSTANDING EPISERVER CMS

Chapter 2. Getting started with EPiServer

In this chapter we’ll cover installation of EPiServer CMS and prerequisites needed for that. We’ll also look at how to create a ready-to-use sample site using EPiServer’s Deployment Center.

System requirements

In order to develop websites with EPiServer 7 your computer must fulfill a number or requirements. Generally speaking you need a Windows computer with ASP.NET MVC 4.0 installed. You will also need SQL Server and Visual Studio. As for the latter two the free Express versions are supported.

More specifically, the following versions are supported for development:

Note that while it’s usually a good idea to have a local installation of SQL Server on a development computer it’s possible to use a remote database server, such as a shared development server.

Throughout the rest of the book it will be assumed that you have a computer that meets the above requirements. If you don’t you can obtain .NET, ASP.NET MVC 4.0, Visual Studio Express and SQL Server Express using Microsoft’s Web Platform Installer found at:http://www.microsoft.com/web/downloads/platform.aspx

Installation

While EPiServer CMS is used as a platform on which to build websites it’s packaged as a Windows application that requires installation. Prior to installing it we must first obtain the installation package. That’s done by downloading it from EPiServer’s user community site, EPiServer World.

In order to be able to use the download section on EPiServer World one must have, and be logged in as, a registered user. Therefore the first step in installing EPiServer CMS is creating a user on EPiServer World.

1. Open a web browser and navigate to http://world.episerver.com.

2. Click on the Register link in the top right corner of the site.

3. Fill in the required information and proceed as per the instructions on the site.

4. Verify your e-mail address and log in on the site.

Once logged in navigate to the download section and find EPiServer 7 CMS amongst the downloadable products. Use the “EPiServer 7 CMS” link to download the core product.

The download for EPiServer CMS is a ZIP file containing, amongst other files, a file named setup.exe. Extract the ZIP file to somewhere on your hard drive and execute setup.exe by double clicking on it. This opens up a wizard that will guide you through the steps needed to install EPiServer 7 CMS.

The download packaged unzipped with Setup.exe highlighted.

The installation wizard requires little input. Simply check the license agreement checkbox and click OK to proceed with the installation. By doing so you will install EPiServer CMS along with a few other component that the CMS needs. You may also select a couple of other EPiServer products, Relate and CMO, but we won’t be needing them for the scope of this book. The initial dialog in the wizard also has a checkbox with the label “Create Alloy Demo Site”. By checking that the wizard won’t just install the CMS, it will also create a site. We’ll look at how to do that separately so don’t select that.

After selecting features to install the installation wizard proceeds to install various components, showing a progress bar for each. Finally it ends with a confirmation dialog in which one can choose to launch Deployment Center or view getting started information. We’ll be looking at Deployment Center separately in a bit so you can un-check both and click OK to complete the installation.

What the installation does

Once EPiServer CMS has been installed a number of modifications has been made to your computer:

· A folder named EPiServer will have been created in the Program Files folder.

· A Windows service named EPiServer Scheduler Service will be running.

This services is responsible for executing scheduled jobs in EPiServer sites, a feature we’ll be looking at later on.

· A new program named EPiServer Deployment Center has been added to the Start menu.

Deployment Center is a program for performing various EPiServer related tasks. Perhaps the most important and common task that it’s used for is to create new sites. However, Deployment Center is also used for upgrading existing sites to newer versions of the CMS and for installing additional features. It’s also possible to perform only certain parts of the operations needed to create a new site, such as creating only the database.

Licenses

In order to run an EPiServer site a license is needed. If we set up a site without a license the site will actually be fully functional but a large license warning will be shown on top of each page.

During development there is two ways to address this problem. We can either use the built in web server in Visual Studio (Cassini or IIS Express depending on what version of Visual Studio we’re using). When doing so EPiServer detects this and is kind enough to not show the license error. Alternatively we can use the full-blown IIS web server but must then obtain a license file.

License files can be ordered from EPiServer’s licensing site, http://license.episerver.com. They come in three different categories:

· Production and test licenses - These are paid for licenses that must be ordered from EPiServer and are intended to be used on production, staging and test servers.

· Developer licenses - These are licenses without any restrictions other than that they are only valid for a year. Each of these license files can be used for 15 different EPiServer sites. In order to obtain these licenses one need to be logged in as a user that is connected to an EPiServer partner.

· Demo licenses - The most restricted type of license. A demo license is only valid for 30 days and can only be used for a single site. It’s also only possible to have a single site using a demo license on the same machine. These licenses can however be ordered without having to be logged in at EPiServer’s licensing site.

No matter what type of license it is a license file is bound either to an IP address or a MAC address and certain information is required to order one. Here’s how the form for ordering a demo license looks at the time of this writing:

All fields are required in the form but most important are:

· Product - Here you should choose the product that you need a license for, such as “EPiServer 7”.

· E-mail - The license file will be e-mailed to this address.

· Bound Input - Here you have to choose whether the license should be bound either to an IP or MAC (physical) address. Once you do you need to input the address. To figure out one of those addresses you can start a Windows Command Prompt and either type the command “getmac” to find out your computer’s MAC address or the command “ipconfig /all” to get a list containing, among other things, your IP address and MAC address.

We’ll be creating a first EPiServer site which will run in IIS in the next section so now would be a great time to try this out and obtain a license file. If you have a user on EPiServer World that is connected to an EPiServer partner you can log in on the licensing site and order a developer license. If not, look for the link to order a demo license.

Creating a sample site

Using the newly installed EPiServer Deployment Center you can create new EPiServer sites as well as perform operations, such as upgrades, on existing sites. During creation of new sites it’s possible to add modules to the site, including entire code bases for example/template sites. EPiServer 7 CMS ships with one example site out of the box - a website for a fictive company named Alloy Technologies.

The purpose of the example site is to show developers how a site can be built using EPiServer CMS and to show a number of best practices. It also serves as a way for EPiServer to distribute example code that developers can copy, modify and use in their own projects.

Yet another purpose of the Alloy templates is to provide a fully functional example site that can be used to illustrate key features of the CMS and for those new to EPiServer CMS to play around with.

That, playing around with it, is what we’re going to do. So, let’s create a first EPiServer site with the Alloy templates installed so that we can take a look at how EPiServer works before we delve into actual development from scratch.

To set up a site with the Alloy templates launch EPiServer Deployment Center and click the link “Install EPiServer site and SQL Server database”.

Creating a new site using the Deployment Center “Quick Link”

Doing so launches a wizard for creating a new site. The wizard collects various configuration values that are needed to set up the site from you. The wizard needs quite a lot of information. However, for many options it provides sensible default values.

The first step of the wizard looks like this:

First step of the wizard for creating an EPiServer site using Deployment Center

In this first step of the wizard we can configure the name of our site and the physical path for its web root. When creating a site using Deployment Center a site in the local IIS server will be created for it. In this step we can also configure settings for that site, such as what application pool to use, host name and port number. Finally, we can also configure the so-called UI path for EPiServer.

As our current objective is to set up an Alloy sample site quickly we’ll leave most, but not all, of these settings as their default value.

Change the site name, the first setting, from “MyEPiServerSite” to “EPiServerSample”. Also change the relative path to the EPiServer User Interface, the last setting, to “/episerver”. The dialog should now look like this:

The first step of the wizard with customized settings for our sample site.

Click next to get to the second step of the wizard, which looks like this:

The second step of the wizard for creating a new site.

In this step the wizard asks us for the database information that it requires. First of all it needs to know what database server the site will use. Given that there’s a SQL Server running on the machine this setting will be automatically populated.

Next the wizard needs to know how to authenticate it self when it creates the database for the site. Given that the database server allows Windows authentication and your user is an administrator you can leave it as is.

Finally it needs to know the name of the database for the site and the user name and password for the sites database user. As the wizard suggests database name and user name based on the sites name all we have to do is enter a password before clicking on the Next button, bringing us to step 3:

The third step of the wizard for creating a new site.

In this step we can configure the absolute path for the sites Virtual Path Provider folder. This is the path where the sites assets files, such as uploaded images, will be stored. For our purposes the suggested path works well, meaning that we can click next without making any modifications. Doing so brings us to step four of the wizard:

The fourth step of the wizard for creating a new site.

In the fourth step we can select to install various modules in the site. Leaving things as is will produce a standard, empty, EPiServer site. As we want to set up an Alloy sample site we check the “Install Alloy Sample Site” checkbox.

The fourth step of the wizard after checking the checkbox for the Alloy sample site.

After selecting to install the Alloy sample site and clicking next we are brought to the wizards fifth step:

The fifth step of the wizard for creating a new site.

Here we are asked to provide a path to an EPiServer license file. Selecting such a file is optional. If we don’t provide a license file the site will be fully functional but a license error message will be absolute positioned at the center of each page.

While it’s possible to add the license later, now is as good a time as any to add it. So, enter the path to the license file that you ordered as described in the previous section and then hit the Next button. Doing so brings us to the sixth and final step of the wizard:

The final step of the wizard for creating a new site.

In this step we are presented with a summary of the settings we’ve made during the wizard. Given that we find everything satisfactory we can click the Next button to create the site.

After doing so the wizard disappears and a new window with a progress bar pops up.

Window showing the progress of creating the site.

Once the creation of the site is done it will be automatically opened in your default browser.

The startpage of the Alloy example site in Firefox.

Components of an EPiServer site

Before we start looking at our newly created sample site in general and EPiServer’s user interface in particular, let’s take a look at what Deployment Center did during the creation of the site.

Connecting to the database server using SQL Server Management Studio we can see that a new database and database user has been created using the names configured in the wizard:

Given that we didn’t modify the settings for webroot and VPP folder paths during the create new site wizard we’ll find a folder named EPiServer under C:. Looking in that we’ll see two folders, “Sites” and “VPP”. In the Sites folder there’s a folder with the same name as our site, EPiServerSample.

This folder is the site’s webroot. As we have set up a fully functional sample site there’s quite a lot of stuff in the folder. Amongst other things there is a Visual Studio project file, Alloy.csproj, which can be opened in Visual Studio in case we want to look at the code or modify and recompile it.

Looking in the C:EPiServerVPP folder we also find a folder with the name of the site.

In this folder, which is clearly located outside of the webroot, various assets are stored. Each sub folder is the root folder for a Virtual Path Provider.

A Virtual Path Provider, abbreviated “VPP”, acts as a bridge between a certain path in a web application to some other location where files are stored. The provider may simply provide a one-to-one map to some location on the same hard drive as the website is located on, or it may provide some form of complex mapping, such as to a different directory structure and file names. It may also provide a mapping to a remote file source, such as an online photo gallery.

Virtual Path Providers is not an EPiServer specific technology but rather a part of ASP.NET. EPiServer however utilizes this technology extensively both for uploaded files, such as images and documents uploaded by editors, and for it’s own internal files required by the CMS’ user interface.

If we look at the local IIS server, using the application “Internet Information Services (IIS) Manager” we find that Deployment Center has created a new IIS site using the configuration parameters from the wizard.

If we took a look under Application Pools in IIS we’d also find a newly created application pool for the site, configured to use .NET version 4.0.

As we’ve just seen, creating a new EPiServer site using Deployment Center performs the following actions:

· It creates a webroot folder and copies files into it.

· It creates a root folder for Virtual Path Providers used by the site and copies files into it.

· It creates an IIS site with the webroot folder previously created as the physical path for the site’s webroot.

In addition to the above mentioned steps Deployment Center also installed the Alloy template site module. During this process it did the following:

· Copied source files into the webroot.

· Imported sample content to the site by means of an EPiServer import package. During this import files, such as the site’s logotype and other images, was copied to some of the VPP folders. In addition to that a number of content items, such as pages, was inserted into the site’s database.

· Configuration changes, such as configuring the ID of the site’s start page that was inserted into the database.