Headless on .NET Core - Umbraco Codegarden 2021

  • Featuring ProWorks
  • 29:37
  • Umbraco HQ
  • Umbraco Codegarden 2021
  • Watch on YouTube

Headless on .NET Core - Umbraco Codegarden 2021 demonstrates a proof of concept for running Umbraco 9 headlessly with GraphQL and a Gridsome front end. It covers editor workflow, automatic rebuilds via notifications and GitHub Actions, and client-side search using Examine.

Jason starts with why headless Umbraco 9 suits some organizations: content has to reach several channels, websites and platforms; marketing wants to launch campaigns and new sites quickly; and IT needs secure hosting and painless deployments. For clients whose hosting constraints rule out Umbraco Cloud or Heartcore, headless can serve both sides.

The proof of concept was built on Umbraco 9 beta 3 with the community GraphQL package, Examine beta 1, GitHub Actions, Azure Linux hosting and Gridsome. Benjamin shows how publishing in Umbraco fires a notification that triggers a GitHub Actions build, how Gridsome maps Umbraco content and templates to static pages through GraphQL, and how the static site queries Examine search results from the browser, also through GraphQL.

Key takeaways

  • Organizations with hosting constraints can use Umbraco 9 headlessly as an alternative when Umbraco Cloud or Heartcore are not a fit.
  • The proof of concept uses Umbraco 9 beta 3, the community GraphQL package, Examine beta 1, GitHub Actions, Azure Linux hosting, and Gridsome for static site generation.
  • Gridsome acts as a data layer that pulls content from Umbraco with GraphQL, then builds pages based on the URLs and templates defined in the CMS.
  • Notification handlers in Umbraco can be configured to send secure HTTP requests to GitHub Actions, allowing rebuild credentials and endpoints to be managed in Azure settings or Key Vault.
  • GraphQL variables can be used for search queries so the front end can pass user input safely without constructing raw query strings directly.

Key moments

  1. 0:00 Introduction and headless goals
  2. 1:22 Client constraints and proof of concept goals
  3. 2:34 Technology stack overview
  4. 4:53 Publishing workflow demo
  5. 8:08 Gridsome, GraphQL, and templating walkthrough
  6. 14:58 Content change notifications and GitHub Actions
  7. 17:56 Examine search with GraphQL
  8. 27:31 Closing recommendations and contact info

Planning an Umbraco project?

ProWorks is an Umbraco Platinum Partner. We build, upgrade and improve Umbraco sites, and help teams put AI to work in their CMS. Tell us what you're working on.

Talk to ProWorks

Enjoyed this video? Give it a High 5

#H5YR ("High five, you rock!") is how the Umbraco community says thanks. Sign in with GitHub or Google to send one.

More videos

Featuring ProWorks 41:34

Jen Wolke: Into the Umbazon

Jen Wolke tours useful Umbraco Marketplace packages, covering redirects, SEO, accessibility, responsive images, sustainability, CSP management, block previews, and content locking. She shows what each package does in the backoffice and when it helps.

Featuring ProWorks 35:58

Jen Wolke, Cooking Up Quality with Chef Claude

Jen Wolke explains how she uses Claude desktop tools like projects, instructions, files, and skills to speed up QA tasks. She shows examples including form checks, accessibility audits, regression testing, performance reviews, and retesting, while stressing human oversight.

back to top