A tutorial on building a .NET Core website with Umbraco Headless

Want to build a .NET Core MVC website using Umbraco Headless? Follow this tutorial from Luminary Technical Lead Emmanuel Tissera...

Emmanuel Tissera

12 October 2018

2 minute read

I recently had the privilege of presenting something special at the Melbourne Umbraco Meetup. We built a .NET Core MVC website using Umbraco Headless. Yes, we know it's BETA and still in preview. But who could resist?

I've been working with production builds of Headless CMS driven websites for some time now and thought it's time I gave Umbraco Headless a go. Want to try it out on your own too? We've got the slide deck and the live video as it happened for you to follow along.

Prerequisites and live site

We had 10 participants for this Meetup and we built a sample t-shirt website from the ground up following the tutorial below

Third Trio website screenshot

You can actually purchase any of these designs and have them delivered anywhere in Australia.

Most of the participants did turn up with the prerequisites mentioned here in place. So with bellies filled with pizza, carrot sticks and beer/coke, these Umbracians enjoyed coding away for 2.5+ hours.

The verdict

The following were the plus points when using Umbraco Headless:

  • The Familiar and Friendly Umbraco Back Office
  • Ability to use ASP.NET Core
  • Quite a comprehensive Library which had routing out of the box
  • Inbuilt caching
  • A NuGet feed to get all those pre-release versions

The points which could be improved:

  • Improved and up-to-date documentation
  • Ability to gracefully handle content not found errors
  • The ability to port content across headless instances

Cheat sheet with links and resources

You will need the links and resources mentioned in http://bit.ly/umbraco-headless-demo document to follow this tutorial. Make sure you have got the prerequisites before you start off too – https://blog.emmti.com/2018/08/build-umbraco-headless-net-core-website.html

Tutorial slides

The tutorial slides for building the Umbraco Headless website is given below.

You can download the slides here.

Live Meetup video

The live recording from the Umbraco Meetup on the 7th of August is given below. It has not been edited and is the raw version. You might need to skip through some of the video feed as we make sure everyone keeps up.

Nuget package updates and final source code

Note that the version of the Umbraco Headless Library (0.9.4-ci-20180726-02) I used was out of date pretty soon. So I had to include that as a local package on this repository for it to work.

I will be working on incorporating the version using Refit as soon as I get some time. Pull requests are welcome if you get to that before me.

The completed version of the source can be found on this branch.
https://github.com/emmanueltissera/umbraco-headless-demo/tree/tutorial/step-10-complete

What's next?

This implementation is not production ready and we need a few more tweaks before we could go to our clients with Umbraco Headless. So my idea is to speak to the gurus at Umbraco HQ and maybe submit some issues to the issue tracker to get the ball rolling.

Next Melbourne Umbraco Meetup

Emm at the August Umbraco Meetup

The Melbourne Umbraco Meetup meets every two months at Luminary. Find details of the next Melbourne Umbraco Meetup

This blog post was originally published on Emmanuel's personal blog and has been reproduced here with his permission.

Want to work with an Umbraco Platinum Partner?

Contact Us

Keep Reading

Want more? Here are some other blog posts you might be interested in.