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 applicationprojectName
: The name of the Angular applicationoutDir
: The output path of the Scully generated filesImportant 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):
- Type
posts
as the name of the blog module:This will create a new Angular module named posts.
- Leave the slug choice empty, and press Enter to accept the default value:
The slug is a unique identifier for each post, and it is defined in the route configuration object of the module.
- Enter
mdfiles
as the path that Scully will use to store our actual blog post 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. - Type
posts
as the name of the route for accessing our blog posts:
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.