EPiServer 7 CMS Development (2014)
II. SITE DEVELOPMENT
Chapter 5. Tools
Before we dig into hands-on EPiServer development in the next chapter, we’ll take a quick look at a few tools that can be highly useful during EPiServer development in this chapter.
Visual Studio integration
EPiServer offers a plug-in for Visual Studio that adds some useful tools and templates that aid in EPiServer development. The plug-in, the Visual Studio integration, isn’t required in order to develop EPiServer sites and some developers choose not to use it. However, there is no reason not to try it out, and throughout the rest of this book it will be assumed that it is installed.
Installation
The Visual Studio integration comes in two versions, one for Visual Studio Express and one for the commercial versions of Visual Studio. They can be downloaded from the following links:
· Visual Studio Express version: http://world.episerver.com/Download/Items/EPiServer-CMS/EPiServer-7---CMS/EPiServer-CMS-Visual-Studio-Extension---For-Visual-Studio-Express-for-Web/
· Other Visual Studio versions: http://world.episerver.com/Download/Items/EPiServer-CMS/EPiServer-7---CMS/EPiServer-7---CMS/
Once downloaded double click the downloaded file to install the integration. Optionally, for non-Express versions of Visual Studio it is also possible to install the integration directly from Visual Studio by downloading it from Microsoft’s Visual Studio Gallery.
In order to do that select Tools → Extensions and Updates in Visual Studio. Then select the Online tab on the left side of the dialog that opens up. Then search for “episever” and hit the Download button for “EPiServer CMS Visual Studio Extension”. Finally, restart Visual Studio.
The Extensions and Updates menu alternative in Visual Studio.
Search result containing EPiServer’s Visual Studio integration.
Features
Installing the Visual Studio integration extends the IDE with a number of new templates. Two of them are for projects and show up when selecting File → New Project in Visual Studio.
Other templates are for individual files and show up when selecting Project → Add New Item (or right clicking on the project and selecting to add a new item, or pressing CTRL+Shift+A) given a project is open in Visual Studio.
We’ll look at and discuss the templates in more detail in later chapters.
NuGet
NuGet is a package manager for .NET and can be used to add referenced libraries, code and configuration changes to a Visual Studio project. Using NuGet offers a convenient way to add third party libraries to your codebase and has become very popular amongst .NET developers.
While not required to develop an EPiServer site it is a very convenient tool to use in order to bring in (often but not necessarily free) components to a website project. It’s also highly recommended for EPiServer projects as EPiServer uses NuGet to distribute patches.
In this book we’ll use NuGet to add third party components that we need and it’s therefore highly recommended that you install it, if you don’t already have it.
Installation
As with EPiServer’s Visual Studio integration NuGet can be installed using Extensions and Updates in Visual Studio. Alternatively it can be downloaded from the Visual Studio Extensions Gallery online, to which links can be found at http://docs.nuget.org/docs/start-here/installing-nuget.
Installing NuGet using Tools → Extensions and Updates.
Using NuGet
Once installed NuGet is easy to use to install packages. Either through the Package Manager Console or using it’s graphical interface. To use the graphical interface right click on a project in Visual Studio’s Solution Explorer and choose the “Manage NuGet Packages” menu alternative.
The Manage NuGet Packages menu alternative in the right click menu in Visual Studio’s Solution Explorer.
Doing so opens up NuGet’s UI through which it’s possible to install, update and un-install packages. In order to install a certain package search for it in the top right search box and click its Download button.
Adding jQuery to a project using NuGet’s UI.
If you prefer you can use NuGet’s console instead of the UI. To do that first open it up by selecting View → Other Windows → Package Manager Console. Doing so opens up a window with a console whose prompt starts with “PM>”. Using the console you can perform operations using commands. For instance, to install the jQuery package type in Install-Package jQuery.
EPiServer’s NuGet feed
Using NuGet we can list and download packages. Those packages reside in a feed. By default NuGet is configured with a single feed named “NuGet official package source”. This is the main, public feed provided by Microsoft.
There are however other public feeds available. One such feed is provided by EPiServer. EPiServer uses their own feed to distribute patches to their products and third party developers can upload their own packages related to EPiServer to the feed. For an EPiServer developer this means that, while the standard feed is great for retrieving general packages, it’s a good idea to also configure and check out EPiServer’s feed.
The feeds website, through which it’s possible to browse and upload packages, resides at http://nuget.episerver.com. The actual feed has the URL http://nuget.episerver.com/feed/packages.svc/.
To configure NuGet to use it select Tools → Library Package Manager → Package Manager Settings. Then select Package Sources in the left tree. That opens up a settings UI in which configured feeds are listed. Add a new feed by clicking on the plus button at the top, then type in a name for the feed (such as “EPiServer”) and the feeds URL.
Adding EPiServer’s feed to NuGet’s configuration.
Other useful tools
Apart from Visual Studio, EPiServer’s integration for it and NuGet there are many other tools that can be very useful for an EPiServer developer. Of course, what tools are “must haves” is subjective and differs amongst developers. One breed of tools that probably all developers agree is a must have is in-browser web debugging tools. There are such tools built into the major versions of all the main web browsers. However the most popular one is Firebug, a free extension to Firefox.
Firebug can be downloaded from http://getfirebug.com or by selecting Tools → Add-ons inside Firefox and searching for “Firebug”. Once installed Firebug can be opened by selecting Tools → Web Developer → Firebug → Open Firebug, or by clicking a button with a bug icon in the top right part of Firefox.
Using Firebug it’s easy to inspect individual elements on a page to see what markup corresponds to a graphical element and vice versa. Firebug can also be used to debug JavaScript, view all networks request made during loading of a page, and more.
Inspecting one of the links in the Alloy site’s top menu using Firebug.
Another useful tool in the EPiServer developers toolbox is a viewer for log4net, the logging framework that EPiServer uses. There are many such tools and there doesn’t seem to be a clear consensus amongst developers about which one is best. It’s a matter of taste. You won’t be needing such a tool to follow this book but it’s a good idea to remember that such tools exist as they can be very convenient. If you feel like trying one out straight away you can Google/Bing/DuckDuckGo “log4net viewer”. Some of the results will probably mention logview4net or GamutLog. Alternatively you can check out tools for monitoring (not logging specific) text files, such as mTail.
Yet another type of tool is a decompiler, something that I personally find invaluable. Using a decompiler it’s possible to view, and navigate through, the code in compiled assemblies (.dll files). While the code isn’t the actual source code from which the assembly was compiled a decompiler does it’s best to mimic that. Of course, using a decompiler may not be one hundred percent legal depending on what assembly you are using it with.
There are several decompilers, both commercial and free. I personally favor .NET Reflector which costs money. Free ones include JetBrains dotPeek, ILSpy and Telerik JustDecompile.
Finally, while in no way required for EPiServer development I’d recommend anyone who hasn’t tried a developer productivity extension for Visual Studio like JetBrains ReSharper or DevExpress CodeRush to try one out. I’m a ReSharper user and I couldn’t live without it.