Sådan oprettes en serverløs CMS-drevet Angular-app

Denne vejledning er en opfølgning på min tidligere vejledning om, hvordan man opbygger en serverløs CMS-drevet Vue.js-applikation, og viser dig, hvordan du bygger en serverløs CMS-drevet Angular-app.

Vinkelformet, udviklet og vedligeholdt af Google-ingeniører, har fundet et sted på tværs af dynamiske webapplikationer og er et stadig mere efterspurgt sprog. Det er et robust og omfattende sprog til front-end-udvikling, der er klar til enhedstest, hvilket gør det til det valgte sprog for mange udviklere. Angular forenkler front-end-udviklingsoplevelsen ved at udvide HTML-syntaksen, så du hurtigt kan oprette indholdsstyringsfunktioner.

På grund af Angular's enkelhed drager udviklere i stigende grad fordel af det for at tilføje CMS-kapacitet til websteder.

For Wordpress-brugere er en populær måde at integrere indholdsstyringsfunktion på at arbejde med wp-api-angular-biblioteket, der giver dig mulighed for at interagere med Wordpress API og Angular-applikationer. Hvis du bruger Wordpress som en CMS-platform, kan brug af Angular og Wordpress API reducere indlæsningstider for indhold på din side.

For dem der ikke bruger Wordpress, er der en ny race af API-baserede CMS'er, der i høj grad forenkler ting. Vi diskuterer et eksempel her.

I denne artikel bruger vi ButterCMS som et alternativ til Wordpress og et eksempel på et SaaS-baseret headless CMS, der giver et hostet CMS-dashboard og indholds-API, som du spørger fra din Angular-applikation. Dette betyder, at du ikke behøver at spinde nogen ny infrastruktur for at tilføje CMS til din Angular-app.

Denne vejledning vil demonstrere, hvordan man opbygger en CMS-drevet Angular-applikation, der har marketing-sider (kundesagstudier), en blog og ofte stillede spørgsmål, alt sammen drevet via API. Ingen servere nødvendige!

Installation

Først kommer du i gang ved at installere Angular cli.

npm install -g @angular/cli

Opsæt et nyt Angular-projekt ved hjælp af Angular cli. Som standard bruger angular-cli CSS-stil, så tilføjelse af —-style=scssflag fortæller Angular CLI at bruge SCSS i stedet.

ng new hello-buttercms-project --style=scsscd hello-buttercms-project

Installer pakker med kantet materiale og kantet materiale.

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

Installer ButterCMS. Kør dette på din kommandolinje:

npm install buttercms --save

Smør kan også læsses ved hjælp af et CDN:

Kom hurtigt i gang

Åbn projektet i din valgte kodeditor. Opret en mappe, der hedder under src / app_services

Vi opretter en fil, der hedder butterCMS.service.js. Dette giver dig mulighed for at have dit API-token ét sted og ikke ved et uheld ændre det.

import * as Butter from 'buttercms';
export const butterService = Butter('b60a008584313ed21803780bc9208557b3b49fbb');

Du importerer denne fil til en hvilken som helst komponent, hvor du vil bruge ButterCMS.

For en hurtigstart skal du gå til src/app/hello-you/hello-you.component.tsog importerebutterService

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

Inde i HelloYouComponent, opret metoder:

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

Ring nu til denne metode, når komponenten er indlæst ved at føje den til OnInitlivscykluskrogen:

ngOnInit() { this.fetchPosts();}

Denne API-anmodning henter et eksempel på et blogindlæg. Din konto leveres med et eksempel på et indlæg, som du kan se i svaret. Hvis du får et svar, betyder det, at du nu er i stand til at oprette forbindelse til API'en.

Tilføj marketing sider

Opsætning af CMS-drevne sider er en tretrins proces:

  1. Definer sidetype
  2. Opret en side
  3. Integrer i din applikation

Definer side

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:

{ "data": { "slug": "acme-co", "fields": { "facebook_open_graph_title": "Acme Co loves ButterCMS", "seo_title": "Acme Co Customer Case Study", "headline": "Acme Co saved 200% on Anvil costs with ButterCMS", "testimonial": "

We’ve been able to make anvils faster than ever before! — Chief Anvil Maker

\r\n

", "customer_logo": "//cdn.buttercms.com/c8oSTGcwQDC5I58km5WV", } } }

This guide uses the Angular framework and Angular CLI to generate all the components and package our application.

Let’s get to the code.

Create new project

ng new buttercms-project --style=scsscd buttercms-projectnpm install --save @angular/material @angular/cdknpm install --save @angular/animationsnpm install -S buttercmsng serve

Your localhost:4200 should be ready to serve your Angular page.

Create typescript to export ButterCMS service

Under src/app create a directory called _services. Create a file called butterCMS.service.js.

import * as Butter from 'buttercms';export const butterService = Butter('your_api_token');

Update the component routes

These components are generated by Angular CLI using:

ng g component nt>

Under src/app create a file called app-routing.module.ts

import {NgModule} from '@angular/core';import {RouterModule, Routes} from '@angular/router';import {CustomerComponent} from './customer/listing/customer.listing.component';import {FaqComponent} from './faq/faq.component';import {BlogPostComponent} from './blog-post/listing/blog-post.component';import {HomeComponent} from './home/home.component';import {CustomerDetailsComponent} from './customer/details/customer.details.component';import {BlogPostDetailsComponent} from './blog-post/details/blog-post.details.component';import {FeedComponent} from './feed/feed.component';import {HelloYouComponent} from './hello-you/hello-you.component';
const appRoutes: Routes = [ {path: 'customer', component: CustomerComponent}, {path: 'customer/:slug', component: CustomerDetailsComponent}, {path: 'faq', component: FaqComponent}, {path: 'blog', component: BlogPostComponent}, {path: 'blog/:slug', component: BlogPostDetailsComponent}, {path: 'rss', component: FeedComponent}, {path: 'hello-you', component: HelloYouComponent}, {path: 'home', component: HomeComponent}, {path: '**', redirectTo: 'home'}];
@NgModule({ imports: [RouterModule.forRoot(appRoutes)], exports: [RouterModule]})export class AppRoutingModule {}

Set up the Customer List page

Under apps/customer type: ng g component

In the file apps/customer/listing/customer.listing.component.ts :

  1. Import butterService
  2. In OnInit hook, use butterService to get the list of customers
  3. Store results in pages variable and markup (HTML) will be updated with the data
import {Component, OnInit} from '@angular/core';import {butterService} from '../../_services';
@Component({ selector: 'app-customer', templateUrl: './customer.listing.component.html', styleUrls: ['./customer.listing.component.scss']})
export class CustomerComponent implements OnInit { public pages: any[]; constructor() { }
ngOnInit() { butterService.page.list(‘customer_case_study’) .then((res) => { this.pages = res.data.data; }); }}

Display the results in customer.listing.component.html


     
       ;Customers 
       
      
     

whatshot

Set up the Customer Detail page

Under apps/customer, type ng g component details .

apps/customer/details/customer.details.component.ts

Create customer page

  1. Import butterService
  2. In OnInit hook, use butterService to get the customer page given the slug in the URL path
  3. Store results in page variable and markup (HTML) will be updated with the customer data
import {Component, OnInit} from '@angular/core';import {Observable} from 'rxjs/Observable';import {ActivatedRoute} from '@angular/router';import {butterService} from '../../_services';import {map, take} from 'rxjs/operators';
@Component({ selector: 'app-customer-details', templateUrl: './customer.details.component.html', styleUrls: ['./customer.details.component.scss']})
export class CustomerDetailsComponent implements OnInit { constructor(protected route: ActivatedRoute) { }
 protected slug$: Observable; public page: any;
 ngOnInit() { this.slug$ = this.route.paramMap .pipe( map(params => (params.get('slug'))) );
 this.slug$.pipe( take(1)) .subscribe(slug => { butterService.page.retrieve('customer_case_study', slug) .then((res) => { this.page = res.data.data; }).catch((res) => { console.log(res); }); }); } }

Display the results in customer.details.component.html


     
    

 

{{page.fields.headline}}

Testimonials

You can now navigate to the Customer Page via the list of all Customer Pages or directly via URL.

Add a knowledge base

Set up content fields

Let’s suppose you want to add a CMS to a static FAQ page with a title and a list of questions with answers.

Making your content dynamic with Butter is a two-step process:

  1. Setup custom content fields in Butter
  2. Integrate the fields into your application

To setup custom content fields, first sign in to the Butter dashboard.

Create a new workspace or click on an existing one. Workspaces let you organize content fields in a friendly way for content editors and have no effect on development or the API. For example, a real-estate website might have a workspace called “Properties” and another called “About Page”.

Once you’re in a workspace click the button to create a new content field. Choose the “Object” type and name the field “FAQ Headline.”

After saving, add another field, but this time choose the “Collection” type and name the field FAQ Items .

On the next screen, setup two properties for items in the collection.

Now go back to your workspace and update your heading and FAQ items.

Integrate your app

Create FAQ Component

Under apps type: ng g component faq

apps/faq/faq.component.ts

Set up onInit hook to load FAQ

import {Component, OnInit} from '@angular/core';import {butterService} from '../_services';
@Component({ selector: 'app-faq', templateUrl: './faq.component.html', styleUrls: ['./faq.component.scss']})
export class FaqComponent implements OnInit { constructor() {}
 public faq: any = { items: [], title: 'FAQ' };
ngOnInit() { butterService.content.retrieve(['faq_headline', 'faq_items']) .then((res) => { console.log(res.data.data); this.faq.title = res.data.data.faq_headline; this.faq.items = res.data.data.faq_items; }); }}

Display the result


      
     

; {{item.question}}

The values entered in the Butter dashboard will immediately update the content in our app.

Blogging

To display posts, you need to create a /blog route in your app and fetch blog posts from the Butter API, as well as a /blog/:slug route to handle individual posts.

See the API reference for additional options such as filtering by category or author. The response also includes some metadata we’ll use for pagination.

Set up Blog Homepage

Under apps/blog-post, type: ng g component listing .

apps/blog-post/listing/blog-post.listing.component.ts

Update component to get all posts:

  1. Import butterService
  2. Get all post onInit
import {Component, OnInit} from '@angular/core';import {butterService} from '../../_services';
@Component({ selector: 'app-blog-post', templateUrl: './blog-post.component.html', styleUrls: ['./blog-post.component.scss']})export class BlogPostComponent implements OnInit { public posts: any[];
 constructor() { }
ngOnInit() { butterService.post.list({ page: 1, page_size: 10}).then((res) => { console.log(res.data) this.posts = res.data.data; }); }}

Display the result:


     
       Blog Posts; 
     
  ; 

;


     
       whatshot 
     

Set up Blog Post page

Under apps/blog-post, type: ng g component details

apps/blog-post/details/blog-post.details.component.ts

To show a single post:

  1. Import butterService
  2. In OnInit hook, use butterService to get the blog-post post given the slug in the URL path
  3. Store results in post variable and markup (HTML) will be updated with the customer data
import {Component, OnInit, ViewEncapsulation} from '@angular/core';import {Observable} from 'rxjs/Observable';import {ActivatedRoute} from '@angular/router';import {butterService} from '../../_services';import {map, take} from 'rxjs/operators';
@Component({ selector: 'app-blog-post-details', templateUrl: './blog-post.details.component.html', styleUrls: ['./blog-post.details.component.scss'], encapsulation: ViewEncapsulation.None})
export class BlogPostDetailsComponent implements OnInit {
 constructor(protected route: ActivatedRoute) { }
 protected slug$: Observable; public post = { meta: null, data: null};
ngOnInit() { this.slug$ = this.route.paramMap .pipe( map(params => (params.get('slug'))) );
 this.slug$.pipe( take(1)) .subscribe(slug => { butterService.post.retrieve(slug) .then((res) => { this.post = res.data; }).catch((res) => { console.log(res); }); }); }}

Display the result:


      
     

{{post.data.title}} < ;> ; {{post.data.author.first_name}} {{post.data.author.last_name}}

Now your app has a working blog that can be updated easily in the ButterCMS dashboard.

Categories, tags, and authors

Use Butter’s APIs for categories, tags, and authors to feature and filter content on your blog.

List all categories and get posts by category

Call these methods on the onInit() lifecycle hook:

methods: { ... getCategories() { butter.category.list() .then((res) => { console.log('List of Categories:') console.log(res.data.data) }) }, getPostsByCategory() { butter.category.retrieve('example-category', { include: 'recent_posts' }) .then((res) => { console.log('Posts with specific category:') console.log(res) }) } }, created() { ... this.getCategories() this.getPostsByCategory()}
 getCategories() { butter.category.list() .then((res) => { console.log(‘List of Categories:’) console.log(res.data.data) }) }, getPostsByCategory() { butter.category.retrieve(‘example-category’, { include: ‘recent_posts’ }) .then((res) => { console.log(‘Posts with specific category:’) console.log(res) }) }},created() { … this.getCategories() this.getPostsByCategory()}

Wrap up

Congrats, you’ve successfully turned your static Angular application into a CMS-powered app using content APIs and thereby maintaining a serverless architecture. Your development team can take advantage of the time-saving aspects of Angular, and you’ve saved even more time by using a serverless CMS.

If you’ve enjoyed this article, please help it spread by clapping below! For more content like this, follow us on Twitter and subscribe to our blog.

And if you want to add a blog or Angular CMS to your website without messing around with Wordpress, you should try Butter CMS.