Building a .NET Core website with Umbraco Headless - Tutorial

Two weeks back, I 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 https://tee-phrases.thirdtrio.com.au from the ground up following the tutorial below.

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

Oh! 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



We meet once in every two months and our next Melbourne Umbraco Meetup will be on Tuesday, 2nd of October 2018 at Luminary.
You can sign up for the meetup here.

Want to build a .NET Core website with Umbraco Headless?



Do you want to learn how to build https://tee-phrases.thirdtrio.com.au/ using .NET Core MVC with Umbraco Headless?

On the 7th of August 2018 (Tuesday) at 6 PM, I will be presenting (tutorial style) at the Melbourne Umbracian Meetup on how to do that.

This meetup will be held at Luminary, Level 1, 195 Little Collins Street, Melbourne, Australia and will be live streamed on https://www.youtube.com/watch?v=8__gqF8AnhA

Please confirm your attendance at  https://www.meetup.com/Australian-Umbraco-Meetups/events/249881087/ (even if you are joining in remotely).

Prerequisites


Make sure you have the following prerequisites if you intend on joining us and making the best use of everyone's time.

  • Sign up for Umbraco Headless & create a headless project
    You can find instructions at umbraco.com/headless. Keep your CMS empty. We will populate content as we do our Tutorial.
  • Install .NET Core 2.1 on your machine
    You can install it from https://www.microsoft.com/net/download/dotnet-core/2.1
    Still not sure? You can check it using the instructions here.
  • Have you installed the latest version of Visual Studio 2017 or Visual Studio Code?
    I've got VS2017 (v15.7.5) and VS Code (v1.25.1) running on my machine. I will be mainly using VS2017 for this tutorial though.
  • Have you installed a Git Client you are comfortable with?
    You will need to pull changes and switch branches. I will be using Git bash, but you are free to use whatever Git client you favour.
  • Have you forked the tutorial/demo code from the Github repo?https://github.com/emmanueltissera/umbraco-headless-demo

Your First Task


You need to complete the following task before 6 PM on the 7th of August 2018.
The first Screen you should see



See you at the meetup


That's it! You are ready! Sign up for the meetup and I will see you there.
If you have any queries before that hit me up on @dAmazingNut

Printing an UCommerce Invoice from Umbraco Back-office

Ever printed an UCommerce Invoice off the Umbraco (v 7.5.10) back-office?
Well if you have, this is what you get:

A jumbled up version of an invoice
How do you go about getting a property formatted version with minimal changes

The Pretty-print version