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.

Important Note

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 add command of the Angular CLI to install Scully in our Angular application:

ng add @scullyio/init

The preceding command downloads and installs all the necessary npm packages for Scully to work correctly in our Angular application. It also modifies the structure of the Angular project to accommodate its specific needs.

It imports ScullyLibModule in our main application module:

app.module.ts

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 that contains various Angular services and directives that Scully will need.

It also creates a configuration file for the Scully library in the root folder of the Angular CLI workspace:

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

  Important Note

  The Scully output path must be different from the path that the Angular CLI outputs the bundle of your Angular application. The latter can be configured from 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

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:
   

   Figure 2.5 – Blog module name

   This will create a new Angular module named posts.

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

   Figure 2.6 – Markdown slug

   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:
   

   Figure 2.7 – Markdown files path

   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:

Figure 2.8 – Blog route name

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 {}

path 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 construct 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 put Angular and Scully to cooperate and display blog posts in our Angular application.