Installing Umbraco 13 with Visual Studio

Umbraco is an open-source content management system (CMS) platform written in C# built upon Microsoft’s .NET framework using ASP.NET MVC architectural model. Out-of-the-box, Umbraco is not a CMS per se; it’s an excellent platform for building a CMS. I’ve been using this platform for 10+ years, and I must say it has matured into a killer system for building websites and web-based applications. It has excellent architecture, super extensibility, and a fantastic development ecosystem (support, developers, plugins). Most importantly…the clients love the back-office for managing content.

This post will explain how to start and set up your Umbraco project in Visual Studio.

1) Install Umbraco Project Templates

Umbraco project templates are not part of the standard Visual Studio templates, so they must be installed. Open Visual Studio and the Terminal View->Terminal and run:

dotnet new install Umbraco.Templates

You will see the latest version of the templates installed by default (version 14.2.0 at the time of writing). Later, you can select a different Umbraco version as needed during project creation. Umbraco Version 14 is relatively new and includes a major overhaul of the back-office technology; therefore, many packages have not been updated and can not be used.

The following template packages will be installed:
   Umbraco.Templates

Success: Umbraco.Templates::14.2.0 installed the following templates:
Template Name        Short Name          Language  Tags
-------------------  ------------------  --------  --------------------------------------------------
Umbraco Package      umbracopackage      [C#]      Web/CMS/Umbraco/Package/Plugin
Umbraco Package RCL  umbracopackage-rcl  [C#]      Web/CMS/Umbraco/Package/Plugin/Razor Class Library
Umbraco Project      umbraco             [C#]      Web/CMS/Umbraco

2) Project Creation

Close/Re-open Visual Studio and select Umbraco Project (Web Application).

Version Selection

If you plan on using various packages, such as a Starter kit, specify an older version of Umbraco. I chose version 13.5.1 instead of the default template version 14.2.0.

3) Install the Clean Starter Kit

Paul Seal has developed the Clean Starter Kit for Umbraco. It provides a clean and simple website for blogging. It’s well put together and a good starting point, especially for developers new to Umbraco. It’s an excellent platform to study and learn from. In the terminal window:

dotnet add package clean

After the Clean Starter Kit installation, build the project and launch the website. I encountered an error in the master.cshtml file: The name ‘SmidgeHelper’ does not exist. There must of been a breaking change somewhere and a missing reference.

master.cshtml

@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage

@{
    Layout = null;

    SmidgeHelper.RequiresCss("~/clean-assets/css/styles.css");
    SmidgeHelper.RequiresJs("~/clean-assets/js/scripts.js");
}
...

The Smidge Fix

I discovered other references to SmidgeHelper in other project Razor views. I injected the Smidge service into all Razor views by adding one line to _Viewimports.cshtml:

@inject Smidge.SmidgeHelper SmidgeHelper

Feich Dot Net

Adventures In Software Engineering