Adding blog capabilities with Scully

Our application currently does not have any specific logic regarding blog posts. It is a typical Angular application that uses routing. However, by adding a routing configuration, we have established the foundation for adding blog support using Scully.

Scully needs at least one route defined in an Angular application to work correctly.

First, we need to install Scully in our application.

Installing the Scully library

We will use the install command of the npm CLI to install Scully in our Angular application:

npm install @scullyio/init @scullyio/ng-lib @scullyio/scully @scullyio/scully-plugin-puppeteer --force

The preceding command downloads and installs all the necessary npm packages for Scully to work correctly in our Angular application.

The Scully library is not fully compatible with Angular 16, as of this writing. In the preceding command we use the --force option to ignore any warnings that come from the Angular version incompatibility.

Open the app.module.ts file and import ScullyLibModule:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ContactModule } from './contact/contact.module';
import { CoreModule } from './core/core.module';
import { SharedModule } from './shared/shared.module';
import { ScullyLibModule } from '@scullyio/ng-lib';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    CoreModule,
    SharedModule,
    ContactModule,
    ScullyLibModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

ScullyLibModule is the main module of the Scully library; it contains various Angular services and directives that Scully will need.

Create a configuration file for the Scully library in the root folder of the Angular CLI workspace with the following contents:

scully.my-blog.config.ts

import { ScullyConfig } from '@scullyio/scully';
export const config: ScullyConfig = {
  projectRoot: "./src",
  projectName: "my-blog",
  outDir: './dist/static',
  routes: {
  }
};

The configuration file contains information about our Angular application that Scully will need along the way:

• projectRoot: The path containing the source code of the Angular application
• projectName: The name of the Angular application
• outDir: The output path of the Scully-generated files

  The Scully output path must be different from the path that the Angular CLI outputs for the bundle of your Angular application. The latter can be configured in the angular.json file.

• routes: It contains the route configuration that will be used for accessing our blog posts. Scully will populate it automatically, as we will see in the following section.

Since we have installed Scully successfully in our Angular application, we can now configure it to initialize our blog.

Initializing our blog page

Scully provides a specific Angular CLI schematic for initializing an Angular application, such as a blog, by using Markdown (.md) files:

ng generate @scullyio/init:markdown --project my-blog

The previous command will start the configuration process of our blog by going through a list of questions (default values are shown inside parentheses):

1. Type posts as the name of the blog module:

   What name do you want to use for the module? (blog)
   

   This will create a new Angular module named posts.

2. Leave the slug choice empty, and press Enter to accept the default value:

   What slug do you want for the markdown file? (id)
   

   The slug is a unique identifier for each post, and it is defined in the route configuration object of the module.

3. Enter mdfiles as the path that Scully will use to store our actual blog post files:

   Where do you want to store your markdown files?
   

   This will create an mdfiles folder inside the root path of our Angular CLI project. By default, it will also create a blog post for our convenience. We will learn how to create our own in the Displaying blog data on the home page section.

4. Type posts as the name of the route for accessing our blog posts:

   Under which route do you want your files to be requested?
   

The name of the route is the path property of the route configuration object that will be created.

Scully performs various actions upon executing the preceding commands, including the creation of the routing configuration of the posts module:

posts-routing.module.ts

import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {PostsComponent} from './posts.component';
const routes: Routes = [
  {
    path: ':id',
    component: PostsComponent,
  },
  {
    path: '**',
    component: PostsComponent,
  }
];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class PostsRoutingModule {}

The path property for the first route is set to :id and activates PostsComponent. The colon character indicates that id is a route parameter. The id parameter is related to the slug property defined earlier in the Scully configuration. Scully works by creating one route for each blog post that we create. It uses the route configuration of the posts module and the main application module to build the routes property in the Scully configuration file:

routes: {
  '/posts/:id': {
    type: 'contentFolder',
    id: {
      folder: "./mdfiles"
    }
  },
}

PostsComponent is the Angular component that is used to render the details of each blog post. The template file of the component can be further customized according to your needs:

posts.component.html

<h3>ScullyIo content</h3>
<hr>
<!-- This is where Scully will inject the static HTML -->
<scully-content></scully-content>
<hr>
<h4>End of content</h4>

You can customize all content in the previous template file except the <scully-content></scully-content> line, which is used internally by Scully.

At this point, we have completed the installation and configuration of Scully in our Angular application. It is now time for the final part of the project! In the next section, we will get Angular and Scully to cooperate and display blog posts in our Angular application.