Sanity.io Headless CMS with angular and scully.io

Today we are more and more using web apps for everything. There are lots of web shops, blogs or websites we are navigating to. It is more and more important that content is being published quickly.

In the past people were using heavy CMS systems like Wordpress or Typo3 which in my opinion are a bit outdated, even when they're trying to combine modern web technologies with their platforms.

Headless CMS

Nowadays we are developing web apps using modern technologies like React, Angular and others. When using these technologies, people are often using a headless CMS.

Simply said a headless CMS is a backend which is like a 'bucket' for all the content, images and so on. The frontend is decoupled from the backend and will fetch data throug an API.

For more details about headless CMS have a look here.

Sanity.io

While working on a webshop project for one of my customers, I found a headless CMS called sanity.io. It was pretty impressive how everything is manged there and they provide their own query language (GROQ) which makes fetching data and according references pretty easy.

They also provide a great management site (sanity studio) which can be used to manage all your data and data types you need.

For starting easily they also provide lots of different starter templates for different scenarios. So if you need a quick start this will pe perfect for you.

My personal background is tending more towards angular than to react but sanity mainly provides starter templates for react, next, etc.

So I decided to create my own sanity.io starter template for angular frontends.

Angular starter template

In fact I decided to create two different starter templates. One using tailwind.css and one without. Also I wanted to ensure that content is served as static sites, so I decided to use scully.io. This is the static site generator for angular. Also for easy deployment I included a configuration for netlify. This can also be changed but for the beginning it makes things more easy.

You can find the two templates using the following links:

tailwindcss template.

template without tailwind.

If you want to use one of the other templates you can find an overview of all the starter templates here.

Getting started

Once you navigate to one of the templates, you will see the following page:

You need to link your (free or paid) created sanity, github and netlify accounts. No worries, you can create and use all these accounts for free.

Once you click on 'create project' sanity will bootstrap everything for you. It will create a sanity project, a github repo as well as the two netlify sites for sanity studio and the web app itself.

Now you can clone the repo on your local machine and you're all set.

Tooling

This template is using the following technologies. Some of them were mentioned before.

Netlify

NgRx

NX DevTools

RxJs

Sanity

Scully

Tailwindcss

One thing I want to mention here. Since this template can be used for a webshop as well, I also added an NgRx store which is autmatically updating the sopping cart automatically when you want to add a product to it. The state itself is linked to the local storage so when you come back to the page (using metareducers), your card will contain the same items as when you left the page. It's pretty straight forward if you've already worked with it.

Structure

The project is split into two different applications (in the apps folder).

The studio app is for defining and configure your types, pages and products.

The web app is the angular client. There's also a folder web-e2e which you can use for creating cypress e2e tests for the angular app. Feel free to also add storybook or any. Since we're using NX DevTools this will be really simple.

Add a new sanity type (schema: like a product, page or blog)

If you want to create or edit types. You can navigate to the studio/schemas folder. Here you'll find documents and objects. Documents define (document-) types like pages, blogs, products or similar. In the objects folder you can find elements which you can use inside the different document types. You can simply create the types you need. For further information see Sanity.io Schema Types Documentation

For the newly created type you generate a new component in src/app/components/elements. I recommend using nx for that (se documentation below), since you're inside an nx workspace.

Your new component must extend the DynamicComponent interface and implement the data input property which is defined as a type that extends SanityType interface.

Now you need to introduce your newly generated dynamic component to the resolvers:

If your element is a document type, you need to introduce it to the content component:

Please also ensure that you have included the new document type in the fetchContent method in sanity.service.ts. Therefore you should have a look into Sanity GROQ queries.

That's all to get started using sanity and angular (or even react or others). By the way, this website here is also build with sanity.io and the angular tailwind starter template.

Feel free to try it out or, now.