Episerver 10 Alloy MVC

Tom / Tom
April 17, 2017 0 Comments

The Episerve Alloy MVC project has been around for the last two to three years.

The project was created for the Episerver 7.0 release to showcase the new Administrator’s user interface (built on top of Dojo) and the latest platform features.  This project was essential when I first started learning and developing my first Episerver website three years ago.  Alloy MVC not only covers a nice set of coding patterns and project file structuring, but it also shows that the Episerver framework can be extended and enhanced to accommodate a wide variety of Web Content Management needs.  Having the option to access an example project to manipulate and extend, allows the developer to dive right into code and begin debugging in order to better understand how the framework works.  I am a firm believer that to truly understand how a new project/framework functions, one needs to stumble through the process and try to make changes that can and will break things.  

When I create a base Episerver project, my preference is to begin with an Alloy MVC project.  Another highlight of the Alloy MVC project is that it can be installed multiple times.  I find this is very helpful when I get stuck or encounter odd behaviors editing/extending an Alloy project. All that is required is to bring up a clean version of the Alloy MVC project, and try to recreate the issue there.  Also, keep in mind that if you ever need to contact Episerver support for an issue, they will ask that you determine whether or not the issue occurs on a vanilla Alloy MVC project. 

Getting started with Alloy MVC 10 is an easier task than it was in the Episerver Deployment Center days.  When Episerver 7 released, a separate Windows application was needed to install the code base, plus create the database schema.  Today, all that is required for set up, is to fire up Visual Studio 2015 or 2017 and bring up the Extensions and Updates window to perform an online search for the Episerver extension.

After the extension is installed, you can hop over to the SQL Server Management Studio (2014 or 2016) and create a new Database for the Alloy project.  Depending on your workstation credentials you can either create a SQL Server user or use your Windows Authentication credentials to access the new database.  If you choose the SQL Server user route, make sure to give the user DBO access.  

Now that the Episerver extension and database are ready to go, all you need to do is create a new project from Visual Studio.

Now, all the code and project images are installed and ready to run.  You can now begin reviewing the code and structure to get an understanding of how an Episerver project behaves.  The code quality of the Alloy MVC project is (in my opinion) top notch.  The code does a great job of being terse and concise, but not at the expense of understanding the application flow.  I was happy to see the latest C# syntax being used like Anonymous Functions (  This is one of the many reasons I enjoy the Episerver WCM products; they continually push forward and challenge how they can better a developer’s experience.  I can’t wait to see what Episerver has in store for Microsoft’s latest .NET Core technologies.

Before you build and run the project, edit the Web.config file’s connection string entry to point to your new database.  Here is what I have in my AlloyMVC Project.


    <add name="EPiServerDB"
         connectionString="Data Source=.\SQL2016EXPRESS;Initial Catalog=AlloyMVC;Connection Timeout=60;Integrated Security=True;MultipleActiveResultSets=True"
         providerName="System.Data.SqlClient" />

Now run the project , either with debugging (F5) or without (ctrl + F5).  I prefer to run without debugging because it can take a little while for Episerver to fire up.  Your first screen will be a YSOD (yellow screen of death), but don’t get discouraged.  This just means we need to run the initialize Episerver database command in the Visual Studio Package Manager Console.  First, bring up the Nuget Package Manger Console, type ‘init’, and hit the tab key.  Next, arrow down and select “Initialize-EPiDatabase” and hit enter.  Last, refresh the browser window, and you should be redirected to a Register page.

One thing to note here, is that Episerver is up and running without any configuration to IIS.  Out of the gate, the Alloy project is using IIS Express.  Usually when working on a project, I try to use IIS Express as much as possible.  One of the pros for using IIS Express with Episerver is that you do not need a developer’s license to run the site locally.  You can quickly start building and debugging and worry about licensing later.  Like I mentioned earlier, Episerver does a great job of keeping developers happy by streamlining the coding/building process.

The Register page is a temporary page for creating a site administrator account.  I am so glad that Episerver added this option to help developers create an administrator account quickly, without having to modify the web.config file to enable mixed mode authentication (Windows and ASP.NET membership).  Configuring mixed mode authentication was always a pain point for me and many other developers when it comes to standing up a site quickly.  Now, go ahead and create an administrator account.  If the account was created successfully, you should be redirected to the home page of the Alloy site.  You should also notice that if you try to reload the Register page, you will get a 404 error message.  Episerver added a nice little piece of code for dynamically handling the Register page route on startup.  It’s called the AdministratorRegistrationPage.cs located in the Business directory.    

If you would prefer not have this logic execute, then remove or comment out the following line of code from your Startup.cs file.

// Remove the following line of code to disable creating an Admin account for the AdminUI
app.UseAdministratorRegistrationPage(() => HttpContext.Current.Request.IsLocal);

You now have a working version of the Episerver 10 Alloy MVC project.  You can access the administrator screens by either visiting the /episerver page or by clicking on the Epi icon in the upper right-hand corner.  

I hope you enjoyed the Alloy MVC Starter blog post.  More posts to come that discuss other Episerver tips and tricks.

Episerver 10 Alloy MVC Starter


Add a Comment


Please confirm you are human by typing the text you see in this image: