How to Build a Serverless, CMS-powered Angular Application

Category: angular, AngularJS, CMS, JavaScript, joelf

Angular has taken off in popularity and is in widespread use. Developed and maintained by Google engineers, Angular has found a place all across dynamic web applications and is an increasingly in-demand platform.

Angular offers the advantages of a large and enthusiastic community and outstanding MVC that doesn’t require developers to spend valuable time writing code to put multiple MVC components back together again. In short, Angular is a robust and comprehensive web application framework for front-end development that is unit-testing ready, making it the tool of choice for many developers.

If you’re using Angular, you may run into the need for content management capability — a blog being one example. Adding a CMS to an Angular app may seem daunting, especially if you’re trying to integrate it into a traditional CMS like WordPress, but there’s a new breed of API-based CMS that greatly simplifies things. ButterCMS is one example of a SaaS-based headless CMS that provides a hosted CMS dashboard and content API that you query from your Angular application. This means you don’t need to spin up any new infrastructure to add a CMS to your Angular app.

This tutorial will demonstrate how to build a CMS-powered Angular application that has marketing pages (customer case studies), a blog, and FAQ, all powered via an API. No servers needed!

Installation

First, you’ll get started by installing the Angular CLI.

npm install -g @angular/cli</td>

Set up a new Angular project using Angular CLI. By default, Angular CLI uses CSS styling, so adding the --style=scss flag tells Angular CLI to use SCSS instead:

ng new hello-buttercms-project --style=scss
cd hello-buttercms-project

Install Angular Material and Angular Material related package:

npm install --save @angular/material @angular/cdk
npm install --save @angular/animations

Install ButterCMS. Run this in your command line:

npm install buttercms --save

Butter can also be loaded using a CDN:

<script src="https://cdnjs.buttercms.com/buttercms-1.1.1.min.js"></script>

Quickly Get Started

Open the project in your code editor of choice. Under src/app create a directory called _services.

We create a file called butterCMS.service.js. This allows us to have your API Token in one place and not accidentally alter it.

import * as Butter from 'buttercms';

export const butterService = Butter('b60a008584313ed21803780bc9208557b3b49fbb');

You’ll import this file into any component we want to use ButterCMS.

For a Quickstart, go to src/app/hello-you/hello-you.component.ts and import butterService:

import {butterService} from '../_services';

Inside the HelloYouComponent create methods:

fetchPosts() {
  butter.post.list({
    page: 1,
    page_size: 10
  })
  .then((res) => {
    console.log('Content from ButterCMS')
    console.log(res)
  })
}

Now call this method when the component is loaded by adding it to the OnInit lifecycle hook:

ngOnInit() {
  this.fetchPosts();
}

This API request fetches your blog posts. Your account comes with one example post, which you’ll see in the response.

Next, create another method to retrieve the Homepage Headline Content Field:

fetchHeadline() {
  butter.content.retrieve(['homepage_headline'])
    .then((res) => {
      console.log('Headline from ButterCMS')
      console.log(res)
    })
}

Add this method to the OnInit lifecycle hook.

ngOnInit() {
  this.fetchPosts();
  this.fetchHeadline();
}

This API request fetches homepage headline content. You can set up your own custom content fields to manage any kind of content you need.

Add Marketing Pages

Setting up CMS-powered pages is a simple, three-step process:

Define the Page Type
Create a page
Integrate into your application

Define Page

First, create a Page Type to represent your Customer Case Study pages. Next, define the fields you want for your customer case studies. With your Page Type defined, you can now create the first case study page. Specify the name and URL of the page, and then populate the content of the page.

With your page defined, the ButterCMS API will return it in JSON format like this:

Continue reading %How to Build a Serverless, CMS-powered Angular Application%

blog