How to setup a EpiServer 7.5 Add-On Development Environment

The goal of this post is to describe how to setup a Visual Studio 2013 Solution for the development of EpiServer 7.5 MVC Add-Ons*.

* while this post is geared towards the MVC version of the Add-Ons, to setup for WebForms shouldn't be too dissimilar.

Create an EpiServer Project to test your Add-Ons with

1. In Visual Studio > New Project > EPiServer > EPiServer WebSite
• If you don't see the template, you will need to install the EPiServer CMS Visual Studio Extension
• Name the project something appropriate like 'EPiServerAddOnDevSite'
• May also be advisable to give the solution a more encompassing name such as 'MyCompany.EPiServer.AddOns'
2. In the 'New EPiServer Web Site' dialog:
• Choose 'Empty' to create a bare-bones EPiServer site
• Tick the 'MVC' option to include core references and folders for an MVC site
• Untick the 'Add EPiServer Search' box unless your Add-On functionality needs it
3. Add a basic ContentType (PageData) Model to the site (in order to test your Add-Ons you'll most likely need a page with at least one ContentArea)
• Add a class to the 'Models\Pages' folder called 'StandardPage'
• Make the StandardPage class inherit from 'EPiServer.Core.PageData'
• Decorate the class with the 'EPiServer.DataAnnotations.ContentType' attribute 
• Add a GUID to the ContentType attribute so it has a unique identitfer: (GUID = "64479CB5-3156-4DF3-8618-8DE59D063B71")
• Add a default ContentArea to the StandardPage, called 'MainCotentArea':
• public virtual ContentArea MainContentArea { get; set; }
4. Add an MVC Controller for the StandardPage Model you created
• Add an Empty MVC controller to the 'Controllers' folder called 'StandardPageController' 
• NOTE: The name of the controller should match the name of the PageData class you created above 
• Make the controller inherit from EPiServer.Web.Mvc.PageController<>
• Make the StandardPage type you created above as the type parameter to the PageController<> base class
• e.g. PageController<StandardPage>
• Add a basic 'Index' action method which simply returns the Index view with the passed in StandardPage object as the model:
5. Add the 'Index' view
• In the 'Views' folder, create a new folder called 'StandardPage'
• In the 'Views\StandardPage' folder, add a Razor view called 'Index.cshtml'
• Compose the Index view to simply render the MainContentArea property via the EPiServer HTML Helper extension 'PropertyFor'
6. Test the StandardPage content type by adding a new page in the CMS
• Start the website and go the the EPiServer dashboard '/episerver'
• e.g http://localhost:64523/episerver
• Login with your windows credentials
• NOTE: this won't work if you've previously been running another instance of EPiServer in your browser (due to Cookie conflicts i assume) - so to ensure a smooth ride, try running the site in a Chrome Incognito window
• Once the dashboard appears, click 'CMS', then 'Edit', then the '+' sign, then select 'NewPage'
• If all went well, EPiServer will automatically select the one and only ContentType in the system, 'StandardPage' and prompt you to name a new instance of it.
• Give the new page a name e.g. 'WidgetPage'
• You should now be taken to a preview of the page.
• Publish the page (right hand corner of the interface look for button saying: "Publish?")

If everything went well, you now have an EPiServer site which you can use to test your Add-Ons with.

So the next step is to create some Add-Ons!

See my related posts:

How to develop a simple EPiServer 7.5 Add-On

How to develop a data-driven EPiServer 7.5 Add-On with ASP.Net Web API