Thursday, 22 November 2012

Notes on Configuring a New EPiServer 6 R2 Website for Continuous Integration

I’m assuming that you’ve read the installation instructions:

http://world.episerver.com/Documentation/Items/Installation-Instructions/EPiServer-CMS/Version-6/EPiServer-CMS-6-R2/Installation-Instructions---EPiServer-CMS-6-R2/

Creating a new blank EPiServer Site Project and Solution

  1. Prepare Repository
  2. Check out trunk/main branch to working copy
  3. Create an Empty VS Solution root of the working copy
  4. Download the  6R2 installer from EPiServer World (you’ll need to register):
  5. http://world.episerver.com/Download/Categories/Products/EPiServer-CMS/
  6. Run installer and deploy a Core deployment to the Working Copy, creating a project folder
  7. Open VS solution
  8. Add New Empty Website Project (use a temporary name)
    image
  9. Configure project properties as required:
    • Assembly Name (<client>.WebSite)
    • Assembly Info (Version, Name, Copyright, etc)
    • Namespace (<client>.WebSite)
    • Target Framework (.Net 3.5)
    • Treat Warnings as Errors (All Configurations)
    • Strong Naming Key
    • Code Analysis Rules
  10. Save and Remove the Temporary Website Project from the Solution
  11. Move project file into EPiServer Website folder and rename to match
    1. Edit the file in notepad to replace all instances of the Temporary Project Name with the real one
    2. Also copy
      1. web.*.config (not web.config)
      2. the Properties folder
      3. Any supporting files you added (Strong naming key, Code Analysis rules, etc)
  12. Add the moved Project file to the solution as an Existing Project
  13. Enable ‘Show All Files’ and include all
  14. Edit episerver.config to configure:
    1. Start Page Id – set startPageId attribute to ‘1’ (from ‘0’) (/sites/site/siteSettings[startPageId])
    2. Site Description attribute
    3. Site Url - the siteUrl attribute (/sites/site/siteSettings[siteUrl])
  15. Edit EPiServerFramework.config to ensure that the correct siteHosts are set
  16. Test the project builds as expected and website is working (place holder page is displayed)
    1. place holder page is displayed
  17. Commit the solution to version control, ensuring that only code and configuration files are committed not build outputs or per user settings (/bin, /obj, *.user files etc).

Managing Dependencies for CI

The project builds successfully as all of the required dependencies exist within the bin folder of the website.  This means the the build server will not be able to successfully build the project.  We can manage this in two ways:

  1. (Recommended) Move all of the DLL’s from the bin folder into a ‘3rd Party’ or ‘libs’ folder and create references to all of the top level assemblies from there, ensuring the ‘Copy Local’ is enabled.
    • For each additional EPiServer installed to the website this procedure will need to be repeated
  2. Manage the dependencies via the EPiServer NuGet service (required NuGet VS extension) (not recommended as the feed is outdated compared to the download from EPiServer World) Admission: I couldn’t get this to work, so I might be a bitter!

From here it should be build scripts as usual!


Here Be Dragons – Configuring EPiServer Dependencies using NuGet

I couldn’t get this to work as intended – in the hope that I’ve done something stupid and easiliy correctable….

Managing dependencies via NuGet is the new standard for managing dependencies and has many advantages over manually maintaining references.  For CI builds, not storing binary files within version control is a big win.

Unfortunately, the EPiServer NuGet feed doesn’t take advantage of all NuGet offers and is already a little out of date.  However, if you want to attempt to get a core EPiServer site running using NuGet dependencies:

  1. Enable NuGet Package Restore on the Solution (from Project Menu, or Right Click on Solution)
  2. Add the EPiServer NuGet feed (http://nuget.episerver.com/feed/packages.svc/) to the Package Manager Sources 
    image
  3. Install the required packages as references to the EPiServer Website project via the Package Manager Console (Ensuring the EPiServer package source is selected)
    • Install-Package EPiServer.CMS.Core -Version 6.1.379.0
    • Install-Package EPiServer.Framework -Version 6.2.267.1
  4. The balance of the dependencies will need to be references from the 3rd Party folder.
  5. At this point the project wouldn’t display as a website will a null reference exception (no stack trace)

Sunday, 15 January 2012

Announcing MVC3 Validation Groups

I’ve recently had to organise the validation for long/multipart forms.  Ordinarily, you’d divide the form up into smaller models and create a wizard style user journey.  But in this case the UI design called for the user to arbitrarily jump back and forth between pages in the wizard and other restrictions meant that we couldn’t persist each sub-page on change.  What we needed were validation groups!
As this work involved a bit of the old copy-paste-adapt from the standard MVC code, it’s a bit complicated to go into the fine details of how to replicate the functionality for yourself.  So I’ve setup a codeplex project with a reusable library all ready to go!  (Of course all the source code is up there as well!)

How to use

  1. Download the latest release.  (Get the latest Example Site as well to see a preconfigured MVC3 Website and example integration)
  2. Add a reference to ‘McjDevelopment.Mvc3ValidationGroups.dll’ to your MVC3 project
    image_thumb8
  3. Copy ‘jquery.validate.unobtrusive.validationgroups.js’ to your ‘scripts’ folder
    image_thumb[1]
  4. Decorate your view models with the [ValidatorGroup] attribute specifying the validation groups that that field belongs to (space delimited)
    image_thumb6
  5. Update your view to use ‘jquery.validate.unobtrusive.validationgroups.js’ immediately after ‘jquery.validate.unobtrusive.js’ (or ‘jquery.validate.unobtrusive.min.js’)
    image_thumb[3]
  6. Update your view to include where you want each groups Validation Summary to appear
    image_thumb5
  7. Amend your ‘Action’ buttons and links to include ‘data-val-valgroup-name’ attribute and specify which validation groups should be triggered by the user clicking on that element
    image_thumb12
  8. Amend you’re controller to check the appropriate validation groups when called.  (this implementation shows a common action being called with uses the clicked button name to select the validation group, an alternative is to us JS to dynamically alter the form’s action location)
    image_thumb15
  9. Test validation groups!
    image_thumb17