As I am sure many of you who work with a CMS will know, “headless” has been a phrase used increasingly more often year by year.
In my role at Equator, I find client’s projects are increasingly requiring the CMS to provide data not just to the website but apps, advertising screens, Alexa skills, etc.
So many of us have used Umbraco “headless-ly” (yes, I am sure it’s a word) using our own implementations, but now it’s time to see the new headless solution from Umbraco HQ!
Hello Heartcore!
You may remember we got some Umbraco Headless demos at festivals and Codegarden in the past and some of us trialled the Beta… but a lot has happened since then.
We are now in Umbraco version 8, and Umbraco Headless is now called Umbraco Heartcore.
The last few weeks I have been using the Heartcore preview and hacking some demos, so here are my first impressions.
When first logging into the CMS, it just looks like the Umbraco we know and love. You can define your doctypes and content as always.
I guess you won’t really notice the difference, til you want to actually see that content somewhere. This is where we need to implement Heartcore in a project.
Getting to know heartcore
First, I read the Umbraco Docs to find out what functions were available via Heartcore.
The first thing I noticed was that there was a lot more APIs available than the old Umbraco Headless application. We now have a Content Management API to let us perform CRUD actions on the CMS data, as well as Content Delivery to let us retrieve content.
Then I decided to try calling the APIs myself using the API Browser, not totally necessary but I am a bit of an API geek and I wanted to know how it worked!
See screenshot below - as you can see by replacing the “umb-project-alias” with your app alias the API would return your content.
I found this feature in the backoffice really useful to see the data returned by each API call, which lets me understand when implementing using the client libraries (we’ll get to that later).
Securing Heartcore
As you can see above, content APIs are public by default and no API key required. For some applications, this might be fine. The content will be on a website anyway, but in many instances, we will want to restrict this.
Heartcore allows us to do this within the CMS.
In the settings section we have a new item available in the menu: “Headless”, here we can toggle “Content Devilery API” to be protected.
Note: the content management API is always restricted and needs an API key.
You can get your API key in the user's section, where you can set up keys and revoke access at any point. You can get info on this from the great article on 24 days by Morten & Rasmus.
One feature I think would be great in the future would be restricting the API key to a domain to allow us to have it on a client side app without letting others find and use our api key (like Google Maps does).
Using our content
So we have our content and a well-restricted API, but we need to actually use that content somewhere! This is where we can provide the data to various systems that need the content.
You can implement calls to the REST API endpoints described above or use one of the client libraries provided.
So far there are:
.Net client available on NuGet
Node.js client available on npm
This is quite cool as it lets you integrate into frameworks that we can’t (yet) with regular Umbraco like .Net core. It will also let more developers get a chance to use Umbraco as it’s not restricted to .Net developers.
Someone could integrate with Heartcore purely in Javascript and not need to know any C#. To get to know the libraries and their functionality better, I decided to build a prototype in each library.
Alexa Skill
For the first of these examples, an Alexa Skill.
I have built skills with custom content APIs a few times over the last few years (including with the headless beta), so I thought I would use the Node.js library to build an Alexa skill.
Since it’s nearly Christmas, I decided to build an advent calendar skill where users can “open a door” and get a message for that day in December. These messages are, of course, managed in Umbraco Heartcore.
See video demo of the skill in action (voice demos with a Scottish accent are always fun! 😂).
This was recorded on December 8th so the message for this day was given by Alexa.
We can also control the “cards” content shown in Alexa app and on devices that have a screen as well as voice interface, see screenshot here:
The festive image shown is also managed in Heartcore. To allow Alexa to show the image, there is some configuration required, on Heartcore this just worked!!
I am not a Javascript developer in my day to day coding but based on understanding how skills work and using the Heartcore docs, I was able to set this up quickly.
Blazor App
For .Net core developers, the Umbraco team has provided sample console and MVC solution built in core in the client libraries repo. I decided to try and build in Blazor, another framework for building webapps in .Net core.
Recently at DUUG Fest, I gave a talk on integrating Blazor with Umbraco where I had built my own custom WebAPI endpoints for content, so I was interested in seeing the alternatives.
As with many single page app frameworks, I can see Blazor apps being used to call APIs to give interactive experiences to users, so Heartcore seemed like a good fit for providing this data.
To prototype this, I set up the Blazor sample site and added services to get the code from Content delivery API and present that on the frontend of the website. This is a very basic example but it shows how to integrate Heartcore to Blazor.
I have added my example to .Net client library samples
What was really cool for me was how quickly I was able to implement a demo in each of these use cases.
I already had experience in both Blazor and Alexa skills, so I was able to integrate Heartcore relatively easily, which I suppose is the beauty of not being tied to a framework or worrying about building the APIs. You can get straight into using the tech stack you are used to.
I ❤ Heartcore?
So far I think Heartcore is pretty cool! As with everything, I will need to use it on a project to see it’s real life pros and cons, but I think it has real potential.
For me, it’s power will be allowing Umbraco to reach users and developers outside the .Net ecosystem.
I am super excited to see all the cool stuff people build with Heartcore.
We already see so many innovative things in the community built with Umbraco, so this will allow that to happen in an even friendlier way, by including even more for developers and clients!
Ready to try Umbraco Heartcore?
A big thank you and H5YR to Carole for sharing her Heartcore experiences with us!
If you feel inspired to try out Heartcore yourself, we have the perfect solution for you.
With our 14-day free trial, you get to test things out for yourself. Simply click the button and create your user, then we'll spin up an Umbraco Heartcore project for you in 5 minutes.
