Setting up a DD4T development environment

Looking back at 2013 we can see that there has been an increased interest in DD4T, a light-weight framework for creating dynamic websites with Tridion and MVC. Currently there is support for Tridion 2009/2011/2013 and for both Java (Spring MVC) and .NET (MVC3 and MVC4).

This is the second part in a series of two posts where I will explain how to set-up a Virtual Machine development environment with Tridion and DD4T. In the first part create a Virtual Machine for Tridion development I explained the steps of setting up a Virtual Machine with Windows 2008 and Tridion 2011SP1. In this post I will explain all the steps needed to configure your freshly installed Tridion environment for use with DD4T. I will show how to install DD4T templates, creating a default Schema, Page Template and Component Template, publishing content to the Broker Database and finally rendering your first published page in your DD4T .NET MVC4 application. In this post I will use Tridion 2011SP1 and .NET MVC4, but most steps will hold for MVC3 or Java developers as well.

Prerequisites

  • Tridion 2011SP1 installation with Content Manager and Content Delivery installed.
  • Content Delivery configured for publishing to your Broker database. If you haven’t done this already, open the cd_storage_conf.xml file located at “C:\Program Files (x86)\Tridion\config” and add the Tridion Broker Database as default storage location. Refer to the Content Delivery installation manual for detailed instructions on setting up the Content Delivery.
  • Visual Studio installed (2012 or 2013 is recommended).
  • Recommended: a custom Tridion PowerShell profile to quickly manage Tridion services. Read my previous post on installing a custom Tridion PowerShell profile.

Create a Tridion BluePrint structure

The foundation of every Tridion installation is its BluePrint structure. Within Tridion every item belongs to a publication, and the relation of parent/child publications is called a BluePrint. Changing the BluePrint of an existing Tridion installation can be a time consuming process, or might not be possible at all. So great care should be taken in designing a BluePrint suitable for your needs. In my development environments I usually have a BluePrint structure consisting of four publications, each one being a child of the one above, with the Empty Master as master publication without any content:

Tridion BluePrint for DD4T development environment

Tridion BluePrint for DD4T development environment

Numbering publications within Tridion helps showing the publication hierarchy, as publications in the Content Manager are ordered alphabetically. One trick: after creating the first publication “00 Empty Master”, add a structure group named “Root” to the publication else the empty master can’t have any children.

Installing DD4T templates

The DD4T website contains two files to quickly get you started with DD4T. The first is a set of Tridion templates that help transforming the content to an XML structure that DD4T can process. Currently there is an installer available for Tridion 2009/2011/2013. During the installation you need to specify a TCM URI of a Tridion folder where you would like to install the templates. Pick an existing folder (or create a new one) in the Template Master publication. I’ve picked “03 Content Master > Building Blocks > Templates > DD4T Templates”.

The second template is a Visual Studio 2012/2013 project template to create an MVC4 application. Download and install this template to give you a new Project Template called “DD4T MVC4 Web Application”.

Configure publication targets

Create a Publication Target “Localhost” and Target Type “Localhost” and configure publication from “03 Content Master” to publication target “Localhost”. Let your content publish to “C:\tridion\incoming”.

Publication Target general settings tab

Publication Target general settings tab

Publication Target publication settings tab

Publication Target publication settings tab

Create Schemas

To create content we will first need a Schema. Create a new Schema called “Article” in “01 Schema Master > Building Blocks > Schemas”. Give it a title and body, where body can be a rich text field.

DD4T expects rendered content to have a metadata field called “view” that contains the name of the MVC view file that will be used to render the content. The most convenient way of storing such a list in Tridion is by using categories and keywords. Therefore create two category groups containing the values of the page and component view templates that we will create in our DD4T MVC4 application. In the image above you can see that I’ve used an “Article” view for Component Templates and a “Default” view for Page Templates.

Now create two metadata schemas:

  • Metadata schema titled “Metadata for DD4T PT”, with one field with xml-name “view”, which contains the value of the MVC4 view template name used for rendering pages. Values should come from the category “Page Template Views”.
  • Metadata for DD4T CT, with also one field with xml-name “view”. Values should come from the category “Component Template Views”.
Metadata schema settings for DD4T Component Template

Metadata schema settings for DD4T Component Template

Create Page Templates and Component Templates

Page and Component Templates in a DD4T set-up consist of various DD4T Template Building Blocks (TBB). A default page or component template contains two TBBs, one for rendering the content as XML and another one for publishing the related binaries such as linked files, images, etc. Perform the following steps to create a page and component template:

  • Start the Template Builder and create a new Component Template in the folder “02 Tempate Master > Building Blocks > Templates > Component Templates” named “Default CT”. Drag two DD4T TBBs in this CT, namely “Generate dynamic component” and “Publish binaries for component”.
  • Now create a new Page Template in the folder “02 Tempate Master > Building Blocks > Templates > Page Templates” named “Default PT”. Drag two DD4T TBBs in this PT, namely “Generate dynamic page” and “Publish binaries for page”.
  • After saving the CT and PT you must close the Template Builder to fully store the items in the database.
  • Now go back to the CME and open the Default PT. Set “aspx” instead of “html” as default file extension. This will render published pages with IIS’s PageHandler instead of the StaticHandler. Now select “Metadata for DD4T PT” as metadata schema and select “Default” as the view to render this PT with. Save and close the PT.
  • Now open the Default CT, select “Metadata for DD4T CT” as metadata schema and select the “Article” view as the view to render this CT with. Save and close the CT.
Settings for Page Template "DefaultPT"

Settings for Page Template “DefaultPT”

Settings for Component Template "DefaultCT"

Settings for Component Template “DefaultCT”

Publish your first content

We’ve created a schema and two templates for rendering the component and page content. Now it’s time to create our first content. We do this by first creating a component and then adding this component to a newly created page:

  • Create a new component named “Home” in “03 Content Master > Building Blocks > Content”. Base this component on the Article schema.
  • Now create a new page in “03 Content Master > Root” named “Home” and filename “index.aspx”. Base this page on the “Default PT”. Add the just created “Home” component to the page and use the “Default CT” to render the component. Save and close the page.
  • Publish the newly created page and check if the page is visible in the Tridion Broker PAGE table.
Query on PAGE table in Tridion Broker Database

Query on PAGE table in Tridion Broker Database

Create DD4T MVC4 project

If you’ve come this far you’ve succeeded in publishing XML content to the broker database. We can now create a DD4T MVC4 project that will query the broker database and render the content in a web application. Perform the following steps to create your DD4T MVC4 application:

  • Open Visual Studio and create a new project based on the “DD4T MVC4 Web Application” template.
  • By default the DD4T MVC4 Web Application contains a reference to Tridion 2013. As we’re using Tridion 2011SP1 we need to remove the reference to Tridion 2013. Do this by opening the Application References and deleting DD4T.Providers.SDLTridion2013.
  • Now add a reference to Tridion 2011SP1 by opening the  Package Manager Console and run:
    PM> Install-Package DD4T-Tridion-2011sp1
  • Set the DD4T.PublicationId application setting variable in the web.config to the publication ID where content is published from (in this example the publication ID would be 4). Also set the DD4T.DefaultPage to “index.aspx” and the DD4T.ProviderVersion to “Tridion2011sp1”.
  • Open “App_Start > DependencyInjection > DD4TNinjectModule.cs” and change the dependency from “DD4T.Providers.SDLTridion2013” to “DD4T.Providers.SDLTridion2011sp1”.
  • Copy the files Tridion.ContentDelivery.Configuration.dll, Tridion.ContentDelivery.Interop.dll, netrtsn.dll from the Tridion bin folder to the bin folder of your MVC4 application.
  • Open IIS Manager and create a new website called “DD4T demo”, point the Physical Path to the MVC4 application directory, add a binding (e.g. “localhost:81”) and set the Application Pool to .Net 4.
  • Go back to Visual Studio, open the solution properties pane, go to the Web tab and set “Local IIS” as server, project URL as “http://localhost:81” and override the application root URL, also with “http://localhost:81”.
  • Run your solution.

If everything works according plan you should see a server error page with the message that the “Default” view could not be found. This happens because we specified in the Page Template that the published page should be rendered with a view called “Default”. The error page also shows a list of all the locations where DD4T was looking for the Default view. By default DD4T will look in the “/views/page/” and “/views/shared/” directories. As the Default view doesn’t exist yet, let’s create one:

  • Go back to Visual Studio and create a new view in the folder “Views > Page”. Name the view “Default” and use the Razor view engine.
  • Replace the content of the view with the following code:

There are several Html helper functions provided by the DD4T framework, such as RenderComponentPresentations() used in this view. Others are RenderComponentPresentationsByView() or RenderComponentPresentationsBySchema(). For more information see the DD4T wiki on page views.

Now run your project. If you’re doing it right you should see a server error page with the message “the view Article or its master was not found”. In our Component Template we specified that the component should be rendered with the “Article” view. So let’s also create the Component view:

  • Go back to Visual Studio and create a new view in the folder “Views > Component”. Name the view “Article” and use the Razor view engine.
  • Replace the content of the view with the following code:

The component fields are accessible by using the @Model.Component.Fields. For the body field we use the extension method ResolveRichText(). If you call this method, the links inside the rich text field are resolved, and the “xhtml” and “xlink” namespace references are removed. Use this wherever you need to write out rich text. For more information see the DD4T wiki on component views.

Run your project again and you should see your rendered page. Congratulations! You’ve got your first DD4T website running! Next steps are to create more content with different schemas and templates, create things such as a navigation solution, caching, multi-language solutions, etc.

This post, together with the previous post on setting up a Virtual Machine for Tridion development, covers all aspects to get you started with Tridion development in combination with DD4T on your local machine. Please let me know if you liked this post. Suggestions and comments are highly appreciated, as well as your own experiences with DD4T development environments.

Create a Virtual Machine for Tridion development

Looking back at 2013 we can see that there has been an increased interest in DD4T, a light-weight framework for creating dynamic websites with Tridion and MVC. Currently there is support for Tridion 2009/2011/2013 and for both Java (Spring MVC) and .NET (MVC3 and MVC4).

This is the first part in a series of two posts where I will explain how to set-up a Virtual Machine development environment with Tridion and DD4T. In this post I will explain the steps needed to install and configure a Windows server with a fresh Tridion 2011SP1 installation. If you already have a Tridion development environment and only want to configure Tridion for usage with DD4T, then go on to the second post setting up a DD4T development environment.

Prerequisites

You will need the following software to get you started:

  • Windows 2008R2 SP1 64bit ISO
  • SQL Server 2008R2 Standard 64bit ISO
  • Tridion 2011SP1 installation files, with optional Hotfix Release 2
  • Tridion 2011SP1 license.xml and cd_licenses.xml files
  • Visual Studio 2013, with optional ReSharper
  • VirtualBox or equivalent (such as VMWare WorkStation) to run a Virtual Machine

Configure the Windows 2008R2 Virtual Machine

Start VirtualBox and create a new Virtual Machine with the Windows 2008  ISO. The hardware resources you need to reserver for the VM highly depend on the specifications of your local computer. I used 2 CPUs, 4Gb RAM and 40Gb HD space, which should be enough for your local development needs. Change this to your own preferences, but remember to check the Tridion license restrictions on maximum CPUs and RAM.

After the installation of Windows is completed you can set the following configuration settings to make your life as a developer a little bit more convenient:

  • Disable the password complexity requirements. Go to the Local Group Policy Editor “Computer Configuration > Windows Settings > Security > Account Policies > Password Policy” and set “Password must meet complexity requirements” to disabled.
  • Disable the Shutdown Event Tracker (the confirmation dialog box when shutting down or restarting the server). Go to the Local Group Policy Editor: “Computer Configuration > Administrative Templates > System” and set “Display Shutdown Event Tracker” to disabled.
  • Auto login the administrator account. Go to Start > Run, type “control userpasswords2”, click the Administrator account you want to login automatically and uncheck the “Users must enter a user name and password to use this computer” checkbox.
  • Rename the server to comply with the Tridion license file.

Install and configure SQL Server 2008

  • Map the SQL Server 2008R2 ISO image in VirtualBox and install SQL Server, including SQL Server Management Studio. When asked for a SQL Administrator user select the local Administrator account.
  • After the installation of SQL Server is completed start SQL Server Management Studio and connect to the SQL Server.
  • Go to Security > Logins and set the password of the sa user, without enforcing password policy. I mostly use passwords identical to the username on my development machines.
  • Go to the SQL Server properties. Select the Memory page and set the Maximum server memory (in MB) to 1000MB. SQL Server is known for allocating all available RAM to its own processes. By setting the max server memory you limit the size of the SQL Server buffer pool, but not of the other SQL components such as extended stored procedures, COM objects, non-shared DLLs, EXEs, and MAPI components. When you experience performance problems because of insufficient RAM you can increase the RAM on the virtual machine, or run a separate SQL Server instance. Read more about the effects of min and max server memory.
  • Go to the Security page and select “SQL Server and Windows Authentication mode” for the “Server authentication”.
  • Click OK and restart SQL Server.

Install IIS, Visual Studio and other tools

  • Go to Server Manager > Roles and add the IIS Server Role with everything selected, except FTP Server and IIS Hostable Web Core as you probably won’t need them.
  • Mount the Visual Studio 2013 ISO and install Visual Studio. After the installation is completed you can optionally install ReSharper, a very handy tool for Visual Studio.
  • Install other optional developer tools, such as NotePad++, Chrome, FireFox (with the relevant plug-ins such as WebDeveloper Toolbar, FireBug, FireQuery), IE11, Git and SourceTree.

Install Tridion 2011SP1

The first step when installing a fresh copy of Tridion is to create a Tridion CM database. The Tridion database installer has a dependency on MSXML, so first download and install MSXML 4.0 SP3. Now go to the Tridion installation files and start the DatabaseManager.exe. Create a new Content Manager Database and Logging Database.

Go to the Tridion installation files and start SDLTridion2011SP1.exe. I use the following settings for my development environments:

Tridion 2011SP1 installation options

Tridion 2011SP1 installation options

During the installation you’re asked for the Tridion license file, so keep it ready. For your own convenience, use identical usernames and passwords when asked for Tridion database users. Restart your server after the installation is completed.

After your server is restarted you can apply the Tridion 2011SP1 Hotfix Rollup 2, if applicable. First run the SQL query on the Tridion CM database and then the installer to update the Tridion Content Manager.

When the Tridion Content Manager is installed you can install the Content Delivery application. In production environments you usually would configure the Content Delivery application on a separate (presentation) server, but for now we will install everything on the same server.

  • Start the Content Delivery Setup.
  • Select every option that’s available during the install, including the Content Deployer Windows Service. On my development environments I always use the Deployer Windows Service and publish content from Tridion to the local file system. Another option would be to configure a .Net web service, but for development environments I think that’s to cumbersome. Follow the KISS principle.
  • After the installation is finished you can configure the storage configuration. Open the cd_storage_conf.xml file located at “C:\Program Files (x86)\Tridion\config” and add the Tridion Broker Database as default storage location. Refer to the Content Deployer installation manual for detailed instructions on setting up the Content Deployer.

Now your Windows server is up and running and the Tridion Content Manager and Content Delivery are all installed. One final recommendation is to install a custom Tridion 2011 PowerShell profile, to quickly manage all Tridion services from the PowerShell. Read my previous post on installing a custom Tridion PowerShell profile.

Next step is configuring Tridion for use with DD4T. Read my next posts about setting up a Tridion BluePrint, configuring the Tridion Deployer and publishing your first page with DD4T.

Configure Tridion 2011 LDAP integration

Authentication in Tridion 2011 SP1 can be done several ways; you can use local Windows accounts, install Tridion with an Active Directory user on a server within a domain, or you can use LDAP. The former two are easy to implement, but LDAP can give you some headaches. This post will explain the steps needed to configure LDAP authentication in the Tridion configuration files and MMC snap-in and also describe ways to tackle problems.

Required LDAP settings

The first thing to do is verify if all required connection details for the LDAP server are available. You will need:

  • The LDAP server address and port number;
  • Know if SSL is required and install the server’s certificate if needed;
  • The Distinguished Name (DN) and password for the LDAP search account;
  • Configure firewall rules that allow access from the Tridion CME Server to the LDAP server.

To verify if all settings are correct you can use an LDAP client to connect to the LDAP server, such as ldp.exe available on Windows Server installations or an external tool such as Softerra’s LDAP Browser. Do this on the Tridion CME machine so you immediately identify if the connection to the LDAP server isn’t blocked by firewalls.

When connected search for the Organizational Unit (OU) that contains all users you want to authenticate. Pick one user and find the Username Attribute and User Description Attribute. Also note the User Base DN and Group Base DN, as you will need this to configure LDAP in the MMC snap-in.

Configuring Tridion for LDAP authentication

The Tridion installation manual gives a good overview of all the steps needed to configure LDAP authencation in Tridion. The steps are basically the following:

  1. Configure IIS for Anonymous Authentication, so authentication is handled by Tridion;
  2. Change the web.config files located in the web\ subfolder, WebUI\WebRoot subfolder, and webservices\ subfolder of the Content Manager root location;
  3. Configure Directory Service in the Tridion MMC snap-in;
  4. Configure an Impersonation User
  5. Restart Tridion services, COM+ Application and IIS. Tip: for a quick way to restart Tridion services see my previous post on installing a Tridion 2011 PowerShell profile.

Steps 1 and 2 are well described in the Tridion 2011 manual (login required). The following screenshot is an example of the Directory Service window.

Tridion 2011 Directory Service LDAP configuration settings

Tridion 2011 Directory Service LDAP configuration settings

Some tips and tricks about the Directory Service settings:

  • The Directory Service Name is used to identify the Directory Service and can’t be changed afterwards.
  • In my experience with Tridion 2011 the Group base DN must be filled even when Group Sync isn’t enabled, else authentication will fail.
  • The domain separator is mostly a colon, but on Windows environments it also can be a back-slash. When you’re not sure what to use and you’re migrating an existing Tridion installation you can take a look in the trustees table in the Tridion CM database. The domain separator and Directory Service Name are used in the user names column for LDAP users (e.g. Directory Service Name:username or Directory Service Name\username).

Troubleshooting Tridion LDAP

Most LDAP implementations are pretty straight forward and don’t cause a lot of trouble. But when they do, the following list can help you in troubleshooting the problem:

  1. Verify if the LDAP connection from the CME server is possible by using an LDAP browser client and connect to the LDAP server, using the same credentials as configured in the MMC snap-in.
  2. Verify if you completed all steps from the manual and restarted the Tridion services, COM+ Application and IIS after changing settings. Tip: for a quick way to restart Tridion services see my previous post on installing a Tridion 2011 PowerShell profile.
  3. Use an unencrypted LDAP connection (port 389 without the SSL checkbox checked). By doing this network package contents can be analyzed.
  4. Install a network package capture tool. My personal favorite is WireShark. Use this to analyze network traffic and see where things might go wrong. Be sure to specify the “ldap” filter, else your screen will be flooded with package captures.
  5. Use Fiddler2 to analyze browser data when visiting the CME. This can give you insight in specific http error messages sent to the browser.
  6. When the LDAP server is behind a load balancer, verify if the load balancer isn’t the issue by using an LDAP server name or IP address of one of the LDAP servers in the MMC snap-in.
  7. Once I was working on a Tridion 2011 implementation with LDAP integration and the CME interface was terribly slow. User authentication did work, but reloading the CME interface took over 90 seconds. After several extensive sessions with SDL Support we discovered that the problem was in the server name resolving. We checked this by using IP addresses instead of server names in the MMC snap-in. So when dealing with slow CME performance always try to use server IP addresses instead of server names to see if this revolves the problem.
  8. Install a second Tridion CME server and configure it for local authentication, using the same database as the CME server configured for LDAP authentication. This way the problem can be pinpointed to a specific authentication method.

When your LDAP implementation still doesn’t work create a support ticket with SDL or post a question on the Tridion StackExchange page.

Tridion 2011 PowerShell profile

One of the first things I do when configuring a new Tridion server is installing a custom PowerShell profile. This profile gives you easy access to manage all the Tridion services running on the server, including the COM+ Applications.

When configuring Tridion by changing settings in the various configuration files or the Tridion MMC snap-in, Tridion services often need to be restarted for the settings take effect. We all know that manually restarting services from the Component Services panel can be a time consuming process, especially if the order of restarting matters and the Tridion COM+ Application also needs a restart.

The following PowerShell profile contains functions to restart all Tridion related services and components in one go. The script was originally created by Nuno Mendes from SDL Support and I slightly modified it to be able to specify all Tridion services present on the system at the beginning of the script. Installation instructions are included if you’re new to PowerShell profiles and want to give it a try. After installing the profile PowerShell will look like this when started:

Tridion 2011 PowerShell Profile Screenshot

Tridion 2011 PowerShell Profile Screenshot

Let me know if you’ve got questions, suggestions or other tips & tricks.

CSS3 transitions used on Deloitte Reaching Peaks website

Recently I was asked to build a website for a group of Deloitte colleagues who were planning an expedition to Mt. Kilimanjaro in Tanzania. Now it's almost a month ago since they stood on top of the summit and it's a good time to write about the CSS3 transitions I used on the Deloitte Reaching Peaks website.

The first feature I want to talk about is the walking footsteps in the background. This is done by using jQuery's delay method and the transition method from the jQuery Transit plugin. The JavaScript and Less source code can be viewed below.

The second feature is the Deloitte Reaching Peaks logo. On top of the logo you can see moving clouds and clicking on the logo unleashes the extreme weather that can rapidly occur in mountainous areas.

The logo is a png-image with on top three divs that all have a background image with fog. I created these three images in Photoshop using a semi-transparent brush, where each of the images have the fog on different altitudes of the mountain. After loading the page the recursive animateFog() method is executed for all three divs containing a fog image, but each method call is given a unique delay (in milliseconds, using jQuery's delay method). This gives a more natural flow of the clouds over the mountain. When clicking the logo the mountain shakes and two lightning bolts are quickly shown.

Let me know if you have some nice implementations of using CSS3 transition methods or if you've got some questions or comments.