Building a Kentico MVC Site in 24 Hours - Part 1/3

entico has always been one of the best platforms to develop on, largely because you could build and develop quickly and efficiently, which made clients happy.  As we all start transitioning from Portal Engine to MVC, that expectation of quick and easy site builds is often abandoned with a sigh.  We've heard estimates that developing in MVC takes anywhere from 1.5x to 2x as long as developing in Portal Engine, but in this series I'm going to restore your faith in rapid development by showing you all how I was able to build a site in roughly 24 hours, start to finish.

In this series, I'm going to be rebuilding my old Comic strip's website, Sonicandpals.com.  It suffered a database corruption many years ago and I haven't had a good excuse to rebuild it, until now.

Part 1: Before You Start [skip]

Since this article is on how to build a Kentico site in 24 hours, it assumes that your environment is ready to start going from hour 0.  Below is a list of things that typically only done one time no matter how many Kentico sites you build . If you have never built a Kentico site before, and are starting completely from scratch, here's the prerequisites to building a Kentico site.

1. SQL Management Studio is installed and running, or Azure SQL Database
   1. You can possibly get away with using the SQL server express LocalDB, but not recommended.
2. Visual Studio Pro or above is installed
   1. You can possibly get away with VSCode, but really, you'll want to have the power and ease of the full Visual Studio.  Visual Studio Community Edition is okay but lacks the ability to attach to process debugging for easier debugging.
3. IIS running
   1. While you can deploy to an Azure Web App and use local debugging for testing the site locally, this is going to add a lot of overhead time.  It's best when developing to have the actual sites local on your computer, where you can hit them without having to rebuild the solution each time to run it.
4. Kentico 12 Installed
   1. Make sure you have Kentico 12 installed on your computer before you get started.  When you first run it, you can just install the program files, I usually do this first and separately from creating a Kentico site.  If you don't have the Kentico 12 installer, you can get it by signing into http://client.kentico.com/ and clicking "Download" on the left.

Skipping Parts 2-4

It should be noted that as we go through building our site, the next 3 sections can be 'saved' once completed.  In parts 2-4 we will be setting up a base Kentico site and installing the tools.  Once this is done, it is entirely possible to export the site and save the MVC as is, and then use that as a starting point for future site builds.  You will save a lot of time in doing this and will further reduce the time it takes to spin up new sites. At my company, we have our full solution preserved so we can clone, change a couple things (like the connection string, macro hash, licenses and site configuration) and skip ahead to site-specific modification.  I will try to somehow create a share-able version of this for general use that will be a step beyond the current Kentico 12 Boilerplate, which should be available probably after the 2^nd article in this series is finished. 

lease note, if you do preserve the Kentico solutions, remember that the Admin/Lib folder and Database MUST NOT BE PUBLIC. You can store it in a private repository if you wish for quicker pull downs.

Part 2: Installing Site and Configuring your Environment (Hours 0-2) [skip]

The first hour or two is going to involve getting your Kentico site installed and your environment configured.  By the end of this section you should be able to hit your Admin site.

A: Setting up the Database

The first step is getting the database where Kentico will be installed into ready. You'll need the SQL Server URL, Database Name, Username and Password to install Kentico.  If you are making your site using an Azure SQL Database, once you create and configure it, these should be provided to you.  If you have a local SQL Server (I have one running on my machine), then you'll need to:

1. Create your Database
2. Create a Login to the SQL server (Username + Password)
3. Map that Login to your database (creating a User that is the db_owner role, and the db_owner schema)

B: Get your License Keys

Make sure you have your license keys ready to go before you start, because you can't create a Kentico site without it (except the temporary localhost license).  Ideally, you'll want to have all your environment licenses up front and ready to go.  These, at minimum, are your main Domain and your admin.thedomain.com licenses.  You may additionally want a dev.thedomain.com and admin.dev.thedomain.com (this one may require approval to be a free alias).  You can get licenses by signing up on http://client.kentico.com/, and either Registering your purchased License or getting Free Edition licenses on the left.

C: Create 2 IIS Sites

You can also go ahead and create 2 IIS sites, one for your admin and one for your actual MVC site.  This way Kentico can install it to the admin of the two IIS sites during installation, and then point your actual site to the proper folder later, but for now you can point both to a folder somewhere on your machine.

Tip: I've found that the default site installation location (inetpub) isn't often the best location, due to permissions that inherit from it.  I usually create sites that are placed in a web folder on the root of my drive (ex: C:\web\mysite).

D: Set your Host File

You'll want to make sure that when you hit the URLs for your site, they go to your local IIS.  Assuming you're using a windows machine, you'll need to open Notepad in Administrator mode, then open the C:\Windows\System32\Drivers\etc\host file, and enter in 127.0.0.1 (local), tab, and then the domains.

127.0.0.1              sonicandpals.com
127.0.0.1              www.sonicandpals.com
127.0.0.1              admin.sonicandpals.com

E: Install Kentico Site

Next, we'll actually install the site.  Run the Kentico Installer 12.0 and follow this configuration:

1. Custom Installation
2. MVC
3. [Check] Register to IIS
   1. Select your Admin IIS site (I adjusted the install path and removed the Kentico12 folder myself, so my install path was H:\Web\sonicandpals.
   2. Select a New Site and put your site code name (ex SAP for SonicAndPals, although I used MVC so this solution would eventually be shareable)
4. Install with Database
   1. This step I personally leave unchecked and don't install the database during installation, the reason is if the database operations fail, the entire installation fails.  If you leave unchecked, when you first load the site it will guide you through the database installation.  You can check it and enter your database information if you wish.  If you do decide to install the database, check Step G ahead as you go through it.
5. Optionally you can enable the health monitoring, task scheduler, etc.  I leave these unchecked, but you may want to check them.
6. Send anonymous records to Kentico, check or uncheck, you're call!
7. Install

F: Adjust IIS Kentico Sites

By default, Kentico will install itself as virtual directories on the site you selected.  So, we need to go and 'undo' that.

1. Under your Admin Site, delete the 2 virtual directories
   1. You can adjust your site structure if you wish, for Azure DevOps it's easier to instigate builds if the solutions are separated, whereas by default the Site and the CMS are siblings.   We create an Admin and MVC Folder and move Site and its solution file under the MVC folder, and the CMS / Lib and it's files under the Admin.
2. Point the Admin site to the CMS Folder
3. Point the MVC site to your Site's Folder (It should match the Site Name you entered during installation)
4. You can follow Kentico's App Pool Configuration, or do what I usually do and edit the permissions of each site and grant full control over the application pool (usually the user is IIS APPPOOL/TheSiteName, ex IIS APPPOOL/admin.sonicandpals.com and IIS APPPOOL/sonicandpals.com).

G: Run the Admin site and Setup Database

Next we need to go to the admin site and setup the database objects and get our admin site going.  Skip this if you set up the database already done in Step E-4

1. Navigate to the Admin URL (ex http://admin.sonicandpals.com/admin)
2. Since no Database was set up, enter in your Database information
3. Click Use Existing Database and enter in the database name, keep Create Kentico database objects checked
4. Once the objects are created, enter in your License Key for the admin site
5. For the Site Template, you can select MVC Blank Site, or optionally you can import an existing site. For now we will select MVC Blank Site
6. Hit next, and you should be brought to the login.  Login with the default Administrator (no password).
7. Once in, go to Licenses, and upload your normal Site license as well as any remaining licenses
8. Next, go to Sites, edit your site, change your Site Display Name, it's code name, and set the Presentation URL to your MVC Site URL (ex http://www.sonicandpals.com)
9. Add any other Domain Aliases as well.
10. Change your password if you wish (should be done before go live at minimum)

H: Hotfix if needed

Lastly, you should make sure your site is properly hotfixed.  If this site is purely for developing tools, keep it at 12.0.29 (SP1), however if this is going to be for a client, make sure to hotfix it right away to the highest version.  Some tools we will be using also have a minimum hotfix requirement.

1. Run Kentico Installation Manager 12 (KIM)
2. If your site isn't already registered, register it with the tool.  You may have to Unregister it and re-register it anyways because it often points to the wrong folder if you made modifications.
3. Select your site and hit Upgrade/Hotfix
4. Select the latest hotfix and apply (I would close out of your browser before you do this)
5. Once this is done, make sure to also open the MVC Site, and update the Kentico.aspnet.mvc NuGet package to match the hotfix version.
6. Rebuild  both Admin and MVC solutions (I usually do after each NuGet package install)
7. Run the admin site to finish installation.

Summary

Now we have a blank Kentico site on our local IIS site, the database is set up as well as our files and our licenses.  We are ready to start the next phase

Part 3: Installing Tools and Configuration the MVC Site (Hour 3-4)

You can technically chop down a tree with a butcher's knife, but that doesn't mean you should.  Choosing the right tools for the job is vital to getting things done in a timely manner.  Kentico's MVC site, even with the service pack, is missing many features, and many processes that we took for granted in the Portal Engine that now need to be handled ourselves.  In this section I'm going to outline my recommended tools list that you should highly consider installing into your site, and why.  We will also be setting up the basics of your Kentico MVC Site to make sure everything is enabled.  In the site I'm working on, I'll be installing all except the TinyMCE editor.

Last note is there are also some very useful tools on the Kentico Marketplace, and I encourage you to check them out!

A: Dynamic Routing

Dynamic routing is a system I built that generates URL slugs for each page based on it's URL Pattern in the page type. It then uses this URL Slug as the page's URL, and when the MVC receives it, it can find that matching page based on the page's request.  Once it finds the page, it checks the page's page type, and will route the request based on how you've configured that page type to be routed through the DynamicRouting attribute tags. It also makes the current page available to your route easily through the DynamicRouteHelper.GetPage<T>(). This saves you time by not requiring specific routes configured, additional logic to retrieve the page once that route has been determined, and even prevents the need for Controllers/Actions in simple cases.

Installation Instructions and NuGet Package links.

B: MVC Caching

Based on the Dancing Goat example, MVC Caching allows you to automatically cache your repositories using Kentico's Cache Dependency system.  This is done through hooking into any IRepository Get___ functions.  It also automatically wires up if Preview is enabled or not, and what the current culture is.

Installation Instructions and NuGet Package links.

C: Partial Widget Page

Partial Widget Page is a HTML Helper and a Widget that allows you to load a Page-builder enabled page into your view.  This is primarily useful for if you want to make WYSIWYG Mega Menus, Headers, and Footers, as you can have these elements as separate pages, and then pull them into your header/footer/menu using this tool.

Installation Instructions and NuGet Package links.

D: Relationships Extended

Most sites involve relating one thing to another.  Relationships Extended adds much needed UI improvement and form control tools to enable you to make sortable Page to page relationships, Node Categories (vs. Document Categories), and other improvements.  It also has MVC Extensions to easily get these relationships, which normally can be tricky through the API.  Highly recommended.

Installation Instructions and NuGet Package links.

E:  Bootstrap Layout Tool

Kentico Page Builder has Zones, which contain Sections, which contain Widgets.  Sections must be created and hard coded, but there are possibly many variations of sections you could want.  If you are using a bootstrap 4 site template, you owe it to yourself to install the Bootstrap Layout Tool which is an All in one section that removes the need to create a section for each scenario.

Note that there is a Page builder containers variant that you can install if you install the Page Builder Containers, that's listed below as the optional install K.

Installation Instructions and NuGet Package links.

F: Kentico Rich Text Editor Widget

Kentico has provided a Froala-based WYSIWYG editor.  While there are still things left to be improved (they are working on them, and may be finished by the time you are reading this article), this is the WYSIWYG editor you want to use going forward, since it integrates with Kentico's Pages and Media Library.  Requires min Kentico 12.0.43 or higher.

Installation Instructions and NuGet Package links

I've also created a Shared Toolbar configuration script that can found here, with instructions on how to apply here.  Very useful since it's hard to fit the toolbar in small spaces.

G: MVC Components

This tool is not my own, but I do really like it.  It was built so you could store one "Page type" into another page type through Serialization and easily retrieve it (strongly typed) through the helper methods.  This works much better than inherited classes.  I use it for things such as SEO Meta Data, as it's easy to retrieve from the current page and pass it to a partial view to render things like your OG tags, Schema.org JSON+LD scripts, etc.  Thanks Chris Meeg for creating it!  Requires min Kentico 12.0.39 or higher.

Installation Instructions and NuGet Package links.

H: [Optional] Kentico Authorization

This tool goes beyond the default Authorization based on Role or Username and allows you to restrict Controller Actions based on Role, User, Module Permission, and Page ACL.  Use the Dynamic Routing variation of this if you do use it.

Installation Instructions and NuGet Package links.

Note that a Dynamic Routing instance is available that handles the Page ACL without having to define things, so I would probably use the Dynamic Routing Variant found here.

I: [Optional] Automatic Generic User Roles

Kentico MVC took away the default Not Authenticated, Authenticated, and Everyone roles, this tool simply restores those roles and automatically handles them so you can leverage them in Authorizing areas such as user account management sections or Login/Logout sections.

Installation Instructions and NuGet Package links

J: [Optional] TinyMCE WYSIWYG editor

As stated, Kentico's WYSIWYG editor is not finished yet. Currently they do not allow you to have a rich text editor in the Widget configuration dialogues.  You may need this as a temporary thing until that functionality is finished.  I would only use this for the Widget configuration dialogue though, as it does not and will not have integration points into Kentico's Pages / Media library.

Installation Instructions and NuGet Package links.

As noted in the introduction to this section, I will not be installing this on my site as Kentico is working on theirs.

K: [Optional] Page Builder Containers

This is an MVC Variant of Webpart Containers, and just like it's Portal engine sibling, it allows you to have CMS-managed Containers with optional Title, CSS Class, and Custom HTML, as well as allows for Content before and Content After on your Page Builder Items.  Only sad part is your Page Builder Widget needs to implement it, if it is someone else's widget and does not, no way to do it.

Installation Instructions and NuGet Package links.

L: [Optional] Web Compile

Web Compile is a nifty library that allows you to leverage SASS, LESS, and other CSS and Javascript systems, automatically rendering the css or javascript on save, including making map files for when you are viewing the css so you know where in the SASS file to make your edits.

To install

1. Install the Visual Studio extension Web Compiler (One time)
2. Install the Nuget package BuildWebCompiler on your MVC Site
3. Configure the compilerconfig.json, example below:

 
You can take any supported file type and right click on it and you should have a web compiler context menu to automatically add to the compilerconfig.json

Final Configurations

A couple last items that you should perform to get your site ready.

OWIN Setup

If you are going to have user logins, MVC recommends you use OWIN.  Please add a Startup.Auth class in your App_Start folder as outlined in Kentico's Documentation. I removed the namespace in the sample file completely if it helps any.

Helpers

I have created a couple helper classes that may be of use to you, they will be used in this series so I recommend you add them as well.  They can be found in in this zip file.  Add them to your MVC site.

1. EnvironmentHelper: Contains Static references to various environmental things, such as the Preview / Page Builder status, Preview Culture, getting the Authenticated User, and a GetUrl which gets the base URL of a request.
2. HtmlHelperExtensions: Contains @Html.Methods that can be used in your View, including Image with Accessibility tags, Culture links, attachments, localization strings, etc.
3. UrlHelperExtensions: Contains @Url.Methods, currently only has a RenderPath that can handle merges of Query Strings
4. UserWidgetProvider: Kentico allows you to specify which widgets are allowed in a zone, this provider allows you to dynamically generate that widget list based on the current user's privilege and/or role, whatever you decide.  This mimics the Widget Permissions of Portal Engine.
5. NonSortedBundle: You can use this in your CSS/Javascript bundles in MVC to specify that the items in the bundle should remain in the order you provide, useful for CSS or Javascript that must be rendered out in the order you place due to dependencies, default bundles sort alphabetically.

Conclusion

I know that was a lot to take in, and sorry for the length of this article.  At this point we have a base blank site, with all our tools and systems installed and enabled.  This should only take about the 4 hours; I know because I'm doing the steps as I write this.  The next article will go through building in the Base Content pieces, getting the master page and menu going, and some simple widget pages going.  If you're desperate to get some of that going right now, send me a message as I have the pieces and code, but won't be writing about it till next month.  Thanks for bearing with the large article, and happy coding!