How to integrate ButterCMS into Angular 2+ App

ButterCMS may be useful when you want to add dynamic content to your website/web application but don’t want to develop another application.

Photo by NeONBRAND on Unsplash

Set up the app

For the application we will use @angular/cli, @angular/material, @angular/flex-layout and buttercms. So to install everything and to setup the app run the following comannds:

npm install -g @angular/cli
ng new butterCMSBlog --routing=true --style=scss
cd butterCMSBlog
npm install @angular/flex-layout
ng add @angular/material
npm i -S buttercms
ng serve -o

App is now available at http://localhost:4200.

The next step is to create a module with routing for the blog. Run command

ng g module blog --module app --route blog --routing

Let’s update main page to display a link to blog page by making following changes:

Set up for main page

Display posts with pagination

To get content from ButterCMS we will create a simple service with only two methods:

• getPosts(page, pageSize) — get a list of all posts and meta data about how many pages exist and number of previous and next pages
• getPostDetails(slug) — get post content and meta data by post slug

Run command to create the service:

ng g service blog/core/butterCMS

And create service methods. Don’t forget to change ‘your_api_token’ to your actual butterCMS token.

Service set up to receive posts data from butterCMS

When service is done we should update Blog component. The component should display paginated list of posts fetched from the service. When page is changed we want to call service method again but with selected page.

Import MatCardModule, MatPaginatorModule, MatProgressSpinnerModule and FlexLayoutModule in blog.module.ts and update blog component.

Now blog page contains all first 10 posts from butterCMS with paginator.

Display post content

In Blog component each post title should be a link to post itself. But it is not set up yet. To do that we need the following:

1. to create component for blog content
2. create route /blog/{slug}, where slug is post’s slug
3. receive post data from butterCMS and bind it to the component when route is activated

To bind post data with component we will create route resolver which will get post slug from active route, call service method getPostDetails and received response data will be used for route data. In the post component we will subscribe to route.data observable and use it to display post content.

Run these commands to create component and route resolver:

ng g component blog/post
ng g service blog/core/slug-resolver

Update SlugResolverService to produce needed functionality:

To make route for post we need to add a new route to blog-routing.module.ts file:

{
    path: ':slug',
    component: PostComponent,
    resolve: {
        post: SlugResolverService
    }
}

In post component we want to subscribe to activated route data which contains post content and data about previous and next posts. All of these information we want to display.

Note: it would be better to divide this big component into several small ones.

Now we can navigate to post content by clicking post title in /blog page. Each post page has a link to previous and next posts.

To make the app better we could change website title to match active post title.

How it will look like at the end

Demo page is available at https://stackblitz.com/github/orlyohreally/butterCMSBlog

Full repo could be found onGitHub.

orlyohreally/butterCMSBlog

Summery

We could add dynamic content to Angular application without developing full blog functionality by just integrating ButterCMS into it. The process might be not that simple but still it will save a lot of time. The Butter CMS provides more functionality and there are lots of things we could do to make the blog better.