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

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

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

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.