Build a blog with Scully, the Angular Static Site Generator and Webiny

Create a new API key and copy the actual token and save it.

Create a .env file at the base of your project and add the below code.

CMS_BASE_URL=https://your-webiny-base-url
GRAPHQL_API_URL=https://yourgrapgql-url/graphql
GRAPHQL_API_TOKEN=your-api-token

We will first access our schema.json file to define our interface such as:

export interface ArticlePost{
  id: string;
  title: string;
  image: string;
  description: string;
}

Create an authentication folder and name the file webiny.config.ts

importimport { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';

@Injectable()
export class WebinyConfig {
    constructor(
        public readonly url: string,
        public readonly APP_NAME: string,
        public readonly GRAPHQL_API_URL: string,
        public readonly GRAPHQL_API_TOKEN: string
    ) {
    }

    public buildUrl(url: string) {
        if (url.length > 0 && url.startsWith('/')) {
            url = url.substr(1);
        }

        const result = `${this.url}/${url}`.replace('{app}', this.APP_NAME);

        return result;
    }
}

export const DefaultWebinyConfig = new WebinyConfig(
    'CMS_BASE_URL',
    `${environment.webiny.APP_NAME}`,
    `${environment.webiny.GRAPHQL_API_URL}`,
    `${environment.webiny.GRAPHQL_API_TOKEN}`
);

Next, we need an interceptor to authenticate our backend. So add the following content to the interceptor file (post-auth.interceptor.ts).

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor,
  HttpErrorResponse,
  HttpHeaders,
  HttpResponse
} from '@angular/common/http';
import { Observable, of, throwError } from 'rxjs';
import { catchError, filter, map, switchMap } from 'rxjs/operators';
import { WebinyConfig } from './webiny.config';

@Injectable()
export class ContentAuthInterceptor implements HttpInterceptor {

  constructor( private readonly config: WebinyConfig) {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {

    if(request.url.includes('webiny')){
      return this.invokeInternal(request, next, true);
    }else{
      return next.handle(request);
    }
  }

  private invokeInternal(req: HttpRequest<any>, next: HttpHandler, retry: boolean): Observable<HttpEvent<any>> {
    return this.getToken(next).pipe(
        switchMap(token => {
            req = req.clone({
                setHeaders: {
                    Authorization: `Bearer ${token}`
                }
            });

            return next.handle(req).pipe(
                catchError((error: HttpErrorResponse) => {
                    if ((error.status === 403 || error.status === 401) && retry) {
                        clearBearerToken();

                        return this.invokeInternal(req, next, false);
                    } else {
                        return throwError(error);
                    }
                })
            );
        })
    );
  }
  private getToken(next: HttpHandler) {
    // Check if we have already a bearer token in local store.
    const cachedToken = getBearerToken();

    if (cachedToken) {
        return of(cachedToken);
    }

    // tslint:disable-next-line: max-line-length
    const body = `token_key=${this.config.GRAPHQL_API_URL}`;

    const tokenRequest = new HttpRequest('POST', this.config.buildUrl('identity-server/connect/token'), body, {
        responseType: 'json',
        headers: new HttpHeaders({
            'Content-Type': 'application/x-www-form-urlencoded'
        })
    });

    return next.handle(tokenRequest).pipe(
      filter (x => x instanceof HttpResponse),
      map((response: HttpResponse<any>) => {
      const token = response.body.access_token;

      // Cache the bearer token in the local store.
      setBearerToken(token);
      return token;
    }));
  }
}

function getBearerToken() {
  return localStorage.getItem('token');
}

function setBearerToken(token: string) {
  localStorage.setItem('token', token);
}

function clearBearerToken() {
  localStorage.removeItem('token');
}

Let’s add apollo-angular to our app to fetch our data from the graphql api. Then add this to configure the api url and token key in our app.

ng add apollo-angular

In graphql module.ts, replace uri variable with the following:

const uri = environment.webiny.GRAPHQLAPI;

Also, add the access token as follows:

const authLink = setContext((_, { headers }) => {
  const token = localStorage.getItem(environment.webiny.GRAPHQLTOKEN);
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : "",
    },
  };
});

The graphql module.ts file will look like this:

import {NgModule} from '@angular/core';
import {ApolloModule, APOLLO_OPTIONS} from 'apollo-angular';
//import { ApolloClient } from 'apollo-client';
import {ApolloClientOptions, ApolloLink, InMemoryCache} from '@apollo/client/core';
import {HttpLink} from 'apollo-angular/http';
import { HttpClient, HttpClientModule, HttpHeaders } from '@angular/common/http';
import { onError } from "@apollo/client/link/error";
import { setContext } from "@apollo/client/link/context";
import { environment } from 'src/environments/environment';

const uri = 'https://d2ldhnat8tybyp.cloudfront.net/graphql'; // <-- add the URL of the GraphQL server here

export function createApollo(httpLink: HttpLink): ApolloClientOptions<any> {

  const basic = setContext(() => ({
    headers: new HttpHeaders()
      .set('Accept', 'charset=uf-8'),
  }));

  const auth = setContext((operation: any, ctx: { headers: { append: (arg0: string, arg1: string) => any; }; }) => ({
    headers: ctx.headers.append('Authorization', `${environment.webiny.GRAPHQL_API_TOKEN}`)
  }));

  const link = ApolloLink.from([basic, auth, httpLink.create({ uri })]);
  const cache = new InMemoryCache();

  return {
    link,
    cache: new InMemoryCache()
  }
}

@NgModule({
  exports: [
    HttpClientModule,
    ApolloModule,
  ],
  providers: [{
    provide: APOLLO_OPTIONS,
    useFactory: createApollo,
    deps: [HttpLink, HttpClient],
  }],
})

export class GraphQLModule {}

Before we get started on creating components, we will first access our data. We will use the generate a service that will call our api to access our posts data.

Create a service (Content.service.ts) to access data:

ng g s content 

import { Injectable } from '@angular/core';
import { ApolloQueryResult } from '@apollo/client';
import { isScullyGenerated,  TransferStateService  } from '@scullyio/ng-lib';
import { gql, Apollo } from 'apollo-angular';
import { map, Observable, tap } from 'rxjs';
import { ArticlePost } from '../models/post';

const Get_Posts = gql`
query Data {
    listArticlePosts {
      data {
        id
        title
        image
        description
      }
  }
}
`;

@Injectable({
  providedIn: 'root'
})
export class PostService {

  constructor(private apollo: Apollo, private transferStateService: TransferStateService){ }

  getPosts(): Observable<any> {
    return this.apollo.watchQuery<any>({
      query: Get_Posts
    }).valueChanges.pipe(map((result) => result.data));

  }
  getContentBySlug(slug: string): Observable<any> {
    return this.apollo.watchQuery<any>({
      query: Get_Posts
    }).valueChanges.pipe(
      map((data: any) =>
        data.items.find((item: ArticlePost) => item.slug === slug)
      )
    );
  }

  title = 'blog-app';

}

Creating a list article page

The first component that we are going to create is list module that will contain all the blog post links. Add a home component.

ng g list

Generate a home component:

ng g m home

In the app-routing.module.ts, configure the routes:

const routes: Routes = [{
  path: '',
  component: HomeComponent,
  path: '',
  component: ListComponent,
}];

We can inject our service in the home component to load our data

Open list.component.ts and update it with following content:

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { PostService } from 'src/app/services/post.service';
import { ArticlePost } from 'src/app/models/post';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.scss']
})
export class ListComponent implements OnInit {
  posts!: Observable<ArticlePost[]>;

  constructor(private postService: PostService) {

  }

    ngOnInit() {
      this.posts = this.postService.getPosts();
  
  }
}

Then add this in our home template (list.component.html):

<div class="intro">
  <h3>Scully Webiny Blog</h3>
  <span>A simple blog built with Scully and Webiny</span>
</div>
<p>Recent Posts</p>
<div class="post-wrapper">
  <div class="post" *ngFor="let post of (posts | async)">
    <h1>{{ post.title }}</h1>
    <small>Date:{{ post.createdOn}}</small>
    <a [routerLink]="['/blog' + post.id]"><button class="submit-btn">Read article</button></a>
  </div>
</div>

Creating a single list post

We need to read the id from the URL and display the correct article in the Angular post component. It should import the ActivatedRoute and ArticleService modules and uses the ngOnInit() method to subscribe to route parameters and retrieve the article details from the ArticleService. First, we are going to create a Post component:

ng g c Post

Add following content to (post.component.html) file:

<h1 [innerHTML]="title"></h1>
<div [innerHTML]="body"></div>

Add following content to (post.component.ts) file:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ArticlePost } from 'src/app/models/post';
import { PostService } from 'src/app/services/post.service';

@Component({
  selector: 'app-blog-post',
  templateUrl: './blog-post.component.html',
  styleUrls: ['./blog-post.component.scss']
})
export class BlogPostComponent implements OnInit {

  postId:string | null;
  title: string | null;
  body: string | null;

  constructor(private postService: PostService,
    private route: ActivatedRoute) {
      
      this.postId = this.route.snapshot.paramMap.get("postId");
      this.title = null;
      this.body = null;
    }

  ngOnInit(): void {
    const postId: string = this.postId ?? '';

    this.postService.getContentById(postId).subscribe(
      result => {
        const post:ArticlePost = result;
        this.title = post.title;
        this.body = post.data.text;

      }
    );
  }

}

Ensure the routes are configured correctly in the app-routing module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { BlogPostComponent } from './components/blog-post/blog-post.component';
import { ListComponent } from './components/list/list.component';

const routes: Routes = [
  {path: 'blog/:postId', component: BlogPostComponent},
  {path: '', component: ListComponent},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Now, let’s add Scully to our project. We're going to use Scully to make it into a static site. It'll still have some JavaScript, but it won't be a SPA. Each route will have a "physical" Html file, that does not need to be rendered at run time.

ng add @scullyio/init --project="your-project-name"

The above command creates a Scully config file named Scully.<projectName>.config.ts, scully.blog-app.config.ts where the projectName is the name of your Angular project.

import { ScullyConfig } from '@scullyio/Scully;

export const config: ScullyConfig = {
    projectRoot: './src',
    projectName: 'blog-app',
    outDir: './dist/static',
    routes: {},
};

You may have noticed that Scully module has been added to our app component

import { ScullyLibModule } from '@scullyio/ng-lib';

@NgModule({
  // ...
  imports: [
    // ...
    ScullyLibModule
  ]
})
export class AppModule { }

Modify plugin in Scully to fetch our data. First, copy the default plugin and edit it as follows:

You can create a new router plugin name it articleServicePlugin.js in the plugins folder.

import {
  ApolloClient,
  ApolloLink,
  concat,
  gql,
  HttpLink,
  InMemoryCache,
} from '@apollo/client/core';
import fetch from 'node-fetch';
import { HandledRoute, registerPlugin } from '@scullyio/scully';
import { environment } from '../../src/environments/environment';

const authMiddleware = new ApolloLink((operation, forward) => {
  // add the authorization to the headers
  operation.setContext({
    headers: {
      authorization: `Bearer ${environment.webiny.GRAPHQL_API_TOKEN}`,
    },
  });
  return forward(operation);
});
const client = new ApolloClient({
  link: concat(
    authMiddleware,
    new HttpLink({
      uri: environment.webiny.GRAPHQL_API_URL,
      fetch,
    })
  ),
  cache: new InMemoryCache(),
});
registerPlugin(
  'router',
  'articlePostPlugin',
  async (route: string, config = {}): Promise<HandledRoute[]> => {
    const {
      data: { listArticlePosts },
    } = await client.query({
      query: gql`
        query Data {
          listArticlePosts {
            data{
              id
              title

            }
          
          }
        }
      `,
    });
    return Promise.resolve(
      listArticlePosts.map((post) => ({ route: `/blog/${post.id}` }))
    );
  }
);

Depending on where you acquire the data from, there are many ways to construct routes for Scully. Here, we're using a Headless CMS and a graphql API to obtain the data. As a result, we are making a GraphQL query to get a list of article posts which includes their IDs and titles. Then maps the posts to the route and returns an array of HandledRoutes.

Here is how to configure this in scully.config.ts

import { ScullyConfig } from '@scullyio/scully';
import './scully/plugins/articlePostPlugin';

/** this loads the default render plugin, remove when switching to something else. */
import '@scullyio/scully-plugin-puppeteer'

export const config: ScullyConfig = {
  projectRoot: "./src",
  projectName: "blog-app",
  // add spsModulePath when using de Scully Platform Server,
  outDir: './dist/static',
  
  routes: {
    '/blog/:postId': {
      type: 'articlePostPlugin'
    }
  }
};

To view our site, execute this command in your terminal.

npm run build && npm run scully

This is the final site that will be rendered after hosting our app locally, there is a home page and individual articles.

Run the code below in your terminal:

npm run scully:serve