Tuesday, 1 July 2014

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 data-driven EPiServer 7.5 Add-On with ASP.Net Web API

1 comment: