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.
- 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:
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”.
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”.
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.
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.
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.